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

404

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

404

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

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

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

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

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

Build fully functional accessible web applications faster than ever

About

ContributeAbout MantineChangelogReleases

Community

Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

Project

Mantine UIDocumentationGithub organizationnpm organization

Built by Vitaly Rtishchev and these awesome people

\ No newline at end of file diff --git a/_next/static/chunks/3309-58055b548bcb84fb.js b/_next/static/chunks/3309-58055b548bcb84fb.js new file mode 100644 index 00000000000..2c40887d6eb --- /dev/null +++ b/_next/static/chunks/3309-58055b548bcb84fb.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3309],{3309:function(e,t,a){"use strict";a.d(t,{p:function(){return c}});var n=a(52322),i=(0,a(73681).Z)("outline","file-invoice","IconFileInvoice",[["path",{d:"M14 3v4a1 1 0 0 0 1 1h4",key:"svg-0"}],["path",{d:"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z",key:"svg-1"}],["path",{d:"M9 7l1 0",key:"svg-2"}],["path",{d:"M9 13l6 0",key:"svg-3"}],["path",{d:"M13 17l2 0",key:"svg-4"}]]),s=a(45909),r=a(93010),o=a(17115),v=a(8582),d=a(13444);let h=[{version:"7.10.0",date:"May 23, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.10.0",link:"https://mantine.dev/changelog/7-10-0",patches:[{version:"7.10.1",date:"May 30, 2024"},{version:"7.10.2",date:"June 13, 2024"}]},{version:"7.9.0",date:"May 2, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.9.0",link:"https://mantine.dev/changelog/7-9-0",patches:[{version:"7.9.1",date:"May 8, 2024"},{version:"7.9.2",date:"May 17, 2024"}]},{version:"7.8.0",date:"April 12, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.8.0",link:"https://mantine.dev/changelog/7-8-0",patches:[{version:"7.8.1",date:"April 24, 2024"}]},{version:"7.7.0",date:"March 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.7.0",link:"https://mantine.dev/changelog/7-7-0",patches:[{version:"7.7.2",date:"April 11, 2024"},{version:"7.7.1",date:"March 29, 2024"}]},{version:"7.6.0",date:"February 27, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.6.0",link:"https://mantine.dev/changelog/7-6-0",patches:[{version:"7.6.1",date:"February 28, 2024"},{version:"7.6.2",date:"March 12, 2024"}]},{version:"7.5.0",date:"January 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.5.0",link:"https://mantine.dev/changelog/7-5-0",patches:[{version:"7.5.1",date:"February 2, 2024"},{version:"7.5.2",date:"February 9, 2024"},{version:"7.5.3",date:"February 16, 2024"}]},{version:"7.4.0",date:"January 3, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.4.0",link:"https://mantine.dev/changelog/7-4-0",patches:[{version:"7.4.1",date:"January 9, 2024"},{version:"7.4.2",date:"January 18, 2024"}]},{version:"7.3.0",date:"December 5, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.3.0",link:"https://mantine.dev/changelog/7-3-0",patches:[{version:"7.3.1",date:"December 7, 2023"},{version:"7.3.2",date:"December 14, 2023"}]},{version:"7.2.0",date:"November 6, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.2.0",link:"https://mantine.dev/changelog/7-2-0",patches:[{version:"7.2.2",date:"November 13, 2023"},{version:"7.2.1",date:"November 7, 2023"},{version:"7.2.0",date:"November 6, 2023"}]},{version:"7.1.0",date:"September 28, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.1.0",link:"https://mantine.dev/changelog/7-1-0",patches:[{version:"7.1.6",date:"October 26, 2023"},{version:"7.1.5",date:"October 19, 2023"},{version:"7.1.3",date:"October 12, 2023"},{version:"7.1.2",date:"October 2, 2023"},{version:"7.1.1",date:"October 2, 2023"},{version:"7.1.0",date:"September 28, 2023"}]},{version:"7.0.0",date:"September 18, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.0.0",link:"https://mantine.dev/changelog/7-0-0",patches:[{version:"7.0.2",date:"September 26, 2023"},{version:"7.0.1",date:"September 25, 2023"},{version:"7.0.0",date:"September 18, 2023"}]},{version:"6.0.0",date:"March 2, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/6.0.0",link:"https://v6.mantine.dev/changelog/6-0-0",patches:[{version:"6.0.21",date:"September 17, 2023"},{version:"6.0.20",date:"September 5, 2023"},{version:"6.0.19",date:"August 10, 2023"},{version:"6.0.18",date:"August 7, 2023"},{version:"6.0.17",date:"July 18, 2023"},{version:"6.0.16",date:"July 4, 2023"},{version:"6.0.15",date:"June 27, 2023"},{version:"6.0.14",date:"June 20, 2023"},{version:"6.0.13",date:"May 30, 2023"},{version:"6.0.11",date:"May 16, 2023"},{version:"6.0.10",date:"May 2, 2023"},{version:"6.0.9",date:"April 25, 2023"},{version:"6.0.8",date:"April 18, 2023"},{version:"6.0.7",date:"April 11, 2023"},{version:"6.0.6",date:"April 4, 2023"},{version:"6.0.5",date:"March 28, 2023"},{version:"6.0.3",date:"March 21, 2023"},{version:"6.0.2",date:"March 14, 2023"},{version:"6.0.1",date:"March 8, 2023"},{version:"6.0.0",date:"March 2, 2023"}]},{version:"5.10.0",date:"January 3, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/5.10.0",link:"https://v5.mantine.dev/changelog/5-10-0",patches:[{version:"5.10.5",date:"February 26, 2023"},{version:"5.10.4",date:"February 15, 2023"},{version:"5.10.3",date:"February 3, 2023"},{version:"5.10.2",date:"January 25, 2023"},{version:"5.10.1",date:"January 17, 2023"},{version:"5.10.0",date:"January 3, 2023"}]},{version:"5.9.0",date:"December 1, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.9.0",link:"https://v5.mantine.dev/changelog/5-9-0",patches:[{version:"5.9.6",date:"December 31, 2022"},{version:"5.9.5",date:"December 17, 2022"},{version:"5.9.4",date:"December 12, 2022"},{version:"5.9.3",date:"December 10, 2022"},{version:"5.9.2",date:"December 5, 2022"},{version:"5.9.1",date:"December 4, 2022"},{version:"5.9.0",date:"December 1, 2022"}]},{version:"5.8.0",date:"November 16, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.8.0",link:"https://v5.mantine.dev/changelog/5-8-0",patches:[{version:"5.8.4",date:"November 28, 2022"},{version:"5.8.3",date:"November 23, 2022"},{version:"5.8.2",date:"November 19, 2022"},{version:"5.8.0",date:"November 16, 2022"}]},{version:"5.7.0",date:"November 4, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.7.0",link:"https://v5.mantine.dev/changelog/5-7-0",patches:[{version:"5.7.2",date:"November 12, 2022"},{version:"5.7.1",date:"November 6, 2022"},{version:"5.7.0",date:"November 4, 2022"}]},{version:"5.6.0",date:"October 20, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.6.0",link:"https://v5.mantine.dev/changelog/5-6-0",patches:[{version:"5.6.4",date:"November 2, 2022"},{version:"5.6.3",date:"October 27, 2022"},{version:"5.6.2",date:"October 24, 2022"},{version:"5.6.1",date:"October 22, 2022"},{version:"5.6.0",date:"October 20, 2022"}]},{version:"5.5.0",date:"October 2, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.5.0",link:"https://v5.mantine.dev/changelog/5-5-0",patches:[{version:"5.5.6",date:"October 18, 2022"},{version:"5.5.5",date:"October 11, 2022"},{version:"5.5.4",date:"October 5, 2022"},{version:"5.5.2",date:"October 4, 2022"},{version:"5.5.1",date:"October 3, 2022"},{version:"5.5.0",date:"October 2, 2022"}]},{version:"5.4.0",date:"September 19, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.4.0",link:"https://v5.mantine.dev/changelog/5-4-0",patches:[{version:"5.4.2",date:"September 29, 2022"},{version:"5.4.1",date:"September 24, 2022"},{version:"5.4.0",date:"September 19, 2022"}]},{version:"5.3.0",date:"September 9, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.3.0",link:"https://v5.mantine.dev/changelog/5-3-0",patches:[{version:"5.3.3",date:"September 17, 2022"},{version:"5.3.2",date:"September 15, 2022"},{version:"5.3.1",date:"September 14, 2022"},{version:"5.3.0",date:"September 9, 2022"}]},{version:"5.2.0",date:"August 18, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.2.0",link:"https://v5.mantine.dev/changelog/5-2-0",patches:[{version:"5.2.7",date:"September 8, 2022"},{version:"5.2.6",date:"September 6, 2022"},{version:"5.2.5",date:"September 3, 2022"},{version:"5.2.4",date:"August 27, 2022"},{version:"5.2.3",date:"August 22, 2022"},{version:"5.2.2",date:"August 22, 2022"},{version:"5.2.0",date:"August 18, 2022"}]},{version:"5.1.0",date:"August 8, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.1.0",link:"https://v5.mantine.dev/changelog/5-1-0",patches:[{version:"5.1.7",date:"August 18, 2022"},{version:"5.1.6",date:"August 14, 2022"},{version:"5.1.5",date:"August 13, 2022"},{version:"5.1.4",date:"August 12, 2022"},{version:"5.1.3",date:"August 11, 2022"},{version:"5.1.1",date:"August 9, 2022"},{version:"5.1.0",date:"August 8, 2022"}]},{version:"5.0.0",date:"July 25, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.0.0",link:"https://v5.mantine.dev/changelog/5-0-0",patches:[{version:"5.0.3",date:"August 5, 2022"},{version:"5.0.2",date:"July 30, 2022"},{version:"5.0.0",date:"July 25, 2022"}]},{version:"4.2.0",date:"April 27, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.2.0",link:"https://v4.mantine.dev/changelog/4-2-0",patches:[{version:"4.2.12",date:"July 3, 2022"},{version:"4.2.11",date:"June 26, 2022"},{version:"4.2.10",date:"June 19, 2022"},{version:"4.2.9",date:"June 12, 2022"},{version:"4.2.8",date:"June 5, 2022"},{version:"4.2.7",date:"May 29, 2022"},{version:"4.2.6",date:"May 22, 2022"},{version:"4.2.5",date:"May 15, 2022"},{version:"4.2.3",date:"May 8, 2022"},{version:"4.2.2",date:"May 1, 2022"},{version:"4.2.0",date:"April 27, 2022"}]},{version:"4.1.0",date:"March 28, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.1.0",link:"https://v4.mantine.dev/changelog/4-1-0",patches:[{version:"4.1.5",date:"April 24, 2022"},{version:"4.1.4",date:"April 17, 2022"},{version:"4.1.3",date:"April 9, 2022"},{version:"4.1.2",date:"April 3, 2022"},{version:"4.1.1",date:"April 1, 2022"},{version:"4.1.0",date:"March 28, 2022"}]},{version:"4.0.0",date:"March 10, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.0.0",link:"https://v4.mantine.dev/changelog/4-0-0",patches:[{version:"4.0.9",date:"March 27, 2022"},{version:"4.0.8",date:"March 24, 2022"},{version:"4.0.7",date:"March 20, 2022"},{version:"4.0.6",date:"March 18, 2022"},{version:"4.0.5",date:"March 16, 2022"},{version:"4.0.4",date:"March 13, 2022"},{version:"4.0.3",date:"March 13, 2022"},{version:"4.0.2",date:"March 12, 2022"},{version:"4.0.1",date:"March 11, 2022"},{version:"4.0.0",date:"March 10, 2022"}]},{version:"3.6.0",date:"January 14, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/3.6.0",link:"https://v3.mantine.dev/changelog/3-6-0",patches:[{version:"3.6.14",date:"March 3, 2022"},{version:"3.6.13",date:"March 2, 2022"},{version:"3.6.12",date:"March 1, 2022"},{version:"3.6.11",date:"February 25, 2022"},{version:"3.6.10",date:"February 24, 2022"},{version:"3.6.9",date:"February 17, 2022"},{version:"3.6.8",date:"February 16, 2022"},{version:"3.6.7",date:"February 9, 2022"},{version:"3.6.6",date:"February 5, 2022"},{version:"3.6.5",date:"February 2, 2022"},{version:"3.6.4",date:"January 30, 2022"},{version:"3.6.3",date:"January 25, 2022"},{version:"3.6.2",date:"January 20, 2022"},{version:"3.6.1",date:"January 17, 2022"},{version:"3.6.0",date:"January 14, 2022"}]},{version:"3.5.0",date:"January 3, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/3.5.0",link:"https://v3.mantine.dev/changelog/3-5-0",patches:[{version:"3.5.5",date:"January 12, 2022"},{version:"3.5.4",date:"January 9, 2022"},{version:"3.5.3",date:"January 8, 2022"},{version:"3.5.2",date:"January 7, 2022"},{version:"3.5.1",date:"January 6, 2022"},{version:"3.5.0",date:"January 3, 2022"}]},{version:"3.4.0",date:"December 14, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.4.0",link:"https://v3.mantine.dev/changelog/3-4-0",patches:[{version:"3.4.3",date:"December 20, 2021"},{version:"3.4.2",date:"December 18, 2021"},{version:"3.4.1",date:"December 16, 2021"},{version:"3.4.0",date:"December 14, 2021"}]},{version:"3.3.0",date:"December 2, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.3.0",link:"https://v3.mantine.dev/changelog/3-3-0",patches:[{version:"3.3.5",date:"December 7, 2021"},{version:"3.3.4",date:"December 6, 2021"},{version:"3.3.3",date:"December 6, 2021"},{version:"3.3.2",date:"December 4, 2021"},{version:"3.3.1",date:"December 3, 2021"},{version:"3.3.0",date:"December 2, 2021"}]},{version:"3.2.0",date:"November 13, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.2.0",link:"https://v3.mantine.dev/changelog/3-2-0",patches:[{version:"3.2.3",date:"November 26, 2021"},{version:"3.2.2",date:"November 22, 2021"},{version:"3.2.1",date:"November 19, 2021"},{version:"3.2.0",date:"November 13, 2021"}]},{version:"3.1.0",date:"October 28, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.1.0",link:"https://v3.mantine.dev/changelog/3-1-0",patches:[{version:"3.1.9",date:"November 13, 2021"},{version:"3.1.8",date:"November 10, 2021"},{version:"3.1.7",date:"November 8, 2021"},{version:"3.1.6",date:"November 5, 2021"},{version:"3.1.5",date:"November 5, 2021"},{version:"3.1.4",date:"November 3, 2021"},{version:"3.1.3",date:"November 2, 2021"},{version:"3.1.2",date:"November 1, 2021"},{version:"3.1.1",date:"November 1, 2021"},{version:"3.1.0",date:"October 28, 2021"}]},{version:"3.0.0",date:"October 10, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.0.0",link:"https://v3.mantine.dev/changelog/3-0-0",patches:[{version:"3.0.5",date:"October 16, 2021"},{version:"3.0.4",date:"October 14, 2021"},{version:"3.0.3",date:"October 13, 2021"},{version:"3.0.2",date:"October 12, 2021"},{version:"3.0.1",date:"October 11, 2021"},{version:"3.0.0",date:"October 10, 2021"}]},{version:"2.5.0",date:"September 16, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.5.0",link:"https://v2.mantine.dev/changelog/2-5-0",patches:[{version:"2.5.1",date:"September 17, 2021"},{version:"2.5.0",date:"September 16, 2021"}]},{version:"2.4.0",date:"August 24, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.4.0",link:"https://v2.mantine.dev/changelog/2-4-0",patches:[{version:"2.4.3",date:"September 5, 2021"},{version:"2.4.2",date:"September 5, 2021"},{version:"2.4.1",date:"September 1, 2021"},{version:"2.4.0",date:"August 24, 2021"}]},{version:"2.3.0",date:"August 15, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.3.0",link:"https://v2.mantine.dev/changelog/2-3-0",patches:[{version:"2.3.2",date:"August 24, 2021"},{version:"2.3.1",date:"August 19, 2021"},{version:"2.3.0",date:"August 15, 2021"}]},{version:"2.2.0",date:"August 2, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.2.0",link:"https://v2.mantine.dev/changelog/2-2-0",patches:[{version:"2.2.3",date:"August 15, 2021"},{version:"2.2.2",date:"August 12, 2021"},{version:"2.2.1",date:"August 4, 2021"},{version:"2.2.0",date:"August 2, 2021"}]},{version:"2.1.0",date:"July 20, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.1.0",link:"https://v2.mantine.dev/changelog/2-1-0",patches:[{version:"2.1.5",date:"July 30, 2021"},{version:"2.1.4",date:"July 27, 2021"},{version:"2.1.3",date:"July 26, 2021"},{version:"2.1.2",date:"July 24, 2021"},{version:"2.1.1",date:"July 21, 2021"},{version:"2.1.0",date:"July 20, 2021"}]},{version:"2.0.0",date:"July 5, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.0.0",link:"https://v2.mantine.dev/changelog/2-0-0",patches:[{version:"2.0.7",date:"July 18, 2021"},{version:"2.0.6",date:"July 16, 2021"},{version:"2.0.5",date:"July 14, 2021"},{version:"2.0.4",date:"July 13, 2021"},{version:"2.0.3",date:"July 11, 2021"},{version:"2.0.2",date:"July 6, 2021"},{version:"2.0.0",date:"July 5, 2021"}]},{version:"1.3.0",date:"June 1, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.3.0",link:"https://v2.mantine.dev/changelog/1-3-0",patches:[{version:"1.3.1",date:"June 2, 2021"},{version:"1.3.0",date:"June 1, 2021"}]},{version:"1.1.0",date:"May 19, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.1.0",link:"https://v2.mantine.dev/changelog/1-1-0",patches:[{version:"1.1.1",date:"May 20, 2021"},{version:"1.1.0",date:"May 19, 2021"}]},{version:"1.0.0",date:"May 3, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.0.0",link:"https://v2.mantine.dev/changelog/1-0-0",patches:[{version:"1.0.6",date:"May 9, 2021"},{version:"1.0.5",date:"May 8, 2021"},{version:"1.0.4",date:"May 8, 2021"},{version:"1.0.3",date:"May 5, 2021"},{version:"1.0.2",date:"May 5, 2021"},{version:"1.0.0",date:"May 3, 2021"}]}];var m=a(1353),g=a.n(m);function c(){let e=h.map(e=>{var t;let a=e.patches.filter(e=>!e.version.endsWith("0")).map(e=>(0,n.jsx)("li",{children:(0,n.jsxs)("a",{href:"https://github.com/mantinedev/mantine/releases/tag/".concat(e.version),target:"_blank",className:g().patchLink,rel:"noreferrer",children:[(0,n.jsx)(s.E,{className:g().patchBadge,children:e.version})," –"," ",(0,n.jsx)("span",{className:g().patchLinkLabel,children:e.date})]})},e.version));return(0,n.jsxs)("div",{className:g().minorVersion,children:[(0,n.jsxs)(r.Z,{className:g().versionHeader,children:[(0,n.jsx)("a",{href:"1.0.0"!==e.version?e.link:e.github,className:g().minorVersionBadgeWrapper,target:"_blank",rel:"noreferrer",children:(0,n.jsx)(s.E,{className:g().minorVersionBadge,children:e.version})}),(0,n.jsxs)(r.Z,{gap:"xs",children:["1.0.0"!==e.version&&(0,n.jsx)(o.z,{variant:"default",component:"a",href:e.link,radius:"md",size:"xs",target:"_blank",leftSection:(0,n.jsx)(i,{size:14}),children:"Changelog"}),(0,n.jsx)(o.z,{component:"a",variant:"default",href:e.github,target:"_blank",radius:"md",size:"xs",className:g().githubControl,leftSection:(0,n.jsx)(d.E,{size:12}),children:"GitHub release"})]}),(0,n.jsx)(v.x,{className:g().minorVersionDate,children:e.date})]}),a.length>0?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(v.x,{mt:"1.5rem",fz:15,children:[(0,n.jsx)("b",{children:(t=e.version,"".concat(t.split(".").slice(0,2).join("."),".X"))})," patches:"]}),(0,n.jsx)("ul",{children:a})]}):(0,n.jsxs)(v.x,{mt:"1rem",fz:15,children:["Version ",e.version," does not have associated patch releases yet."]})]},e.version)});return(0,n.jsx)("div",{className:g().root,children:e})}},1353:function(e){e.exports={root:"VersionsList_root__NkvIm",minorVersion:"VersionsList_minorVersion___wjoQ",minorVersionBadgeWrapper:"VersionsList_minorVersionBadgeWrapper__vEYlh",minorVersionBadge:"VersionsList_minorVersionBadge__Y3CXf",minorVersionDate:"VersionsList_minorVersionDate__hWtXB",patchLink:"VersionsList_patchLink__VosIW",patchLinkLabel:"VersionsList_patchLinkLabel__6Hrrb",patchBadge:"VersionsList_patchBadge__sq3MK",versionHeader:"VersionsList_versionHeader__KpvGy"}}}]); \ No newline at end of file diff --git a/_next/static/chunks/3309-8453f90f43cd6002.js b/_next/static/chunks/3309-8453f90f43cd6002.js deleted file mode 100644 index 4251f0b552d..00000000000 --- a/_next/static/chunks/3309-8453f90f43cd6002.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3309],{3309:function(e,t,a){"use strict";a.d(t,{p:function(){return c}});var n=a(52322),i=(0,a(73681).Z)("outline","file-invoice","IconFileInvoice",[["path",{d:"M14 3v4a1 1 0 0 0 1 1h4",key:"svg-0"}],["path",{d:"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z",key:"svg-1"}],["path",{d:"M9 7l1 0",key:"svg-2"}],["path",{d:"M9 13l6 0",key:"svg-3"}],["path",{d:"M13 17l2 0",key:"svg-4"}]]),s=a(45909),r=a(93010),o=a(17115),v=a(8582),d=a(13444);let h=[{version:"7.10.0",date:"May 23, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.10.0",link:"https://mantine.dev/changelog/7-10-0",patches:[]},{version:"7.9.0",date:"May 2, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.9.0",link:"https://mantine.dev/changelog/7-9-0",patches:[{version:"7.9.1",date:"May 8, 2024"},{version:"7.9.2",date:"May 17, 2024"}]},{version:"7.8.0",date:"April 12, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.8.0",link:"https://mantine.dev/changelog/7-8-0",patches:[{version:"7.8.1",date:"April 24, 2024"}]},{version:"7.7.0",date:"March 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.7.0",link:"https://mantine.dev/changelog/7-7-0",patches:[{version:"7.7.2",date:"April 11, 2024"},{version:"7.7.1",date:"March 29, 2024"}]},{version:"7.6.0",date:"February 27, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.6.0",link:"https://mantine.dev/changelog/7-6-0",patches:[{version:"7.6.1",date:"February 28, 2024"},{version:"7.6.2",date:"March 12, 2024"}]},{version:"7.5.0",date:"January 26, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.5.0",link:"https://mantine.dev/changelog/7-5-0",patches:[{version:"7.5.1",date:"February 2, 2024"},{version:"7.5.2",date:"February 9, 2024"},{version:"7.5.3",date:"February 16, 2024"}]},{version:"7.4.0",date:"January 3, 2024",github:"https://github.com/mantinedev/mantine/releases/tag/7.4.0",link:"https://mantine.dev/changelog/7-4-0",patches:[{version:"7.4.1",date:"January 9, 2024"},{version:"7.4.2",date:"January 18, 2024"}]},{version:"7.3.0",date:"December 5, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.3.0",link:"https://mantine.dev/changelog/7-3-0",patches:[{version:"7.3.1",date:"December 7, 2023"},{version:"7.3.2",date:"December 14, 2023"}]},{version:"7.2.0",date:"November 6, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.2.0",link:"https://mantine.dev/changelog/7-2-0",patches:[{version:"7.2.2",date:"November 13, 2023"},{version:"7.2.1",date:"November 7, 2023"},{version:"7.2.0",date:"November 6, 2023"}]},{version:"7.1.0",date:"September 28, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.1.0",link:"https://mantine.dev/changelog/7-1-0",patches:[{version:"7.1.6",date:"October 26, 2023"},{version:"7.1.5",date:"October 19, 2023"},{version:"7.1.3",date:"October 12, 2023"},{version:"7.1.2",date:"October 2, 2023"},{version:"7.1.1",date:"October 2, 2023"},{version:"7.1.0",date:"September 28, 2023"}]},{version:"7.0.0",date:"September 18, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/7.0.0",link:"https://mantine.dev/changelog/7-0-0",patches:[{version:"7.0.2",date:"September 26, 2023"},{version:"7.0.1",date:"September 25, 2023"},{version:"7.0.0",date:"September 18, 2023"}]},{version:"6.0.0",date:"March 2, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/6.0.0",link:"https://v6.mantine.dev/changelog/6-0-0",patches:[{version:"6.0.21",date:"September 17, 2023"},{version:"6.0.20",date:"September 5, 2023"},{version:"6.0.19",date:"August 10, 2023"},{version:"6.0.18",date:"August 7, 2023"},{version:"6.0.17",date:"July 18, 2023"},{version:"6.0.16",date:"July 4, 2023"},{version:"6.0.15",date:"June 27, 2023"},{version:"6.0.14",date:"June 20, 2023"},{version:"6.0.13",date:"May 30, 2023"},{version:"6.0.11",date:"May 16, 2023"},{version:"6.0.10",date:"May 2, 2023"},{version:"6.0.9",date:"April 25, 2023"},{version:"6.0.8",date:"April 18, 2023"},{version:"6.0.7",date:"April 11, 2023"},{version:"6.0.6",date:"April 4, 2023"},{version:"6.0.5",date:"March 28, 2023"},{version:"6.0.3",date:"March 21, 2023"},{version:"6.0.2",date:"March 14, 2023"},{version:"6.0.1",date:"March 8, 2023"},{version:"6.0.0",date:"March 2, 2023"}]},{version:"5.10.0",date:"January 3, 2023",github:"https://github.com/mantinedev/mantine/releases/tag/5.10.0",link:"https://v5.mantine.dev/changelog/5-10-0",patches:[{version:"5.10.5",date:"February 26, 2023"},{version:"5.10.4",date:"February 15, 2023"},{version:"5.10.3",date:"February 3, 2023"},{version:"5.10.2",date:"January 25, 2023"},{version:"5.10.1",date:"January 17, 2023"},{version:"5.10.0",date:"January 3, 2023"}]},{version:"5.9.0",date:"December 1, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.9.0",link:"https://v5.mantine.dev/changelog/5-9-0",patches:[{version:"5.9.6",date:"December 31, 2022"},{version:"5.9.5",date:"December 17, 2022"},{version:"5.9.4",date:"December 12, 2022"},{version:"5.9.3",date:"December 10, 2022"},{version:"5.9.2",date:"December 5, 2022"},{version:"5.9.1",date:"December 4, 2022"},{version:"5.9.0",date:"December 1, 2022"}]},{version:"5.8.0",date:"November 16, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.8.0",link:"https://v5.mantine.dev/changelog/5-8-0",patches:[{version:"5.8.4",date:"November 28, 2022"},{version:"5.8.3",date:"November 23, 2022"},{version:"5.8.2",date:"November 19, 2022"},{version:"5.8.0",date:"November 16, 2022"}]},{version:"5.7.0",date:"November 4, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.7.0",link:"https://v5.mantine.dev/changelog/5-7-0",patches:[{version:"5.7.2",date:"November 12, 2022"},{version:"5.7.1",date:"November 6, 2022"},{version:"5.7.0",date:"November 4, 2022"}]},{version:"5.6.0",date:"October 20, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.6.0",link:"https://v5.mantine.dev/changelog/5-6-0",patches:[{version:"5.6.4",date:"November 2, 2022"},{version:"5.6.3",date:"October 27, 2022"},{version:"5.6.2",date:"October 24, 2022"},{version:"5.6.1",date:"October 22, 2022"},{version:"5.6.0",date:"October 20, 2022"}]},{version:"5.5.0",date:"October 2, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.5.0",link:"https://v5.mantine.dev/changelog/5-5-0",patches:[{version:"5.5.6",date:"October 18, 2022"},{version:"5.5.5",date:"October 11, 2022"},{version:"5.5.4",date:"October 5, 2022"},{version:"5.5.2",date:"October 4, 2022"},{version:"5.5.1",date:"October 3, 2022"},{version:"5.5.0",date:"October 2, 2022"}]},{version:"5.4.0",date:"September 19, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.4.0",link:"https://v5.mantine.dev/changelog/5-4-0",patches:[{version:"5.4.2",date:"September 29, 2022"},{version:"5.4.1",date:"September 24, 2022"},{version:"5.4.0",date:"September 19, 2022"}]},{version:"5.3.0",date:"September 9, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.3.0",link:"https://v5.mantine.dev/changelog/5-3-0",patches:[{version:"5.3.3",date:"September 17, 2022"},{version:"5.3.2",date:"September 15, 2022"},{version:"5.3.1",date:"September 14, 2022"},{version:"5.3.0",date:"September 9, 2022"}]},{version:"5.2.0",date:"August 18, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.2.0",link:"https://v5.mantine.dev/changelog/5-2-0",patches:[{version:"5.2.7",date:"September 8, 2022"},{version:"5.2.6",date:"September 6, 2022"},{version:"5.2.5",date:"September 3, 2022"},{version:"5.2.4",date:"August 27, 2022"},{version:"5.2.3",date:"August 22, 2022"},{version:"5.2.2",date:"August 22, 2022"},{version:"5.2.0",date:"August 18, 2022"}]},{version:"5.1.0",date:"August 8, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.1.0",link:"https://v5.mantine.dev/changelog/5-1-0",patches:[{version:"5.1.7",date:"August 18, 2022"},{version:"5.1.6",date:"August 14, 2022"},{version:"5.1.5",date:"August 13, 2022"},{version:"5.1.4",date:"August 12, 2022"},{version:"5.1.3",date:"August 11, 2022"},{version:"5.1.1",date:"August 9, 2022"},{version:"5.1.0",date:"August 8, 2022"}]},{version:"5.0.0",date:"July 25, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/5.0.0",link:"https://v5.mantine.dev/changelog/5-0-0",patches:[{version:"5.0.3",date:"August 5, 2022"},{version:"5.0.2",date:"July 30, 2022"},{version:"5.0.0",date:"July 25, 2022"}]},{version:"4.2.0",date:"April 27, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.2.0",link:"https://v4.mantine.dev/changelog/4-2-0",patches:[{version:"4.2.12",date:"July 3, 2022"},{version:"4.2.11",date:"June 26, 2022"},{version:"4.2.10",date:"June 19, 2022"},{version:"4.2.9",date:"June 12, 2022"},{version:"4.2.8",date:"June 5, 2022"},{version:"4.2.7",date:"May 29, 2022"},{version:"4.2.6",date:"May 22, 2022"},{version:"4.2.5",date:"May 15, 2022"},{version:"4.2.3",date:"May 8, 2022"},{version:"4.2.2",date:"May 1, 2022"},{version:"4.2.0",date:"April 27, 2022"}]},{version:"4.1.0",date:"March 28, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.1.0",link:"https://v4.mantine.dev/changelog/4-1-0",patches:[{version:"4.1.5",date:"April 24, 2022"},{version:"4.1.4",date:"April 17, 2022"},{version:"4.1.3",date:"April 9, 2022"},{version:"4.1.2",date:"April 3, 2022"},{version:"4.1.1",date:"April 1, 2022"},{version:"4.1.0",date:"March 28, 2022"}]},{version:"4.0.0",date:"March 10, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/4.0.0",link:"https://v4.mantine.dev/changelog/4-0-0",patches:[{version:"4.0.9",date:"March 27, 2022"},{version:"4.0.8",date:"March 24, 2022"},{version:"4.0.7",date:"March 20, 2022"},{version:"4.0.6",date:"March 18, 2022"},{version:"4.0.5",date:"March 16, 2022"},{version:"4.0.4",date:"March 13, 2022"},{version:"4.0.3",date:"March 13, 2022"},{version:"4.0.2",date:"March 12, 2022"},{version:"4.0.1",date:"March 11, 2022"},{version:"4.0.0",date:"March 10, 2022"}]},{version:"3.6.0",date:"January 14, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/3.6.0",link:"https://v3.mantine.dev/changelog/3-6-0",patches:[{version:"3.6.14",date:"March 3, 2022"},{version:"3.6.13",date:"March 2, 2022"},{version:"3.6.12",date:"March 1, 2022"},{version:"3.6.11",date:"February 25, 2022"},{version:"3.6.10",date:"February 24, 2022"},{version:"3.6.9",date:"February 17, 2022"},{version:"3.6.8",date:"February 16, 2022"},{version:"3.6.7",date:"February 9, 2022"},{version:"3.6.6",date:"February 5, 2022"},{version:"3.6.5",date:"February 2, 2022"},{version:"3.6.4",date:"January 30, 2022"},{version:"3.6.3",date:"January 25, 2022"},{version:"3.6.2",date:"January 20, 2022"},{version:"3.6.1",date:"January 17, 2022"},{version:"3.6.0",date:"January 14, 2022"}]},{version:"3.5.0",date:"January 3, 2022",github:"https://github.com/mantinedev/mantine/releases/tag/3.5.0",link:"https://v3.mantine.dev/changelog/3-5-0",patches:[{version:"3.5.5",date:"January 12, 2022"},{version:"3.5.4",date:"January 9, 2022"},{version:"3.5.3",date:"January 8, 2022"},{version:"3.5.2",date:"January 7, 2022"},{version:"3.5.1",date:"January 6, 2022"},{version:"3.5.0",date:"January 3, 2022"}]},{version:"3.4.0",date:"December 14, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.4.0",link:"https://v3.mantine.dev/changelog/3-4-0",patches:[{version:"3.4.3",date:"December 20, 2021"},{version:"3.4.2",date:"December 18, 2021"},{version:"3.4.1",date:"December 16, 2021"},{version:"3.4.0",date:"December 14, 2021"}]},{version:"3.3.0",date:"December 2, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.3.0",link:"https://v3.mantine.dev/changelog/3-3-0",patches:[{version:"3.3.5",date:"December 7, 2021"},{version:"3.3.4",date:"December 6, 2021"},{version:"3.3.3",date:"December 6, 2021"},{version:"3.3.2",date:"December 4, 2021"},{version:"3.3.1",date:"December 3, 2021"},{version:"3.3.0",date:"December 2, 2021"}]},{version:"3.2.0",date:"November 13, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.2.0",link:"https://v3.mantine.dev/changelog/3-2-0",patches:[{version:"3.2.3",date:"November 26, 2021"},{version:"3.2.2",date:"November 22, 2021"},{version:"3.2.1",date:"November 19, 2021"},{version:"3.2.0",date:"November 13, 2021"}]},{version:"3.1.0",date:"October 28, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.1.0",link:"https://v3.mantine.dev/changelog/3-1-0",patches:[{version:"3.1.9",date:"November 13, 2021"},{version:"3.1.8",date:"November 10, 2021"},{version:"3.1.7",date:"November 8, 2021"},{version:"3.1.6",date:"November 5, 2021"},{version:"3.1.5",date:"November 5, 2021"},{version:"3.1.4",date:"November 3, 2021"},{version:"3.1.3",date:"November 2, 2021"},{version:"3.1.2",date:"November 1, 2021"},{version:"3.1.1",date:"November 1, 2021"},{version:"3.1.0",date:"October 28, 2021"}]},{version:"3.0.0",date:"October 10, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/3.0.0",link:"https://v3.mantine.dev/changelog/3-0-0",patches:[{version:"3.0.5",date:"October 16, 2021"},{version:"3.0.4",date:"October 14, 2021"},{version:"3.0.3",date:"October 13, 2021"},{version:"3.0.2",date:"October 12, 2021"},{version:"3.0.1",date:"October 11, 2021"},{version:"3.0.0",date:"October 10, 2021"}]},{version:"2.5.0",date:"September 16, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.5.0",link:"https://v2.mantine.dev/changelog/2-5-0",patches:[{version:"2.5.1",date:"September 17, 2021"},{version:"2.5.0",date:"September 16, 2021"}]},{version:"2.4.0",date:"August 24, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.4.0",link:"https://v2.mantine.dev/changelog/2-4-0",patches:[{version:"2.4.3",date:"September 5, 2021"},{version:"2.4.2",date:"September 5, 2021"},{version:"2.4.1",date:"September 1, 2021"},{version:"2.4.0",date:"August 24, 2021"}]},{version:"2.3.0",date:"August 15, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.3.0",link:"https://v2.mantine.dev/changelog/2-3-0",patches:[{version:"2.3.2",date:"August 24, 2021"},{version:"2.3.1",date:"August 19, 2021"},{version:"2.3.0",date:"August 15, 2021"}]},{version:"2.2.0",date:"August 2, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.2.0",link:"https://v2.mantine.dev/changelog/2-2-0",patches:[{version:"2.2.3",date:"August 15, 2021"},{version:"2.2.2",date:"August 12, 2021"},{version:"2.2.1",date:"August 4, 2021"},{version:"2.2.0",date:"August 2, 2021"}]},{version:"2.1.0",date:"July 20, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.1.0",link:"https://v2.mantine.dev/changelog/2-1-0",patches:[{version:"2.1.5",date:"July 30, 2021"},{version:"2.1.4",date:"July 27, 2021"},{version:"2.1.3",date:"July 26, 2021"},{version:"2.1.2",date:"July 24, 2021"},{version:"2.1.1",date:"July 21, 2021"},{version:"2.1.0",date:"July 20, 2021"}]},{version:"2.0.0",date:"July 5, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/2.0.0",link:"https://v2.mantine.dev/changelog/2-0-0",patches:[{version:"2.0.7",date:"July 18, 2021"},{version:"2.0.6",date:"July 16, 2021"},{version:"2.0.5",date:"July 14, 2021"},{version:"2.0.4",date:"July 13, 2021"},{version:"2.0.3",date:"July 11, 2021"},{version:"2.0.2",date:"July 6, 2021"},{version:"2.0.0",date:"July 5, 2021"}]},{version:"1.3.0",date:"June 1, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.3.0",link:"https://v2.mantine.dev/changelog/1-3-0",patches:[{version:"1.3.1",date:"June 2, 2021"},{version:"1.3.0",date:"June 1, 2021"}]},{version:"1.1.0",date:"May 19, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.1.0",link:"https://v2.mantine.dev/changelog/1-1-0",patches:[{version:"1.1.1",date:"May 20, 2021"},{version:"1.1.0",date:"May 19, 2021"}]},{version:"1.0.0",date:"May 3, 2021",github:"https://github.com/mantinedev/mantine/releases/tag/1.0.0",link:"https://v2.mantine.dev/changelog/1-0-0",patches:[{version:"1.0.6",date:"May 9, 2021"},{version:"1.0.5",date:"May 8, 2021"},{version:"1.0.4",date:"May 8, 2021"},{version:"1.0.3",date:"May 5, 2021"},{version:"1.0.2",date:"May 5, 2021"},{version:"1.0.0",date:"May 3, 2021"}]}];var m=a(1353),g=a.n(m);function c(){let e=h.map(e=>{var t;let a=e.patches.filter(e=>!e.version.endsWith("0")).map(e=>(0,n.jsx)("li",{children:(0,n.jsxs)("a",{href:"https://github.com/mantinedev/mantine/releases/tag/".concat(e.version),target:"_blank",className:g().patchLink,rel:"noreferrer",children:[(0,n.jsx)(s.E,{className:g().patchBadge,children:e.version})," –"," ",(0,n.jsx)("span",{className:g().patchLinkLabel,children:e.date})]})},e.version));return(0,n.jsxs)("div",{className:g().minorVersion,children:[(0,n.jsxs)(r.Z,{className:g().versionHeader,children:[(0,n.jsx)("a",{href:"1.0.0"!==e.version?e.link:e.github,className:g().minorVersionBadgeWrapper,target:"_blank",rel:"noreferrer",children:(0,n.jsx)(s.E,{className:g().minorVersionBadge,children:e.version})}),(0,n.jsxs)(r.Z,{gap:"xs",children:["1.0.0"!==e.version&&(0,n.jsx)(o.z,{variant:"default",component:"a",href:e.link,radius:"md",size:"xs",target:"_blank",leftSection:(0,n.jsx)(i,{size:14}),children:"Changelog"}),(0,n.jsx)(o.z,{component:"a",variant:"default",href:e.github,target:"_blank",radius:"md",size:"xs",className:g().githubControl,leftSection:(0,n.jsx)(d.E,{size:12}),children:"GitHub release"})]}),(0,n.jsx)(v.x,{className:g().minorVersionDate,children:e.date})]}),a.length>0?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(v.x,{mt:"1.5rem",fz:15,children:[(0,n.jsx)("b",{children:(t=e.version,"".concat(t.split(".").slice(0,2).join("."),".X"))})," patches:"]}),(0,n.jsx)("ul",{children:a})]}):(0,n.jsxs)(v.x,{mt:"1rem",fz:15,children:["Version ",e.version," does not have associated patch releases yet."]})]},e.version)});return(0,n.jsx)("div",{className:g().root,children:e})}},1353:function(e){e.exports={root:"VersionsList_root__NkvIm",minorVersion:"VersionsList_minorVersion___wjoQ",minorVersionBadgeWrapper:"VersionsList_minorVersionBadgeWrapper__vEYlh",minorVersionBadge:"VersionsList_minorVersionBadge__Y3CXf",minorVersionDate:"VersionsList_minorVersionDate__hWtXB",patchLink:"VersionsList_patchLink__VosIW",patchLinkLabel:"VersionsList_patchLinkLabel__6Hrrb",patchBadge:"VersionsList_patchBadge__sq3MK",versionHeader:"VersionsList_versionHeader__KpvGy"}}}]); \ No newline at end of file diff --git a/_next/static/chunks/36503-0859d759374e80bb.js b/_next/static/chunks/36503-59cadd6a6299eee5.js similarity index 82% rename from _next/static/chunks/36503-0859d759374e80bb.js rename to _next/static/chunks/36503-59cadd6a6299eee5.js index 4befe1faa41..87dab0a1f37 100644 --- a/_next/static/chunks/36503-0859d759374e80bb.js +++ b/_next/static/chunks/36503-59cadd6a6299eee5.js @@ -27,4 +27,4 @@ function Demo() { ); -}`,component:function(){let[e,{toggle:t}]=(0,l.q)(!1);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.x,{pos:"relative",children:[(0,o.jsx)(i.f,{visible:e,loaderProps:{children:"Loading..."}}),(0,o.jsx)(c._,{noSubmit:!0})]}),(0,o.jsx)(s.Z,{justify:"center",mt:"xl",children:(0,o.jsx)(a.z,{onClick:t,children:"Toggle overlay"})})]})}}},3789:function(e,t,r){r.d(t,{_:function(){return h}});var o=r(52322),n=r(2784),i=r(89868),s=r(51934),a=r(1198),l=r(20992),c=r(93010),u=r(74770),d=r(60284),p=r(95047),f=r(8582),g=r(71873),m=r(17115),v=r(405);function h({noShadow:e,noPadding:t,noSubmit:r,style:h}){let[y,b]=(0,n.useState)("register"),[j,x]=(0,n.useState)(!1),[w,C]=(0,n.useState)(null),O=(0,v.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return(0,o.jsx)(a.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...h,position:"relative",backgroundColor:"var(--mantine-color-body)"},children:(0,o.jsxs)("form",{onSubmit:O.onSubmit(()=>{x(!0),C(null),setTimeout(()=>{x(!1),C("register"===y?"User with this email already exists":"User with this email does not exist")},3e3)}),children:[(0,o.jsx)(l.f,{visible:j}),"register"===y&&(0,o.jsxs)(c.Z,{grow:!0,children:[(0,o.jsx)(u.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...O.getInputProps("firstName")}),(0,o.jsx)(u.o,{required:!0,placeholder:"Your last name",label:"Last name",...O.getInputProps("lastName")})]}),(0,o.jsx)(u.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:(0,o.jsx)(i.Z,{size:16,stroke:1.5}),...O.getInputProps("email")}),(0,o.jsx)(d.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...O.getInputProps("password")}),"register"===y&&(0,o.jsx)(d.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...O.getInputProps("confirmPassword")}),"register"===y&&(0,o.jsx)(p.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...O.getInputProps("termsOfService",{type:"checkbox"})}),w&&(0,o.jsx)(f.x,{c:"red",size:"sm",mt:"sm",children:w}),!r&&(0,o.jsxs)(c.Z,{justify:"space-between",mt:"xl",children:[(0,o.jsx)(g.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{b(e=>"register"===e?"login":"register"),C(null)},size:"sm",children:"register"===y?"Have an account? Login":"Don't have an account? Register"}),(0,o.jsx)(m.z,{color:"blue",type:"submit",children:"register"===y?"Register":"Login"})]})]})})}},20992:function(e,t,r){r.d(t,{f:function(){return h}});var o=r(52322);r(2784);var n=r(97263),i=r(11200),s=r(68755),a=r(38483),l=r(46690),c=r(28559),u=r(82027),d=r(12491),p=r(87170),f=r(96321),g={root:"m_6e45937b",loader:"m_e8eb006c",overlay:"m_df587f17"};let m={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,n.w)("overlay")},v=(0,i.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),h=(0,u.d)((e,t)=>{let r=(0,a.w)("LoadingOverlay",m,e),{classNames:n,className:i,style:u,styles:h,unstyled:y,vars:b,transitionProps:j,loaderProps:x,overlayProps:w,visible:C,zIndex:O,...P}=r,k=(0,s.rZ)(),S=(0,l.y)({name:"LoadingOverlay",classes:g,props:r,className:i,style:u,classNames:n,styles:h,unstyled:y,vars:b,varsResolver:v}),_={...m.overlayProps,...w};return(0,o.jsx)(f.u,{transition:"fade",...j,mounted:!!C,children:e=>(0,o.jsxs)(c.x,{...S("root",{style:e}),ref:t,...P,children:[(0,o.jsx)(d.a,{...S("loader"),unstyled:y,...x}),(0,o.jsx)(p.a,{..._,...S("overlay"),darkHidden:!0,unstyled:y,color:w?.color||k.white}),(0,o.jsx)(p.a,{..._,...S("overlay"),lightHidden:!0,unstyled:y,color:w?.color||k.colors.dark[5]})]})})});h.classes=g,h.displayName="@mantine/core/LoadingOverlay"},60284:function(e,t,r){r.d(t,{W:function(){return j}});var o=r(52322),n=r(40489),i=r(66178),s=r(9341);r(2784);var a=r(91482),l=r(11200),c=r(51477),u=r(46690),d=r(38483),p=r(97072),f=r(82027),g=r(54813),m=r(6941),v=r(73063),h={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let y={visibilityToggleIcon:({reveal:e})=>(0,o.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,o.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},b=(0,l.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,a.ap)(t,"psi-icon-size"),"--psi-button-size":(0,a.ap)(t,"psi-button-size")}})),j=(0,f.d)((e,t)=>{let r=(0,d.w)("PasswordInput",y,e),{classNames:a,className:l,style:f,styles:v,unstyled:j,vars:x,required:w,error:C,leftSection:O,disabled:P,id:k,variant:S,inputContainer:_,description:I,label:Z,size:L,errorProps:M,descriptionProps:z,labelProps:D,withAsterisk:N,inputWrapperOrder:A,wrapperProps:E,radius:B,rightSection:q,rightSectionWidth:R,rightSectionPointerEvents:T,leftSectionWidth:W,visible:V,defaultVisible:Y,onVisibilityChange:F,visibilityToggleIcon:G,visibilityToggleButtonProps:H,rightSectionProps:K,leftSectionProps:U,leftSectionPointerEvents:X,mod:J,...Q}=r,$=(0,i.M)(k),[ee,et]=(0,s.C)({value:V,defaultValue:Y,finalValue:!1,onChange:F}),er=()=>et(!ee),eo=(0,u.y)({name:"PasswordInput",classes:h,props:r,className:l,style:f,classNames:a,styles:v,unstyled:j,vars:x,varsResolver:b}),{resolvedClassNames:en,resolvedStyles:ei}=(0,c.h)({classNames:a,styles:v,props:r}),{styleProps:es,rest:ea}=(0,p.c)(Q),el=(0,o.jsx)(g.A,{...eo("visibilityToggle"),disabled:P,radius:B,"aria-hidden":!H,tabIndex:-1,...H,variant:"subtle",color:"gray",unstyled:j,onMouseDown:e=>{e.preventDefault(),H?.onMouseDown?.(e),er()},onKeyDown:e=>{H?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),er())},children:(0,o.jsx)(G,{reveal:ee})});return(0,o.jsx)(m.I.Wrapper,{required:w,id:$,label:Z,error:C,description:I,size:L,classNames:en,styles:ei,__staticSelector:"PasswordInput",errorProps:M,descriptionProps:z,unstyled:j,withAsterisk:N,inputWrapperOrder:A,inputContainer:_,variant:S,labelProps:{...D,htmlFor:$},mod:J,...eo("root"),...es,...E,children:(0,o.jsx)(m.I,{component:"div",error:C,leftSection:O,size:L,classNames:{...en,input:(0,n.Z)(h.input,en.input)},styles:ei,radius:B,disabled:P,__staticSelector:"PasswordInput",rightSectionWidth:R,rightSection:q??el,variant:S,unstyled:j,leftSectionWidth:W,rightSectionPointerEvents:T||"all",rightSectionProps:K,leftSectionProps:U,leftSectionPointerEvents:X,withAria:!1,children:(0,o.jsx)("input",{required:w,"data-invalid":!!C||void 0,"data-with-left-section":!!O||void 0,...eo("innerInput"),disabled:P,id:$,ref:t,...ea,autoComplete:ea.autoComplete||"off",type:ee?"text":"password"})})})});j.classes={...v.M.classes,...h},j.displayName="@mantine/core/PasswordInput"},3900:function(e,t,r){r.d(t,{q:function(){return n}});var o=r(2784);function n(e=!1,t){let{onOpen:r,onClose:n}=t||{},[i,s]=(0,o.useState)(e),a=(0,o.useCallback)(()=>{s(e=>e||(r?.(),!0))},[r]),l=(0,o.useCallback)(()=>{s(e=>e?(n?.(),!1):e)},[n]),c=(0,o.useCallback)(()=>{i?l():a()},[l,a,i]);return[i,{open:a,close:l,toggle:c}]}}}]); \ No newline at end of file +}`,component:function(){let[e,{toggle:t}]=(0,l.q)(!1);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.x,{pos:"relative",children:[(0,o.jsx)(i.f,{visible:e,loaderProps:{children:"Loading..."}}),(0,o.jsx)(c._,{noSubmit:!0})]}),(0,o.jsx)(s.Z,{justify:"center",mt:"xl",children:(0,o.jsx)(a.z,{onClick:t,children:"Toggle overlay"})})]})}}},3789:function(e,t,r){r.d(t,{_:function(){return h}});var o=r(52322),n=r(2784),i=r(89868),s=r(51934),a=r(1198),l=r(20992),c=r(93010),u=r(74770),d=r(60284),p=r(95047),f=r(8582),g=r(71873),m=r(17115),v=r(405);function h({noShadow:e,noPadding:t,noSubmit:r,style:h}){let[y,b]=(0,n.useState)("register"),[j,x]=(0,n.useState)(!1),[w,C]=(0,n.useState)(null),O=(0,v.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return(0,o.jsx)(a.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...h,position:"relative",backgroundColor:"var(--mantine-color-body)"},children:(0,o.jsxs)("form",{onSubmit:O.onSubmit(()=>{x(!0),C(null),setTimeout(()=>{x(!1),C("register"===y?"User with this email already exists":"User with this email does not exist")},3e3)}),children:[(0,o.jsx)(l.f,{visible:j}),"register"===y&&(0,o.jsxs)(c.Z,{grow:!0,children:[(0,o.jsx)(u.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...O.getInputProps("firstName")}),(0,o.jsx)(u.o,{required:!0,placeholder:"Your last name",label:"Last name",...O.getInputProps("lastName")})]}),(0,o.jsx)(u.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:(0,o.jsx)(i.Z,{size:16,stroke:1.5}),...O.getInputProps("email")}),(0,o.jsx)(d.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...O.getInputProps("password")}),"register"===y&&(0,o.jsx)(d.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...O.getInputProps("confirmPassword")}),"register"===y&&(0,o.jsx)(p.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...O.getInputProps("termsOfService",{type:"checkbox"})}),w&&(0,o.jsx)(f.x,{c:"red",size:"sm",mt:"sm",children:w}),!r&&(0,o.jsxs)(c.Z,{justify:"space-between",mt:"xl",children:[(0,o.jsx)(g.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{b(e=>"register"===e?"login":"register"),C(null)},size:"sm",children:"register"===y?"Have an account? Login":"Don't have an account? Register"}),(0,o.jsx)(m.z,{color:"blue",type:"submit",children:"register"===y?"Register":"Login"})]})]})})}},20992:function(e,t,r){r.d(t,{f:function(){return h}});var o=r(52322);r(2784);var n=r(97263),i=r(11200),s=r(68755),a=r(38483),l=r(46690),c=r(28559),u=r(82027),d=r(12491),p=r(87170),f=r(96321),g={root:"m_6e45937b",loader:"m_e8eb006c",overlay:"m_df587f17"};let m={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,n.w)("overlay")},v=(0,i.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),h=(0,u.d)((e,t)=>{let r=(0,a.w)("LoadingOverlay",m,e),{classNames:n,className:i,style:u,styles:h,unstyled:y,vars:b,transitionProps:j,loaderProps:x,overlayProps:w,visible:C,zIndex:O,...P}=r,k=(0,s.rZ)(),S=(0,l.y)({name:"LoadingOverlay",classes:g,props:r,className:i,style:u,classNames:n,styles:h,unstyled:y,vars:b,varsResolver:v}),_={...m.overlayProps,...w};return(0,o.jsx)(f.u,{transition:"fade",...j,mounted:!!C,children:e=>(0,o.jsxs)(c.x,{...S("root",{style:e}),ref:t,...P,children:[(0,o.jsx)(d.a,{...S("loader"),unstyled:y,...x}),(0,o.jsx)(p.a,{..._,...S("overlay"),darkHidden:!0,unstyled:y,color:w?.color||k.white}),(0,o.jsx)(p.a,{..._,...S("overlay"),lightHidden:!0,unstyled:y,color:w?.color||k.colors.dark[5]})]})})});h.classes=g,h.displayName="@mantine/core/LoadingOverlay"},60284:function(e,t,r){r.d(t,{W:function(){return j}});var o=r(52322),n=r(40489),i=r(66178),s=r(9341);r(2784);var a=r(91482),l=r(11200),c=r(51477),u=r(46690),d=r(38483),p=r(97072),f=r(82027),g=r(54813),m=r(6941),v=r(73063),h={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let y={visibilityToggleIcon:({reveal:e})=>(0,o.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,o.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},b=(0,l.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,a.ap)(t,"psi-icon-size"),"--psi-button-size":(0,a.ap)(t,"psi-button-size")}})),j=(0,f.d)((e,t)=>{let r=(0,d.w)("PasswordInput",y,e),{classNames:a,className:l,style:f,styles:v,unstyled:j,vars:x,required:w,error:C,leftSection:O,disabled:P,id:k,variant:S,inputContainer:_,description:I,label:Z,size:L,errorProps:M,descriptionProps:z,labelProps:D,withAsterisk:N,inputWrapperOrder:A,wrapperProps:E,radius:B,rightSection:q,rightSectionWidth:R,rightSectionPointerEvents:T,leftSectionWidth:W,visible:V,defaultVisible:Y,onVisibilityChange:F,visibilityToggleIcon:G,visibilityToggleButtonProps:H,rightSectionProps:K,leftSectionProps:U,leftSectionPointerEvents:X,withErrorStyles:J,mod:Q,...$}=r,ee=(0,i.M)(k),[et,er]=(0,s.C)({value:V,defaultValue:Y,finalValue:!1,onChange:F}),eo=()=>er(!et),en=(0,u.y)({name:"PasswordInput",classes:h,props:r,className:l,style:f,classNames:a,styles:v,unstyled:j,vars:x,varsResolver:b}),{resolvedClassNames:ei,resolvedStyles:es}=(0,c.h)({classNames:a,styles:v,props:r}),{styleProps:ea,rest:el}=(0,p.c)($),ec=(0,o.jsx)(g.A,{...en("visibilityToggle"),disabled:P,radius:B,"aria-hidden":!H,tabIndex:-1,...H,variant:"subtle",color:"gray",unstyled:j,onMouseDown:e=>{e.preventDefault(),H?.onMouseDown?.(e),eo()},onKeyDown:e=>{H?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),eo())},children:(0,o.jsx)(G,{reveal:et})});return(0,o.jsx)(m.I.Wrapper,{required:w,id:ee,label:Z,error:C,description:I,size:L,classNames:ei,styles:es,__staticSelector:"PasswordInput",errorProps:M,descriptionProps:z,unstyled:j,withAsterisk:N,inputWrapperOrder:A,inputContainer:_,variant:S,labelProps:{...D,htmlFor:ee},mod:Q,...en("root"),...ea,...E,children:(0,o.jsx)(m.I,{component:"div",error:C,leftSection:O,size:L,classNames:{...ei,input:(0,n.Z)(h.input,ei.input)},styles:es,radius:B,disabled:P,__staticSelector:"PasswordInput",rightSectionWidth:R,rightSection:q??ec,variant:S,unstyled:j,leftSectionWidth:W,rightSectionPointerEvents:T||"all",rightSectionProps:K,leftSectionProps:U,leftSectionPointerEvents:X,withAria:!1,withErrorStyles:J,children:(0,o.jsx)("input",{required:w,"data-invalid":!!C||void 0,"data-with-left-section":!!O||void 0,...en("innerInput"),disabled:P,id:ee,ref:t,...el,autoComplete:el.autoComplete||"off",type:et?"text":"password"})})})});j.classes={...v.M.classes,...h},j.displayName="@mantine/core/PasswordInput"},3900:function(e,t,r){r.d(t,{q:function(){return n}});var o=r(2784);function n(e=!1,t){let{onOpen:r,onClose:n}=t||{},[i,s]=(0,o.useState)(e),a=(0,o.useCallback)(()=>{s(e=>e||(r?.(),!0))},[r]),l=(0,o.useCallback)(()=>{s(e=>e?(n?.(),!1):e)},[n]),c=(0,o.useCallback)(()=>{i?l():a()},[l,a,i]);return[i,{open:a,close:l,toggle:c}]}}}]); \ No newline at end of file diff --git a/_next/static/chunks/57902-963a959c12bd6c63.js b/_next/static/chunks/57902-22bb39a1f61193c4.js similarity index 87% rename from _next/static/chunks/57902-963a959c12bd6c63.js rename to _next/static/chunks/57902-22bb39a1f61193c4.js index 99b46f70c45..2bf5bef9c86 100644 --- a/_next/static/chunks/57902-963a959c12bd6c63.js +++ b/_next/static/chunks/57902-22bb39a1f61193c4.js @@ -25,4 +25,4 @@ function Demo() { ); } -`,centered:!0,component:function(){let[e,{open:t,close:r}]=(0,a.q)(!1);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.d,{offset:8,radius:"md",opened:e,onClose:r,title:"Authentication",children:(0,o.jsx)(i._,{noShadow:!0,noPadding:!0})}),(0,o.jsx)(s.z,{onClick:t,children:"Open Drawer"})]})}}},3789:function(e,t,r){r.d(t,{_:function(){return y}});var o=r(52322),n=r(2784),s=r(89868),a=r(51934),i=r(1198),l=r(20992),c=r(93010),u=r(74770),d=r(60284),p=r(95047),f=r(8582),m=r(71873),w=r(17115),h=r(405);function y({noShadow:e,noPadding:t,noSubmit:r,style:y}){let[g,v]=(0,n.useState)("register"),[j,b]=(0,n.useState)(!1),[x,C]=(0,n.useState)(null),O=(0,h.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return(0,o.jsx)(i.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...y,position:"relative",backgroundColor:"var(--mantine-color-body)"},children:(0,o.jsxs)("form",{onSubmit:O.onSubmit(()=>{b(!0),C(null),setTimeout(()=>{b(!1),C("register"===g?"User with this email already exists":"User with this email does not exist")},3e3)}),children:[(0,o.jsx)(l.f,{visible:j}),"register"===g&&(0,o.jsxs)(c.Z,{grow:!0,children:[(0,o.jsx)(u.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...O.getInputProps("firstName")}),(0,o.jsx)(u.o,{required:!0,placeholder:"Your last name",label:"Last name",...O.getInputProps("lastName")})]}),(0,o.jsx)(u.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...O.getInputProps("email")}),(0,o.jsx)(d.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:(0,o.jsx)(a.Z,{size:16,stroke:1.5}),...O.getInputProps("password")}),"register"===g&&(0,o.jsx)(d.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:(0,o.jsx)(a.Z,{size:16,stroke:1.5}),...O.getInputProps("confirmPassword")}),"register"===g&&(0,o.jsx)(p.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...O.getInputProps("termsOfService",{type:"checkbox"})}),x&&(0,o.jsx)(f.x,{c:"red",size:"sm",mt:"sm",children:x}),!r&&(0,o.jsxs)(c.Z,{justify:"space-between",mt:"xl",children:[(0,o.jsx)(m.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{v(e=>"register"===e?"login":"register"),C(null)},size:"sm",children:"register"===g?"Have an account? Login":"Don't have an account? Register"}),(0,o.jsx)(w.z,{color:"blue",type:"submit",children:"register"===g?"Register":"Login"})]})]})})}},41168:function(e,t,r){r.d(t,{d:function(){return F}});var o=r(52322);r(2784);var n=r(97263),s=r(38483),a=r(82027),i=r(83147);let[l,c]=(0,r(89106).R)("Drawer component was not found in tree");var u={root:"m_f11b401e",header:"m_5a7c2c9",content:"m_b8a05bbd",inner:"m_31cd769a"};let d={},p=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:l,vars:u,...p}=(0,s.w)("DrawerBody",d,e),f=c();return(0,o.jsx)(i.y,{ref:t,...f.getStyles("body",{classNames:r,style:a,styles:l,className:n}),...p})});p.classes=u,p.displayName="@mantine/core/DrawerBody";var f=r(91403);let m={},w=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,...u}=(0,s.w)("DrawerCloseButton",m,e),d=c();return(0,o.jsx)(f._,{ref:t,...d.getStyles("close",{classNames:r,style:a,styles:i,className:n}),...u})});w.classes=u,w.displayName="@mantine/core/DrawerCloseButton";var h=r(91822),y=r(9628);let g={},v=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,children:u,radius:d,...p}=(0,s.w)("DrawerContent",g,e),f=c(),m=f.scrollAreaComponent||y.Z;return(0,o.jsx)(h.G,{...f.getStyles("content",{className:n,style:a,styles:i,classNames:r}),innerProps:f.getStyles("inner",{className:n,style:a,styles:i,classNames:r}),ref:t,...p,radius:d||f.radius||0,children:(0,o.jsx)(m,{style:{height:"100vh"},children:u})})});v.classes=u,v.displayName="@mantine/core/DrawerContent";var j=r(79208);let b={},x=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,...u}=(0,s.w)("DrawerHeader",b,e),d=c();return(0,o.jsx)(j.o,{ref:t,...d.getStyles("header",{classNames:r,style:a,styles:i,className:n}),...u})});x.classes=u,x.displayName="@mantine/core/DrawerHeader";var C=r(23461);let O={},D=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,...u}=(0,s.w)("DrawerOverlay",O,e),d=c();return(0,o.jsx)(C.e,{ref:t,...d.getStyles("overlay",{classNames:r,style:a,styles:i,className:n}),...u})});D.classes=u,D.displayName="@mantine/core/DrawerOverlay";var k=r(58898),S=r(91482),P=r(11200),_=r(46690),I=r(89027),z=r(74610);let Z={top:"slide-down",bottom:"slide-up",left:"slide-right",right:"slide-left"},M={top:"slide-down",bottom:"slide-up",right:"slide-right",left:"slide-left"},N={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,n.w)("modal"),position:"left"},L=(0,P.Z)((e,{position:t,size:r,offset:o})=>({root:{"--drawer-size":(0,S.ap)(r,"drawer-size"),"--drawer-flex":function(e){if("top"===e||"bottom"===e)return"0 0 calc(100% - var(--drawer-offset, 0rem) * 2)"}(t),"--drawer-height":"left"===t||"right"===t?void 0:"var(--drawer-size)","--drawer-align":function(e){switch(e){case"top":return"flex-start";case"bottom":return"flex-end";default:return}}(t),"--drawer-justify":"right"===t?"flex-end":void 0,"--drawer-offset":(0,k.h)(o)}})),A=(0,a.d)((e,t)=>{let r=(0,s.w)("DrawerRoot",N,e),{classNames:n,className:a,style:i,styles:c,unstyled:d,vars:p,scrollAreaComponent:f,position:m,transitionProps:w,radius:h,...y}=r,{dir:g}=(0,I.gm)(),v=(0,_.y)({name:"Drawer",classes:u,props:r,className:a,style:i,classNames:n,styles:c,unstyled:d,vars:p,varsResolver:L}),j=("rtl"===g?M:Z)[m];return(0,o.jsx)(l,{value:{scrollAreaComponent:f,getStyles:v,radius:h},children:(0,o.jsx)(z.e,{ref:t,...v("root"),transitionProps:{transition:j,...w},unstyled:d,...y})})});A.classes=u,A.displayName="@mantine/core/DrawerRoot";var B=r(92682);let E={},R=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,...u}=(0,s.w)("DrawerTitle",E,e),d=c();return(0,o.jsx)(B.q,{ref:t,...d.getStyles("title",{classNames:r,style:a,styles:i,className:n}),...u})});R.classes=u,R.displayName="@mantine/core/DrawerTitle";let q={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,n.w)("modal"),withOverlay:!0,withCloseButton:!0},F=(0,a.d)((e,t)=>{let{title:r,withOverlay:n,overlayProps:a,withCloseButton:i,closeButtonProps:l,children:c,...u}=(0,s.w)("Drawer",q,e),d=!!r||i;return(0,o.jsxs)(A,{ref:t,...u,children:[n&&(0,o.jsx)(D,{...a}),(0,o.jsxs)(v,{children:[d&&(0,o.jsxs)(x,{children:[r&&(0,o.jsx)(R,{children:r}),i&&(0,o.jsx)(w,{...l})]}),(0,o.jsx)(p,{children:c})]})]})});F.classes=u,F.displayName="@mantine/core/Drawer",F.Root=A,F.Overlay=D,F.Content=v,F.Body=p,F.Header=x,F.Title=R,F.CloseButton=w},20992:function(e,t,r){r.d(t,{f:function(){return y}});var o=r(52322);r(2784);var n=r(97263),s=r(11200),a=r(68755),i=r(38483),l=r(46690),c=r(28559),u=r(82027),d=r(12491),p=r(87170),f=r(96321),m={root:"m_6e45937b",loader:"m_e8eb006c",overlay:"m_df587f17"};let w={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,n.w)("overlay")},h=(0,s.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),y=(0,u.d)((e,t)=>{let r=(0,i.w)("LoadingOverlay",w,e),{classNames:n,className:s,style:u,styles:y,unstyled:g,vars:v,transitionProps:j,loaderProps:b,overlayProps:x,visible:C,zIndex:O,...D}=r,k=(0,a.rZ)(),S=(0,l.y)({name:"LoadingOverlay",classes:m,props:r,className:s,style:u,classNames:n,styles:y,unstyled:g,vars:v,varsResolver:h}),P={...w.overlayProps,...x};return(0,o.jsx)(f.u,{transition:"fade",...j,mounted:!!C,children:e=>(0,o.jsxs)(c.x,{...S("root",{style:e}),ref:t,...D,children:[(0,o.jsx)(d.a,{...S("loader"),unstyled:g,...b}),(0,o.jsx)(p.a,{...P,...S("overlay"),darkHidden:!0,unstyled:g,color:x?.color||k.white}),(0,o.jsx)(p.a,{...P,...S("overlay"),lightHidden:!0,unstyled:g,color:x?.color||k.colors.dark[5]})]})})});y.classes=m,y.displayName="@mantine/core/LoadingOverlay"},60284:function(e,t,r){r.d(t,{W:function(){return j}});var o=r(52322),n=r(40489),s=r(66178),a=r(9341);r(2784);var i=r(91482),l=r(11200),c=r(51477),u=r(46690),d=r(38483),p=r(97072),f=r(82027),m=r(54813),w=r(6941),h=r(73063),y={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let g={visibilityToggleIcon:({reveal:e})=>(0,o.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,o.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},v=(0,l.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,i.ap)(t,"psi-icon-size"),"--psi-button-size":(0,i.ap)(t,"psi-button-size")}})),j=(0,f.d)((e,t)=>{let r=(0,d.w)("PasswordInput",g,e),{classNames:i,className:l,style:f,styles:h,unstyled:j,vars:b,required:x,error:C,leftSection:O,disabled:D,id:k,variant:S,inputContainer:P,description:_,label:I,size:z,errorProps:Z,descriptionProps:M,labelProps:N,withAsterisk:L,inputWrapperOrder:A,wrapperProps:B,radius:E,rightSection:R,rightSectionWidth:q,rightSectionPointerEvents:F,leftSectionWidth:T,visible:H,defaultVisible:V,onVisibilityChange:W,visibilityToggleIcon:Y,visibilityToggleButtonProps:K,rightSectionProps:U,leftSectionProps:X,leftSectionPointerEvents:G,mod:J,...Q}=r,$=(0,s.M)(k),[ee,et]=(0,a.C)({value:H,defaultValue:V,finalValue:!1,onChange:W}),er=()=>et(!ee),eo=(0,u.y)({name:"PasswordInput",classes:y,props:r,className:l,style:f,classNames:i,styles:h,unstyled:j,vars:b,varsResolver:v}),{resolvedClassNames:en,resolvedStyles:es}=(0,c.h)({classNames:i,styles:h,props:r}),{styleProps:ea,rest:ei}=(0,p.c)(Q),el=(0,o.jsx)(m.A,{...eo("visibilityToggle"),disabled:D,radius:E,"aria-hidden":!K,tabIndex:-1,...K,variant:"subtle",color:"gray",unstyled:j,onMouseDown:e=>{e.preventDefault(),K?.onMouseDown?.(e),er()},onKeyDown:e=>{K?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),er())},children:(0,o.jsx)(Y,{reveal:ee})});return(0,o.jsx)(w.I.Wrapper,{required:x,id:$,label:I,error:C,description:_,size:z,classNames:en,styles:es,__staticSelector:"PasswordInput",errorProps:Z,descriptionProps:M,unstyled:j,withAsterisk:L,inputWrapperOrder:A,inputContainer:P,variant:S,labelProps:{...N,htmlFor:$},mod:J,...eo("root"),...ea,...B,children:(0,o.jsx)(w.I,{component:"div",error:C,leftSection:O,size:z,classNames:{...en,input:(0,n.Z)(y.input,en.input)},styles:es,radius:E,disabled:D,__staticSelector:"PasswordInput",rightSectionWidth:q,rightSection:R??el,variant:S,unstyled:j,leftSectionWidth:T,rightSectionPointerEvents:F||"all",rightSectionProps:U,leftSectionProps:X,leftSectionPointerEvents:G,withAria:!1,children:(0,o.jsx)("input",{required:x,"data-invalid":!!C||void 0,"data-with-left-section":!!O||void 0,...eo("innerInput"),disabled:D,id:$,ref:t,...ei,autoComplete:ei.autoComplete||"off",type:ee?"text":"password"})})})});j.classes={...h.M.classes,...y},j.displayName="@mantine/core/PasswordInput"},3900:function(e,t,r){r.d(t,{q:function(){return n}});var o=r(2784);function n(e=!1,t){let{onOpen:r,onClose:n}=t||{},[s,a]=(0,o.useState)(e),i=(0,o.useCallback)(()=>{a(e=>e||(r?.(),!0))},[r]),l=(0,o.useCallback)(()=>{a(e=>e?(n?.(),!1):e)},[n]),c=(0,o.useCallback)(()=>{s?l():i()},[l,i,s]);return[s,{open:i,close:l,toggle:c}]}}}]); \ No newline at end of file +`,centered:!0,component:function(){let[e,{open:t,close:r}]=(0,a.q)(!1);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.d,{offset:8,radius:"md",opened:e,onClose:r,title:"Authentication",children:(0,o.jsx)(i._,{noShadow:!0,noPadding:!0})}),(0,o.jsx)(s.z,{onClick:t,children:"Open Drawer"})]})}}},3789:function(e,t,r){r.d(t,{_:function(){return y}});var o=r(52322),n=r(2784),s=r(89868),a=r(51934),i=r(1198),l=r(20992),c=r(93010),u=r(74770),d=r(60284),p=r(95047),f=r(8582),m=r(71873),w=r(17115),h=r(405);function y({noShadow:e,noPadding:t,noSubmit:r,style:y}){let[g,v]=(0,n.useState)("register"),[j,b]=(0,n.useState)(!1),[x,C]=(0,n.useState)(null),O=(0,h.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return(0,o.jsx)(i.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...y,position:"relative",backgroundColor:"var(--mantine-color-body)"},children:(0,o.jsxs)("form",{onSubmit:O.onSubmit(()=>{b(!0),C(null),setTimeout(()=>{b(!1),C("register"===g?"User with this email already exists":"User with this email does not exist")},3e3)}),children:[(0,o.jsx)(l.f,{visible:j}),"register"===g&&(0,o.jsxs)(c.Z,{grow:!0,children:[(0,o.jsx)(u.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...O.getInputProps("firstName")}),(0,o.jsx)(u.o,{required:!0,placeholder:"Your last name",label:"Last name",...O.getInputProps("lastName")})]}),(0,o.jsx)(u.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...O.getInputProps("email")}),(0,o.jsx)(d.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:(0,o.jsx)(a.Z,{size:16,stroke:1.5}),...O.getInputProps("password")}),"register"===g&&(0,o.jsx)(d.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:(0,o.jsx)(a.Z,{size:16,stroke:1.5}),...O.getInputProps("confirmPassword")}),"register"===g&&(0,o.jsx)(p.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...O.getInputProps("termsOfService",{type:"checkbox"})}),x&&(0,o.jsx)(f.x,{c:"red",size:"sm",mt:"sm",children:x}),!r&&(0,o.jsxs)(c.Z,{justify:"space-between",mt:"xl",children:[(0,o.jsx)(m.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{v(e=>"register"===e?"login":"register"),C(null)},size:"sm",children:"register"===g?"Have an account? Login":"Don't have an account? Register"}),(0,o.jsx)(w.z,{color:"blue",type:"submit",children:"register"===g?"Register":"Login"})]})]})})}},41168:function(e,t,r){r.d(t,{d:function(){return F}});var o=r(52322);r(2784);var n=r(97263),s=r(38483),a=r(82027),i=r(83147);let[l,c]=(0,r(89106).R)("Drawer component was not found in tree");var u={root:"m_f11b401e",header:"m_5a7c2c9",content:"m_b8a05bbd",inner:"m_31cd769a"};let d={},p=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:l,vars:u,...p}=(0,s.w)("DrawerBody",d,e),f=c();return(0,o.jsx)(i.y,{ref:t,...f.getStyles("body",{classNames:r,style:a,styles:l,className:n}),...p})});p.classes=u,p.displayName="@mantine/core/DrawerBody";var f=r(91403);let m={},w=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,...u}=(0,s.w)("DrawerCloseButton",m,e),d=c();return(0,o.jsx)(f._,{ref:t,...d.getStyles("close",{classNames:r,style:a,styles:i,className:n}),...u})});w.classes=u,w.displayName="@mantine/core/DrawerCloseButton";var h=r(91822),y=r(9628);let g={},v=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,children:u,radius:d,...p}=(0,s.w)("DrawerContent",g,e),f=c(),m=f.scrollAreaComponent||y.Z;return(0,o.jsx)(h.G,{...f.getStyles("content",{className:n,style:a,styles:i,classNames:r}),innerProps:f.getStyles("inner",{className:n,style:a,styles:i,classNames:r}),ref:t,...p,radius:d||f.radius||0,children:(0,o.jsx)(m,{style:{height:"100vh"},children:u})})});v.classes=u,v.displayName="@mantine/core/DrawerContent";var j=r(79208);let b={},x=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,...u}=(0,s.w)("DrawerHeader",b,e),d=c();return(0,o.jsx)(j.o,{ref:t,...d.getStyles("header",{classNames:r,style:a,styles:i,className:n}),...u})});x.classes=u,x.displayName="@mantine/core/DrawerHeader";var C=r(23461);let O={},D=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,...u}=(0,s.w)("DrawerOverlay",O,e),d=c();return(0,o.jsx)(C.e,{ref:t,...d.getStyles("overlay",{classNames:r,style:a,styles:i,className:n}),...u})});D.classes=u,D.displayName="@mantine/core/DrawerOverlay";var k=r(58898),S=r(91482),P=r(11200),_=r(46690),I=r(89027),z=r(74610);let Z={top:"slide-down",bottom:"slide-up",left:"slide-right",right:"slide-left"},M={top:"slide-down",bottom:"slide-up",right:"slide-right",left:"slide-left"},N={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,n.w)("modal"),position:"left"},L=(0,P.Z)((e,{position:t,size:r,offset:o})=>({root:{"--drawer-size":(0,S.ap)(r,"drawer-size"),"--drawer-flex":function(e){if("top"===e||"bottom"===e)return"0 0 calc(100% - var(--drawer-offset, 0rem) * 2)"}(t),"--drawer-height":"left"===t||"right"===t?void 0:"var(--drawer-size)","--drawer-align":function(e){switch(e){case"top":return"flex-start";case"bottom":return"flex-end";default:return}}(t),"--drawer-justify":"right"===t?"flex-end":void 0,"--drawer-offset":(0,k.h)(o)}})),A=(0,a.d)((e,t)=>{let r=(0,s.w)("DrawerRoot",N,e),{classNames:n,className:a,style:i,styles:c,unstyled:d,vars:p,scrollAreaComponent:f,position:m,transitionProps:w,radius:h,...y}=r,{dir:g}=(0,I.gm)(),v=(0,_.y)({name:"Drawer",classes:u,props:r,className:a,style:i,classNames:n,styles:c,unstyled:d,vars:p,varsResolver:L}),j=("rtl"===g?M:Z)[m];return(0,o.jsx)(l,{value:{scrollAreaComponent:f,getStyles:v,radius:h},children:(0,o.jsx)(z.e,{ref:t,...v("root"),transitionProps:{transition:j,...w},unstyled:d,...y})})});A.classes=u,A.displayName="@mantine/core/DrawerRoot";var B=r(92682);let E={},R=(0,a.d)((e,t)=>{let{classNames:r,className:n,style:a,styles:i,vars:l,...u}=(0,s.w)("DrawerTitle",E,e),d=c();return(0,o.jsx)(B.q,{ref:t,...d.getStyles("title",{classNames:r,style:a,styles:i,className:n}),...u})});R.classes=u,R.displayName="@mantine/core/DrawerTitle";let q={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,n.w)("modal"),withOverlay:!0,withCloseButton:!0},F=(0,a.d)((e,t)=>{let{title:r,withOverlay:n,overlayProps:a,withCloseButton:i,closeButtonProps:l,children:c,...u}=(0,s.w)("Drawer",q,e),d=!!r||i;return(0,o.jsxs)(A,{ref:t,...u,children:[n&&(0,o.jsx)(D,{...a}),(0,o.jsxs)(v,{children:[d&&(0,o.jsxs)(x,{children:[r&&(0,o.jsx)(R,{children:r}),i&&(0,o.jsx)(w,{...l})]}),(0,o.jsx)(p,{children:c})]})]})});F.classes=u,F.displayName="@mantine/core/Drawer",F.Root=A,F.Overlay=D,F.Content=v,F.Body=p,F.Header=x,F.Title=R,F.CloseButton=w},20992:function(e,t,r){r.d(t,{f:function(){return y}});var o=r(52322);r(2784);var n=r(97263),s=r(11200),a=r(68755),i=r(38483),l=r(46690),c=r(28559),u=r(82027),d=r(12491),p=r(87170),f=r(96321),m={root:"m_6e45937b",loader:"m_e8eb006c",overlay:"m_df587f17"};let w={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,n.w)("overlay")},h=(0,s.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),y=(0,u.d)((e,t)=>{let r=(0,i.w)("LoadingOverlay",w,e),{classNames:n,className:s,style:u,styles:y,unstyled:g,vars:v,transitionProps:j,loaderProps:b,overlayProps:x,visible:C,zIndex:O,...D}=r,k=(0,a.rZ)(),S=(0,l.y)({name:"LoadingOverlay",classes:m,props:r,className:s,style:u,classNames:n,styles:y,unstyled:g,vars:v,varsResolver:h}),P={...w.overlayProps,...x};return(0,o.jsx)(f.u,{transition:"fade",...j,mounted:!!C,children:e=>(0,o.jsxs)(c.x,{...S("root",{style:e}),ref:t,...D,children:[(0,o.jsx)(d.a,{...S("loader"),unstyled:g,...b}),(0,o.jsx)(p.a,{...P,...S("overlay"),darkHidden:!0,unstyled:g,color:x?.color||k.white}),(0,o.jsx)(p.a,{...P,...S("overlay"),lightHidden:!0,unstyled:g,color:x?.color||k.colors.dark[5]})]})})});y.classes=m,y.displayName="@mantine/core/LoadingOverlay"},60284:function(e,t,r){r.d(t,{W:function(){return j}});var o=r(52322),n=r(40489),s=r(66178),a=r(9341);r(2784);var i=r(91482),l=r(11200),c=r(51477),u=r(46690),d=r(38483),p=r(97072),f=r(82027),m=r(54813),w=r(6941),h=r(73063),y={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let g={visibilityToggleIcon:({reveal:e})=>(0,o.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,o.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},v=(0,l.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,i.ap)(t,"psi-icon-size"),"--psi-button-size":(0,i.ap)(t,"psi-button-size")}})),j=(0,f.d)((e,t)=>{let r=(0,d.w)("PasswordInput",g,e),{classNames:i,className:l,style:f,styles:h,unstyled:j,vars:b,required:x,error:C,leftSection:O,disabled:D,id:k,variant:S,inputContainer:P,description:_,label:I,size:z,errorProps:Z,descriptionProps:M,labelProps:N,withAsterisk:L,inputWrapperOrder:A,wrapperProps:B,radius:E,rightSection:R,rightSectionWidth:q,rightSectionPointerEvents:F,leftSectionWidth:T,visible:H,defaultVisible:V,onVisibilityChange:W,visibilityToggleIcon:Y,visibilityToggleButtonProps:K,rightSectionProps:U,leftSectionProps:X,leftSectionPointerEvents:G,withErrorStyles:J,mod:Q,...$}=r,ee=(0,s.M)(k),[et,er]=(0,a.C)({value:H,defaultValue:V,finalValue:!1,onChange:W}),eo=()=>er(!et),en=(0,u.y)({name:"PasswordInput",classes:y,props:r,className:l,style:f,classNames:i,styles:h,unstyled:j,vars:b,varsResolver:v}),{resolvedClassNames:es,resolvedStyles:ea}=(0,c.h)({classNames:i,styles:h,props:r}),{styleProps:ei,rest:el}=(0,p.c)($),ec=(0,o.jsx)(m.A,{...en("visibilityToggle"),disabled:D,radius:E,"aria-hidden":!K,tabIndex:-1,...K,variant:"subtle",color:"gray",unstyled:j,onMouseDown:e=>{e.preventDefault(),K?.onMouseDown?.(e),eo()},onKeyDown:e=>{K?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),eo())},children:(0,o.jsx)(Y,{reveal:et})});return(0,o.jsx)(w.I.Wrapper,{required:x,id:ee,label:I,error:C,description:_,size:z,classNames:es,styles:ea,__staticSelector:"PasswordInput",errorProps:Z,descriptionProps:M,unstyled:j,withAsterisk:L,inputWrapperOrder:A,inputContainer:P,variant:S,labelProps:{...N,htmlFor:ee},mod:Q,...en("root"),...ei,...B,children:(0,o.jsx)(w.I,{component:"div",error:C,leftSection:O,size:z,classNames:{...es,input:(0,n.Z)(y.input,es.input)},styles:ea,radius:E,disabled:D,__staticSelector:"PasswordInput",rightSectionWidth:q,rightSection:R??ec,variant:S,unstyled:j,leftSectionWidth:T,rightSectionPointerEvents:F||"all",rightSectionProps:U,leftSectionProps:X,leftSectionPointerEvents:G,withAria:!1,withErrorStyles:J,children:(0,o.jsx)("input",{required:x,"data-invalid":!!C||void 0,"data-with-left-section":!!O||void 0,...en("innerInput"),disabled:D,id:ee,ref:t,...el,autoComplete:el.autoComplete||"off",type:et?"text":"password"})})})});j.classes={...h.M.classes,...y},j.displayName="@mantine/core/PasswordInput"},3900:function(e,t,r){r.d(t,{q:function(){return n}});var o=r(2784);function n(e=!1,t){let{onOpen:r,onClose:n}=t||{},[s,a]=(0,o.useState)(e),i=(0,o.useCallback)(()=>{a(e=>e||(r?.(),!0))},[r]),l=(0,o.useCallback)(()=>{a(e=>e?(n?.(),!1):e)},[n]),c=(0,o.useCallback)(()=>{s?l():i()},[l,i,s]);return[s,{open:i,close:l,toggle:c}]}}}]); \ No newline at end of file diff --git a/_next/static/chunks/61324-6ab94e773572bf39.js b/_next/static/chunks/61324-6ab94e773572bf39.js new file mode 100644 index 00000000000..7213d95a09f --- /dev/null +++ b/_next/static/chunks/61324-6ab94e773572bf39.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[61324],{61324:function(e,o,t){t.d(o,{h:function(){return U}});var r=t(52322),n=t(58898),a=t(2784),l=t(91482),i=t(11200),s=t(38483),d=t(46690),u=t(50205);let[c,b]=(0,t(89106).R)("Combobox component was not found in tree");var p=t(54178),m=t(2670);let x=(0,a.forwardRef)(({size:e,onMouseDown:o,onClick:t,onClear:n,...a},l)=>(0,r.jsx)(m.P,{ref:l,size:e||"sm",variant:"transparent",tabIndex:-1,"aria-hidden":!0,...a,onMouseDown:e=>{e.preventDefault(),o?.(e)},onClick:e=>{n(),t?.(e)}}));x.displayName="@mantine/core/ComboboxClearButton";var f=t(82027),w=t(61271);let v={},y=(0,f.d)((e,o)=>{let{classNames:t,styles:n,className:a,style:l,hidden:i,...d}=(0,s.w)("ComboboxDropdown",v,e),c=b();return(0,r.jsx)(u.J.Dropdown,{...d,ref:o,role:"presentation","data-hidden":i||void 0,...c.getStyles("dropdown",{className:a,style:l,classNames:t,styles:n})})});y.classes=w.Z,y.displayName="@mantine/core/ComboboxDropdown";var h=t(98399);let C={refProp:"ref"},g=(0,f.d)((e,o)=>{let{children:t,refProp:n}=(0,s.w)("ComboboxDropdownTarget",C,e);if(b(),!(0,h.k)(t))throw Error("Combobox.DropdownTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");return(0,r.jsx)(u.J.Target,{ref:o,refProp:n,children:t})});g.displayName="@mantine/core/ComboboxDropdownTarget";var k=t(28559);let D={},A=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:a,styles:l,vars:i,...d}=(0,s.w)("ComboboxEmpty",D,e),u=b();return(0,r.jsx)(k.x,{ref:o,...u.getStyles("empty",{className:n,classNames:t,styles:l,style:a}),...d})});A.classes=w.Z,A.displayName="@mantine/core/ComboboxEmpty";var E=t(70837);function S({onKeyDown:e,withKeyboardNavigation:o,withAriaAttributes:t,withExpandedAttribute:r,targetType:n,autoComplete:l}){let i=b(),[s,d]=(0,a.useState)(null);return{...t?{"aria-haspopup":"listbox","aria-expanded":r&&!!(i.store.listId&&i.store.dropdownOpened)||void 0,"aria-controls":i.store.listId,"aria-activedescendant":i.store.dropdownOpened&&s||void 0,autoComplete:l,"data-expanded":i.store.dropdownOpened||void 0,"data-mantine-stop-propagation":i.store.dropdownOpened||void 0}:{},onKeyDown:t=>{if(e?.(t),!i.readOnly&&o&&!t.nativeEvent.isComposing){if("ArrowDown"===t.nativeEvent.code&&(t.preventDefault(),i.store.dropdownOpened?d(i.store.selectNextOption()):(i.store.openDropdown("keyboard"),d(i.store.selectActiveOption()))),"ArrowUp"===t.nativeEvent.code&&(t.preventDefault(),i.store.dropdownOpened?d(i.store.selectPreviousOption()):(i.store.openDropdown("keyboard"),d(i.store.selectActiveOption()))),"Enter"===t.nativeEvent.code||"NumpadEnter"===t.nativeEvent.code){if(229===t.nativeEvent.keyCode)return;let e=i.store.getSelectedOptionIndex();i.store.dropdownOpened&&-1!==e?(t.preventDefault(),i.store.clickSelectedOption()):"button"===n&&(t.preventDefault(),i.store.openDropdown("keyboard"))}"Escape"===t.nativeEvent.code&&i.store.closeDropdown("keyboard"),"Space"===t.nativeEvent.code&&"button"===n&&(t.preventDefault(),i.store.toggleDropdown("keyboard"))}}}}let O={refProp:"ref",targetType:"input",withKeyboardNavigation:!0,withAriaAttributes:!0,withExpandedAttribute:!1,autoComplete:"off"},N=(0,f.d)((e,o)=>{let{children:t,refProp:r,withKeyboardNavigation:n,withAriaAttributes:l,withExpandedAttribute:i,targetType:d,autoComplete:u,...c}=(0,s.w)("ComboboxEventsTarget",O,e);if(!(0,h.k)(t))throw Error("Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let p=b(),m=S({targetType:d,withAriaAttributes:l,withKeyboardNavigation:n,withExpandedAttribute:i,onKeyDown:t.props.onKeyDown,autoComplete:u});return(0,a.cloneElement)(t,{...m,...c,[r]:(0,E.Yx)(o,p.store.targetRef,t?.ref)})});N.displayName="@mantine/core/ComboboxEventsTarget";let T={},I=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:a,styles:l,vars:i,...d}=(0,s.w)("ComboboxFooter",T,e),u=b();return(0,r.jsx)(k.x,{ref:o,...u.getStyles("footer",{className:n,classNames:t,style:a,styles:l}),...d,onMouseDown:e=>{e.preventDefault()}})});I.classes=w.Z,I.displayName="@mantine/core/ComboboxFooter";let j={},R=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:a,styles:l,vars:i,children:d,label:u,...c}=(0,s.w)("ComboboxGroup",j,e),p=b();return(0,r.jsxs)(k.x,{ref:o,...p.getStyles("group",{className:n,classNames:t,style:a,styles:l}),...c,children:[u&&(0,r.jsx)("div",{...p.getStyles("groupLabel",{classNames:t,styles:l}),children:u}),d]})});R.classes=w.Z,R.displayName="@mantine/core/ComboboxGroup";let Z={},K=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:a,styles:l,vars:i,...d}=(0,s.w)("ComboboxHeader",Z,e),u=b();return(0,r.jsx)(k.x,{ref:o,...u.getStyles("header",{className:n,classNames:t,style:a,styles:l}),...d,onMouseDown:e=>{e.preventDefault()}})});function q({value:e,valuesDivider:o=",",...t}){return(0,r.jsx)("input",{type:"hidden",value:Array.isArray(e)?e.join(o):e||"",...t})}K.classes=w.Z,K.displayName="@mantine/core/ComboboxHeader",q.displayName="@mantine/core/ComboboxHiddenInput";let $={},M=(0,f.d)((e,o)=>{let t=(0,s.w)("ComboboxOption",$,e),{classNames:n,className:l,style:i,styles:d,vars:u,onClick:c,id:p,active:m,onMouseDown:x,onMouseOver:f,disabled:w,selected:v,mod:y,...h}=t,C=b(),g=(0,a.useId)();return(0,r.jsx)(k.x,{...C.getStyles("option",{className:l,classNames:n,styles:d,style:i}),...h,ref:o,id:p||g,mod:["combobox-option",{"combobox-active":m,"combobox-disabled":w,"combobox-selected":v},y],role:"option",onClick:e=>{w?e.preventDefault():(C.onOptionSubmit?.(t.value,t),c?.(e))},onMouseDown:e=>{e.preventDefault(),x?.(e)},onMouseOver:e=>{C.resetSelectionOnOptionHover&&C.store.resetSelectedOption(),f?.(e)}})});M.classes=w.Z,M.displayName="@mantine/core/ComboboxOption";var H=t(66178);let P={},F=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:l,styles:i,id:d,onMouseDown:u,labelledBy:c,...p}=(0,s.w)("ComboboxOptions",P,e),m=b(),x=(0,H.M)(d);return(0,a.useEffect)(()=>{m.store.setListId(x)},[x]),(0,r.jsx)(k.x,{ref:o,...m.getStyles("options",{className:n,style:l,classNames:t,styles:i}),...p,id:x,role:"listbox","aria-labelledby":c,onMouseDown:e=>{e.preventDefault(),u?.(e)}})});F.classes=w.Z,F.displayName="@mantine/core/ComboboxOptions";var _=t(6941);let z={withAriaAttributes:!0,withKeyboardNavigation:!0},V=(0,f.d)((e,o)=>{let{classNames:t,styles:n,unstyled:a,vars:l,withAriaAttributes:i,onKeyDown:d,withKeyboardNavigation:u,size:c,...p}=(0,s.w)("ComboboxSearch",z,e),m=b(),x=m.getStyles("search"),f=S({targetType:"input",withAriaAttributes:i,withKeyboardNavigation:u,withExpandedAttribute:!1,onKeyDown:d,autoComplete:"off"});return(0,r.jsx)(_.I,{ref:(0,E.Yx)(o,m.store.searchRef),classNames:[{input:x.className},t],styles:[{input:x.style},n],size:c||m.size,...f,...p,__staticSelector:"Combobox"})});V.classes=w.Z,V.displayName="@mantine/core/ComboboxSearch";let J={refProp:"ref",targetType:"input",withKeyboardNavigation:!0,withAriaAttributes:!0,withExpandedAttribute:!1,autoComplete:"off"},B=(0,f.d)((e,o)=>{let{children:t,refProp:n,withKeyboardNavigation:l,withAriaAttributes:i,withExpandedAttribute:d,targetType:c,autoComplete:p,...m}=(0,s.w)("ComboboxTarget",J,e);if(!(0,h.k)(t))throw Error("Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let x=b(),f=S({targetType:c,withAriaAttributes:i,withKeyboardNavigation:l,withExpandedAttribute:d,onKeyDown:t.props.onKeyDown,autoComplete:p}),w=(0,a.cloneElement)(t,{...f,...m});return(0,r.jsx)(u.J.Target,{ref:(0,E.Yx)(o,x.store.targetRef),children:w})});B.displayName="@mantine/core/ComboboxTarget";var G=t(56237);let Y={keepMounted:!0,withinPortal:!0,resetSelectionOnOptionHover:!1,width:"target",transitionProps:{transition:"fade",duration:0}},L=(0,i.Z)((e,{size:o,dropdownPadding:t})=>({options:{"--combobox-option-fz":(0,l.yv)(o),"--combobox-option-padding":(0,l.ap)(o,"combobox-option-padding")},dropdown:{"--combobox-padding":void 0===t?void 0:(0,n.h)(t),"--combobox-option-fz":(0,l.yv)(o),"--combobox-option-padding":(0,l.ap)(o,"combobox-option-padding")}}));function U(e){let o=(0,s.w)("Combobox",Y,e),{classNames:t,styles:n,unstyled:a,children:l,store:i,vars:b,onOptionSubmit:p,onClose:m,size:x,dropdownPadding:f,resetSelectionOnOptionHover:v,__staticSelector:y,readOnly:h,...C}=o,g=(0,G.K)(),k=i||g,D=(0,d.y)({name:y||"Combobox",classes:w.Z,props:o,classNames:t,styles:n,unstyled:a,vars:b,varsResolver:L});return(0,r.jsx)(c,{value:{getStyles:D,store:k,onOptionSubmit:p,size:x,resetSelectionOnOptionHover:v,readOnly:h},children:(0,r.jsx)(u.J,{opened:k.dropdownOpened,...C,onClose:()=>{m?.(),k.closeDropdown()},withRoles:!1,unstyled:a,children:l})})}U.extend=e=>e,U.classes=w.Z,U.displayName="@mantine/core/Combobox",U.Target=B,U.Dropdown=y,U.Options=F,U.Option=M,U.Search=V,U.Empty=A,U.Chevron=p.d,U.Footer=I,U.Header=K,U.EventsTarget=N,U.DropdownTarget=g,U.Group=R,U.ClearButton=x,U.HiddenInput=q},56237:function(e,o,t){t.d(o,{K:function(){return a}});var r=t(2784),n=t(9341);function a({defaultOpened:e,opened:o,onOpenedChange:t,onDropdownClose:a,onDropdownOpen:l,loop:i=!0,scrollBehavior:s="instant"}={}){let[d,u]=(0,n.C)({value:o,defaultValue:e,finalValue:!1,onChange:t}),c=(0,r.useRef)(null),b=(0,r.useRef)(-1),p=(0,r.useRef)(null),m=(0,r.useRef)(null),x=(0,r.useRef)(-1),f=(0,r.useRef)(-1),w=(0,r.useRef)(-1),v=(0,r.useCallback)((e="unknown")=>{d||(u(!0),l?.(e))},[u,l,d]),y=(0,r.useCallback)((e="unknown")=>{d&&(u(!1),a?.(e))},[u,a,d]),h=(0,r.useCallback)((e="unknown")=>{d?y(e):v(e)},[y,v,d]),C=(0,r.useCallback)(()=>{let e=document.querySelector(`#${c.current} [data-combobox-selected]`);e?.removeAttribute("data-combobox-selected"),e?.removeAttribute("aria-selected")},[]),g=(0,r.useCallback)(e=>{let o=document.getElementById(c.current),t=o?.querySelectorAll("[data-combobox-option]");if(!t)return null;let r=e>=t.length?0:e<0?t.length-1:e;return(b.current=r,t?.[r]&&!t[r].hasAttribute("data-combobox-disabled"))?(C(),t[r].setAttribute("data-combobox-selected","true"),t[r].setAttribute("aria-selected","true"),t[r].scrollIntoView({block:"nearest",behavior:s}),t[r].id):null},[s,C]),k=(0,r.useCallback)(()=>{let e=document.querySelector(`#${c.current} [data-combobox-active]`);return e?g(Array.from(document.querySelectorAll(`#${c.current} [data-combobox-option]`)).findIndex(o=>o===e)):g(0)},[g]),D=(0,r.useCallback)(()=>g(function(e,o,t){for(let t=e+1;tg(function(e,o,t){for(let t=e-1;t>=0;t-=1)if(!o[t].hasAttribute("data-combobox-disabled"))return t;if(t){for(let e=o.length-1;e>-1;e-=1)if(!o[e].hasAttribute("data-combobox-disabled"))return e}return e}(b.current,document.querySelectorAll(`#${c.current} [data-combobox-option]`),i)),[g,i]),E=(0,r.useCallback)(()=>g(function(e){for(let o=0;o{w.current=window.setTimeout(()=>{let t=document.querySelectorAll(`#${c.current} [data-combobox-option]`),r=Array.from(t).findIndex(o=>o.hasAttribute(`data-combobox-${e}`));b.current=r,o?.scrollIntoView&&t[r]?.scrollIntoView({block:"nearest",behavior:s})},0)},[]),O=(0,r.useCallback)(()=>{b.current=-1,C()},[C]),N=(0,r.useCallback)(()=>{let e=document.querySelectorAll(`#${c.current} [data-combobox-option]`),o=e?.[b.current];o?.click()},[]),T=(0,r.useCallback)(e=>{c.current=e},[]),I=(0,r.useCallback)(()=>{x.current=window.setTimeout(()=>p.current.focus(),0)},[]),j=(0,r.useCallback)(()=>{f.current=window.setTimeout(()=>m.current.focus(),0)},[]),R=(0,r.useCallback)(()=>b.current,[]);return(0,r.useEffect)(()=>()=>{window.clearTimeout(x.current),window.clearTimeout(f.current),window.clearTimeout(w.current)},[]),{dropdownOpened:d,openDropdown:v,closeDropdown:y,toggleDropdown:h,selectedOptionIndex:b.current,getSelectedOptionIndex:R,selectOption:g,selectFirstOption:E,selectActiveOption:k,selectNextOption:D,selectPreviousOption:A,resetSelectedOption:O,updateSelectedOptionIndex:S,listId:c.current,setListId:T,clickSelectedOption:N,searchRef:p,focusSearchInput:I,targetRef:m,focusTarget:j}}}}]); \ No newline at end of file diff --git a/_next/static/chunks/61324-bd7b904cb8a8396c.js b/_next/static/chunks/61324-bd7b904cb8a8396c.js deleted file mode 100644 index 712b5ee229e..00000000000 --- a/_next/static/chunks/61324-bd7b904cb8a8396c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[61324],{61324:function(e,o,t){t.d(o,{h:function(){return U}});var r=t(52322),n=t(58898),a=t(2784),l=t(91482),i=t(11200),s=t(38483),d=t(46690),c=t(50205);let[u,b]=(0,t(89106).R)("Combobox component was not found in tree");var p=t(54178),m=t(2670);let x=(0,a.forwardRef)(({size:e,onMouseDown:o,onClick:t,onClear:n,...a},l)=>(0,r.jsx)(m.P,{ref:l,size:e||"sm",variant:"transparent",tabIndex:-1,"aria-hidden":!0,...a,onMouseDown:e=>{e.preventDefault(),o?.(e)},onClick:e=>{n(),t?.(e)}}));x.displayName="@mantine/core/ComboboxClearButton";var f=t(82027),w=t(61271);let v={},y=(0,f.d)((e,o)=>{let{classNames:t,styles:n,className:a,style:l,hidden:i,...d}=(0,s.w)("ComboboxDropdown",v,e),u=b();return(0,r.jsx)(c.J.Dropdown,{...d,ref:o,role:"presentation","data-hidden":i||void 0,...u.getStyles("dropdown",{className:a,style:l,classNames:t,styles:n})})});y.classes=w.Z,y.displayName="@mantine/core/ComboboxDropdown";var h=t(98399);let C={refProp:"ref"},g=(0,f.d)((e,o)=>{let{children:t,refProp:n}=(0,s.w)("ComboboxDropdownTarget",C,e);if(b(),!(0,h.k)(t))throw Error("Combobox.DropdownTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");return(0,r.jsx)(c.J.Target,{ref:o,refProp:n,children:t})});g.displayName="@mantine/core/ComboboxDropdownTarget";var k=t(28559);let A={},D=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:a,styles:l,vars:i,...d}=(0,s.w)("ComboboxEmpty",A,e),c=b();return(0,r.jsx)(k.x,{ref:o,...c.getStyles("empty",{className:n,classNames:t,styles:l,style:a}),...d})});D.classes=w.Z,D.displayName="@mantine/core/ComboboxEmpty";var E=t(70837);function S({onKeyDown:e,withKeyboardNavigation:o,withAriaAttributes:t,withExpandedAttribute:r,targetType:n,autoComplete:l}){let i=b(),[s,d]=(0,a.useState)(null);return{...t?{"aria-haspopup":"listbox","aria-expanded":r&&!!(i.store.listId&&i.store.dropdownOpened)||void 0,"aria-controls":i.store.listId,"aria-activedescendant":i.store.dropdownOpened&&s||void 0,autoComplete:l,"data-expanded":i.store.dropdownOpened||void 0,"data-mantine-stop-propagation":i.store.dropdownOpened||void 0}:{},onKeyDown:t=>{if(e?.(t),!i.readOnly&&o&&!t.nativeEvent.isComposing){if("ArrowDown"===t.nativeEvent.code&&(t.preventDefault(),i.store.dropdownOpened?d(i.store.selectNextOption()):(i.store.openDropdown("keyboard"),d(i.store.selectActiveOption()))),"ArrowUp"===t.nativeEvent.code&&(t.preventDefault(),i.store.dropdownOpened?d(i.store.selectPreviousOption()):(i.store.openDropdown("keyboard"),d(i.store.selectActiveOption()))),"Enter"===t.nativeEvent.code||"NumpadEnter"===t.nativeEvent.code){if(229===t.nativeEvent.keyCode)return;let e=i.store.getSelectedOptionIndex();i.store.dropdownOpened&&-1!==e?(t.preventDefault(),i.store.clickSelectedOption()):"button"===n&&(t.preventDefault(),i.store.openDropdown("keyboard"))}"Escape"===t.nativeEvent.code&&i.store.closeDropdown("keyboard"),"Space"===t.nativeEvent.code&&"button"===n&&(t.preventDefault(),i.store.toggleDropdown("keyboard"))}}}}let O={refProp:"ref",targetType:"input",withKeyboardNavigation:!0,withAriaAttributes:!0,withExpandedAttribute:!1,autoComplete:"off"},N=(0,f.d)((e,o)=>{let{children:t,refProp:r,withKeyboardNavigation:n,withAriaAttributes:l,withExpandedAttribute:i,targetType:d,autoComplete:c,...u}=(0,s.w)("ComboboxEventsTarget",O,e);if(!(0,h.k)(t))throw Error("Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let p=b(),m=S({targetType:d,withAriaAttributes:l,withKeyboardNavigation:n,withExpandedAttribute:i,onKeyDown:t.props.onKeyDown,autoComplete:c});return(0,a.cloneElement)(t,{...m,...u,[r]:(0,E.Yx)(o,p.store.targetRef,t?.ref)})});N.displayName="@mantine/core/ComboboxEventsTarget";let T={},I=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:a,styles:l,vars:i,...d}=(0,s.w)("ComboboxFooter",T,e),c=b();return(0,r.jsx)(k.x,{ref:o,...c.getStyles("footer",{className:n,classNames:t,style:a,styles:l}),...d})});I.classes=w.Z,I.displayName="@mantine/core/ComboboxFooter";let j={},R=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:a,styles:l,vars:i,children:d,label:c,...u}=(0,s.w)("ComboboxGroup",j,e),p=b();return(0,r.jsxs)(k.x,{ref:o,...p.getStyles("group",{className:n,classNames:t,style:a,styles:l}),...u,children:[c&&(0,r.jsx)("div",{...p.getStyles("groupLabel",{classNames:t,styles:l}),children:c}),d]})});R.classes=w.Z,R.displayName="@mantine/core/ComboboxGroup";let Z={},K=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:a,styles:l,vars:i,...d}=(0,s.w)("ComboboxHeader",Z,e),c=b();return(0,r.jsx)(k.x,{ref:o,...c.getStyles("header",{className:n,classNames:t,style:a,styles:l}),...d})});function q({value:e,valuesDivider:o=",",...t}){return(0,r.jsx)("input",{type:"hidden",value:Array.isArray(e)?e.join(o):e||"",...t})}K.classes=w.Z,K.displayName="@mantine/core/ComboboxHeader",q.displayName="@mantine/core/ComboboxHiddenInput";let $={},H=(0,f.d)((e,o)=>{let t=(0,s.w)("ComboboxOption",$,e),{classNames:n,className:l,style:i,styles:d,vars:c,onClick:u,id:p,active:m,onMouseDown:x,onMouseOver:f,disabled:w,selected:v,mod:y,...h}=t,C=b(),g=(0,a.useId)();return(0,r.jsx)(k.x,{...C.getStyles("option",{className:l,classNames:n,styles:d,style:i}),...h,ref:o,id:p||g,mod:["combobox-option",{"combobox-active":m,"combobox-disabled":w,"combobox-selected":v},y],role:"option",onClick:e=>{w?e.preventDefault():(C.onOptionSubmit?.(t.value,t),u?.(e))},onMouseDown:e=>{e.preventDefault(),x?.(e)},onMouseOver:e=>{C.resetSelectionOnOptionHover&&C.store.resetSelectedOption(),f?.(e)}})});H.classes=w.Z,H.displayName="@mantine/core/ComboboxOption";var P=t(66178);let F={},M=(0,f.d)((e,o)=>{let{classNames:t,className:n,style:l,styles:i,id:d,onMouseDown:c,labelledBy:u,...p}=(0,s.w)("ComboboxOptions",F,e),m=b(),x=(0,P.M)(d);return(0,a.useEffect)(()=>{m.store.setListId(x)},[x]),(0,r.jsx)(k.x,{ref:o,...m.getStyles("options",{className:n,style:l,classNames:t,styles:i}),...p,id:x,role:"listbox","aria-labelledby":u,onMouseDown:e=>{e.preventDefault(),c?.(e)}})});M.classes=w.Z,M.displayName="@mantine/core/ComboboxOptions";var _=t(6941);let z={withAriaAttributes:!0,withKeyboardNavigation:!0},V=(0,f.d)((e,o)=>{let{classNames:t,styles:n,unstyled:a,vars:l,withAriaAttributes:i,onKeyDown:d,withKeyboardNavigation:c,size:u,...p}=(0,s.w)("ComboboxSearch",z,e),m=b(),x=m.getStyles("search"),f=S({targetType:"input",withAriaAttributes:i,withKeyboardNavigation:c,withExpandedAttribute:!1,onKeyDown:d,autoComplete:"off"});return(0,r.jsx)(_.I,{ref:(0,E.Yx)(o,m.store.searchRef),classNames:[{input:x.className},t],styles:[{input:x.style},n],size:u||m.size,...f,...p,__staticSelector:"Combobox"})});V.classes=w.Z,V.displayName="@mantine/core/ComboboxSearch";let J={refProp:"ref",targetType:"input",withKeyboardNavigation:!0,withAriaAttributes:!0,withExpandedAttribute:!1,autoComplete:"off"},B=(0,f.d)((e,o)=>{let{children:t,refProp:n,withKeyboardNavigation:l,withAriaAttributes:i,withExpandedAttribute:d,targetType:u,autoComplete:p,...m}=(0,s.w)("ComboboxTarget",J,e);if(!(0,h.k)(t))throw Error("Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let x=b(),f=S({targetType:u,withAriaAttributes:i,withKeyboardNavigation:l,withExpandedAttribute:d,onKeyDown:t.props.onKeyDown,autoComplete:p}),w=(0,a.cloneElement)(t,{...f,...m});return(0,r.jsx)(c.J.Target,{ref:(0,E.Yx)(o,x.store.targetRef),children:w})});B.displayName="@mantine/core/ComboboxTarget";var G=t(56237);let Y={keepMounted:!0,withinPortal:!0,resetSelectionOnOptionHover:!1,width:"target",transitionProps:{transition:"fade",duration:0}},L=(0,i.Z)((e,{size:o,dropdownPadding:t})=>({options:{"--combobox-option-fz":(0,l.yv)(o),"--combobox-option-padding":(0,l.ap)(o,"combobox-option-padding")},dropdown:{"--combobox-padding":void 0===t?void 0:(0,n.h)(t),"--combobox-option-fz":(0,l.yv)(o),"--combobox-option-padding":(0,l.ap)(o,"combobox-option-padding")}}));function U(e){let o=(0,s.w)("Combobox",Y,e),{classNames:t,styles:n,unstyled:a,children:l,store:i,vars:b,onOptionSubmit:p,onClose:m,size:x,dropdownPadding:f,resetSelectionOnOptionHover:v,__staticSelector:y,readOnly:h,...C}=o,g=(0,G.K)(),k=i||g,A=(0,d.y)({name:y||"Combobox",classes:w.Z,props:o,classNames:t,styles:n,unstyled:a,vars:b,varsResolver:L});return(0,r.jsx)(u,{value:{getStyles:A,store:k,onOptionSubmit:p,size:x,resetSelectionOnOptionHover:v,readOnly:h},children:(0,r.jsx)(c.J,{opened:k.dropdownOpened,...C,onClose:()=>{m?.(),k.closeDropdown()},withRoles:!1,unstyled:a,children:l})})}U.extend=e=>e,U.classes=w.Z,U.displayName="@mantine/core/Combobox",U.Target=B,U.Dropdown=y,U.Options=M,U.Option=H,U.Search=V,U.Empty=D,U.Chevron=p.d,U.Footer=I,U.Header=K,U.EventsTarget=N,U.DropdownTarget=g,U.Group=R,U.ClearButton=x,U.HiddenInput=q},56237:function(e,o,t){t.d(o,{K:function(){return a}});var r=t(2784),n=t(9341);function a({defaultOpened:e,opened:o,onOpenedChange:t,onDropdownClose:a,onDropdownOpen:l,loop:i=!0,scrollBehavior:s="instant"}={}){let[d,c]=(0,n.C)({value:o,defaultValue:e,finalValue:!1,onChange:t}),u=(0,r.useRef)(null),b=(0,r.useRef)(-1),p=(0,r.useRef)(null),m=(0,r.useRef)(null),x=(0,r.useRef)(-1),f=(0,r.useRef)(-1),w=(0,r.useRef)(-1),v=(0,r.useCallback)((e="unknown")=>{d||(c(!0),l?.(e))},[c,l,d]),y=(0,r.useCallback)((e="unknown")=>{d&&(c(!1),a?.(e))},[c,a,d]),h=(0,r.useCallback)((e="unknown")=>{d?y(e):v(e)},[y,v,d]),C=(0,r.useCallback)(()=>{let e=document.querySelector(`#${u.current} [data-combobox-selected]`);e?.removeAttribute("data-combobox-selected"),e?.removeAttribute("aria-selected")},[]),g=(0,r.useCallback)(e=>{let o=document.getElementById(u.current),t=o?.querySelectorAll("[data-combobox-option]");if(!t)return null;let r=e>=t.length?0:e<0?t.length-1:e;return(b.current=r,t?.[r]&&!t[r].hasAttribute("data-combobox-disabled"))?(C(),t[r].setAttribute("data-combobox-selected","true"),t[r].setAttribute("aria-selected","true"),t[r].scrollIntoView({block:"nearest",behavior:s}),t[r].id):null},[s,C]),k=(0,r.useCallback)(()=>{let e=document.querySelector(`#${u.current} [data-combobox-active]`);return e?g(Array.from(document.querySelectorAll(`#${u.current} [data-combobox-option]`)).findIndex(o=>o===e)):g(0)},[g]),A=(0,r.useCallback)(()=>g(function(e,o,t){for(let t=e+1;tg(function(e,o,t){for(let t=e-1;t>=0;t-=1)if(!o[t].hasAttribute("data-combobox-disabled"))return t;if(t){for(let e=o.length-1;e>-1;e-=1)if(!o[e].hasAttribute("data-combobox-disabled"))return e}return e}(b.current,document.querySelectorAll(`#${u.current} [data-combobox-option]`),i)),[g,i]),E=(0,r.useCallback)(()=>g(function(e){for(let o=0;o{w.current=window.setTimeout(()=>{let t=document.querySelectorAll(`#${u.current} [data-combobox-option]`),r=Array.from(t).findIndex(o=>o.hasAttribute(`data-combobox-${e}`));b.current=r,o?.scrollIntoView&&t[r]?.scrollIntoView({block:"nearest",behavior:s})},0)},[]),O=(0,r.useCallback)(()=>{b.current=-1,C()},[C]),N=(0,r.useCallback)(()=>{let e=document.querySelectorAll(`#${u.current} [data-combobox-option]`),o=e?.[b.current];o?.click()},[]),T=(0,r.useCallback)(e=>{u.current=e},[]),I=(0,r.useCallback)(()=>{x.current=window.setTimeout(()=>p.current.focus(),0)},[]),j=(0,r.useCallback)(()=>{f.current=window.setTimeout(()=>m.current.focus(),0)},[]),R=(0,r.useCallback)(()=>b.current,[]);return(0,r.useEffect)(()=>()=>{window.clearTimeout(x.current),window.clearTimeout(f.current),window.clearTimeout(w.current)},[]),{dropdownOpened:d,openDropdown:v,closeDropdown:y,toggleDropdown:h,selectedOptionIndex:b.current,getSelectedOptionIndex:R,selectOption:g,selectFirstOption:E,selectActiveOption:k,selectNextOption:A,selectPreviousOption:D,resetSelectedOption:O,updateSelectedOptionIndex:S,listId:u.current,setListId:T,clickSelectedOption:N,searchRef:p,focusSearchInput:I,targetRef:m,focusTarget:j}}}}]); \ No newline at end of file diff --git a/_next/static/chunks/64485-6aceedad7b757811.js b/_next/static/chunks/64485-99c662226c8c4dd1.js similarity index 82% rename from _next/static/chunks/64485-6aceedad7b757811.js rename to _next/static/chunks/64485-99c662226c8c4dd1.js index 7e8e709c72e..64414210c26 100644 --- a/_next/static/chunks/64485-6aceedad7b757811.js +++ b/_next/static/chunks/64485-99c662226c8c4dd1.js @@ -25,4 +25,4 @@ function Demo() { ); } -`,centered:!0,component:function(){let[e,{open:t,close:o}]=(0,i.q)(!1);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.u,{opened:e,onClose:o,title:"Authentication",children:(0,r.jsx)(a._,{noShadow:!0,noPadding:!0})}),(0,r.jsx)(s.z,{onClick:t,children:"Open modal"})]})}}},3789:function(e,t,o){o.d(t,{_:function(){return v}});var r=o(52322),n=o(2784),s=o(89868),i=o(51934),a=o(1198),l=o(20992),c=o(93010),u=o(74770),d=o(60284),p=o(95047),f=o(8582),m=o(71873),g=o(17115),h=o(405);function v({noShadow:e,noPadding:t,noSubmit:o,style:v}){let[b,y]=(0,n.useState)("register"),[j,w]=(0,n.useState)(!1),[x,C]=(0,n.useState)(null),O=(0,h.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return(0,r.jsx)(a.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...v,position:"relative",backgroundColor:"var(--mantine-color-body)"},children:(0,r.jsxs)("form",{onSubmit:O.onSubmit(()=>{w(!0),C(null),setTimeout(()=>{w(!1),C("register"===b?"User with this email already exists":"User with this email does not exist")},3e3)}),children:[(0,r.jsx)(l.f,{visible:j}),"register"===b&&(0,r.jsxs)(c.Z,{grow:!0,children:[(0,r.jsx)(u.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...O.getInputProps("firstName")}),(0,r.jsx)(u.o,{required:!0,placeholder:"Your last name",label:"Last name",...O.getInputProps("lastName")})]}),(0,r.jsx)(u.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:(0,r.jsx)(s.Z,{size:16,stroke:1.5}),...O.getInputProps("email")}),(0,r.jsx)(d.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:(0,r.jsx)(i.Z,{size:16,stroke:1.5}),...O.getInputProps("password")}),"register"===b&&(0,r.jsx)(d.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:(0,r.jsx)(i.Z,{size:16,stroke:1.5}),...O.getInputProps("confirmPassword")}),"register"===b&&(0,r.jsx)(p.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...O.getInputProps("termsOfService",{type:"checkbox"})}),x&&(0,r.jsx)(f.x,{c:"red",size:"sm",mt:"sm",children:x}),!o&&(0,r.jsxs)(c.Z,{justify:"space-between",mt:"xl",children:[(0,r.jsx)(m.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{y(e=>"register"===e?"login":"register"),C(null)},size:"sm",children:"register"===b?"Have an account? Login":"Don't have an account? Register"}),(0,r.jsx)(g.z,{color:"blue",type:"submit",children:"register"===b?"Register":"Login"})]})]})})}},20992:function(e,t,o){o.d(t,{f:function(){return v}});var r=o(52322);o(2784);var n=o(97263),s=o(11200),i=o(68755),a=o(38483),l=o(46690),c=o(28559),u=o(82027),d=o(12491),p=o(87170),f=o(96321),m={root:"m_6e45937b",loader:"m_e8eb006c",overlay:"m_df587f17"};let g={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,n.w)("overlay")},h=(0,s.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),v=(0,u.d)((e,t)=>{let o=(0,a.w)("LoadingOverlay",g,e),{classNames:n,className:s,style:u,styles:v,unstyled:b,vars:y,transitionProps:j,loaderProps:w,overlayProps:x,visible:C,zIndex:O,...k}=o,P=(0,i.rZ)(),S=(0,l.y)({name:"LoadingOverlay",classes:m,props:o,className:s,style:u,classNames:n,styles:v,unstyled:b,vars:y,varsResolver:h}),_={...g.overlayProps,...x};return(0,r.jsx)(f.u,{transition:"fade",...j,mounted:!!C,children:e=>(0,r.jsxs)(c.x,{...S("root",{style:e}),ref:t,...k,children:[(0,r.jsx)(d.a,{...S("loader"),unstyled:b,...w}),(0,r.jsx)(p.a,{..._,...S("overlay"),darkHidden:!0,unstyled:b,color:x?.color||P.white}),(0,r.jsx)(p.a,{..._,...S("overlay"),lightHidden:!0,unstyled:b,color:x?.color||P.colors.dark[5]})]})})});v.classes=m,v.displayName="@mantine/core/LoadingOverlay"},60284:function(e,t,o){o.d(t,{W:function(){return j}});var r=o(52322),n=o(40489),s=o(66178),i=o(9341);o(2784);var a=o(91482),l=o(11200),c=o(51477),u=o(46690),d=o(38483),p=o(97072),f=o(82027),m=o(54813),g=o(6941),h=o(73063),v={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let b={visibilityToggleIcon:({reveal:e})=>(0,r.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,r.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},y=(0,l.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,a.ap)(t,"psi-icon-size"),"--psi-button-size":(0,a.ap)(t,"psi-button-size")}})),j=(0,f.d)((e,t)=>{let o=(0,d.w)("PasswordInput",b,e),{classNames:a,className:l,style:f,styles:h,unstyled:j,vars:w,required:x,error:C,leftSection:O,disabled:k,id:P,variant:S,inputContainer:_,description:I,label:M,size:Z,errorProps:z,descriptionProps:D,labelProps:L,withAsterisk:A,inputWrapperOrder:N,wrapperProps:E,radius:q,rightSection:R,rightSectionWidth:B,rightSectionPointerEvents:T,leftSectionWidth:V,visible:W,defaultVisible:Y,onVisibilityChange:F,visibilityToggleIcon:H,visibilityToggleButtonProps:K,rightSectionProps:U,leftSectionProps:X,leftSectionPointerEvents:G,mod:J,...Q}=o,$=(0,s.M)(P),[ee,et]=(0,i.C)({value:W,defaultValue:Y,finalValue:!1,onChange:F}),eo=()=>et(!ee),er=(0,u.y)({name:"PasswordInput",classes:v,props:o,className:l,style:f,classNames:a,styles:h,unstyled:j,vars:w,varsResolver:y}),{resolvedClassNames:en,resolvedStyles:es}=(0,c.h)({classNames:a,styles:h,props:o}),{styleProps:ei,rest:ea}=(0,p.c)(Q),el=(0,r.jsx)(m.A,{...er("visibilityToggle"),disabled:k,radius:q,"aria-hidden":!K,tabIndex:-1,...K,variant:"subtle",color:"gray",unstyled:j,onMouseDown:e=>{e.preventDefault(),K?.onMouseDown?.(e),eo()},onKeyDown:e=>{K?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),eo())},children:(0,r.jsx)(H,{reveal:ee})});return(0,r.jsx)(g.I.Wrapper,{required:x,id:$,label:M,error:C,description:I,size:Z,classNames:en,styles:es,__staticSelector:"PasswordInput",errorProps:z,descriptionProps:D,unstyled:j,withAsterisk:A,inputWrapperOrder:N,inputContainer:_,variant:S,labelProps:{...L,htmlFor:$},mod:J,...er("root"),...ei,...E,children:(0,r.jsx)(g.I,{component:"div",error:C,leftSection:O,size:Z,classNames:{...en,input:(0,n.Z)(v.input,en.input)},styles:es,radius:q,disabled:k,__staticSelector:"PasswordInput",rightSectionWidth:B,rightSection:R??el,variant:S,unstyled:j,leftSectionWidth:V,rightSectionPointerEvents:T||"all",rightSectionProps:U,leftSectionProps:X,leftSectionPointerEvents:G,withAria:!1,children:(0,r.jsx)("input",{required:x,"data-invalid":!!C||void 0,"data-with-left-section":!!O||void 0,...er("innerInput"),disabled:k,id:$,ref:t,...ea,autoComplete:ea.autoComplete||"off",type:ee?"text":"password"})})})});j.classes={...h.M.classes,...v},j.displayName="@mantine/core/PasswordInput"},3900:function(e,t,o){o.d(t,{q:function(){return n}});var r=o(2784);function n(e=!1,t){let{onOpen:o,onClose:n}=t||{},[s,i]=(0,r.useState)(e),a=(0,r.useCallback)(()=>{i(e=>e||(o?.(),!0))},[o]),l=(0,r.useCallback)(()=>{i(e=>e?(n?.(),!1):e)},[n]),c=(0,r.useCallback)(()=>{s?l():a()},[l,a,s]);return[s,{open:a,close:l,toggle:c}]}}}]); \ No newline at end of file +`,centered:!0,component:function(){let[e,{open:t,close:o}]=(0,i.q)(!1);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.u,{opened:e,onClose:o,title:"Authentication",children:(0,r.jsx)(a._,{noShadow:!0,noPadding:!0})}),(0,r.jsx)(s.z,{onClick:t,children:"Open modal"})]})}}},3789:function(e,t,o){o.d(t,{_:function(){return v}});var r=o(52322),n=o(2784),s=o(89868),i=o(51934),a=o(1198),l=o(20992),c=o(93010),u=o(74770),d=o(60284),p=o(95047),f=o(8582),m=o(71873),g=o(17115),h=o(405);function v({noShadow:e,noPadding:t,noSubmit:o,style:v}){let[b,y]=(0,n.useState)("register"),[j,w]=(0,n.useState)(!1),[x,C]=(0,n.useState)(null),O=(0,h.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return(0,r.jsx)(a.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...v,position:"relative",backgroundColor:"var(--mantine-color-body)"},children:(0,r.jsxs)("form",{onSubmit:O.onSubmit(()=>{w(!0),C(null),setTimeout(()=>{w(!1),C("register"===b?"User with this email already exists":"User with this email does not exist")},3e3)}),children:[(0,r.jsx)(l.f,{visible:j}),"register"===b&&(0,r.jsxs)(c.Z,{grow:!0,children:[(0,r.jsx)(u.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...O.getInputProps("firstName")}),(0,r.jsx)(u.o,{required:!0,placeholder:"Your last name",label:"Last name",...O.getInputProps("lastName")})]}),(0,r.jsx)(u.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:(0,r.jsx)(s.Z,{size:16,stroke:1.5}),...O.getInputProps("email")}),(0,r.jsx)(d.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:(0,r.jsx)(i.Z,{size:16,stroke:1.5}),...O.getInputProps("password")}),"register"===b&&(0,r.jsx)(d.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:(0,r.jsx)(i.Z,{size:16,stroke:1.5}),...O.getInputProps("confirmPassword")}),"register"===b&&(0,r.jsx)(p.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...O.getInputProps("termsOfService",{type:"checkbox"})}),x&&(0,r.jsx)(f.x,{c:"red",size:"sm",mt:"sm",children:x}),!o&&(0,r.jsxs)(c.Z,{justify:"space-between",mt:"xl",children:[(0,r.jsx)(m.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{y(e=>"register"===e?"login":"register"),C(null)},size:"sm",children:"register"===b?"Have an account? Login":"Don't have an account? Register"}),(0,r.jsx)(g.z,{color:"blue",type:"submit",children:"register"===b?"Register":"Login"})]})]})})}},20992:function(e,t,o){o.d(t,{f:function(){return v}});var r=o(52322);o(2784);var n=o(97263),s=o(11200),i=o(68755),a=o(38483),l=o(46690),c=o(28559),u=o(82027),d=o(12491),p=o(87170),f=o(96321),m={root:"m_6e45937b",loader:"m_e8eb006c",overlay:"m_df587f17"};let g={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,n.w)("overlay")},h=(0,s.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),v=(0,u.d)((e,t)=>{let o=(0,a.w)("LoadingOverlay",g,e),{classNames:n,className:s,style:u,styles:v,unstyled:b,vars:y,transitionProps:j,loaderProps:w,overlayProps:x,visible:C,zIndex:O,...k}=o,P=(0,i.rZ)(),S=(0,l.y)({name:"LoadingOverlay",classes:m,props:o,className:s,style:u,classNames:n,styles:v,unstyled:b,vars:y,varsResolver:h}),_={...g.overlayProps,...x};return(0,r.jsx)(f.u,{transition:"fade",...j,mounted:!!C,children:e=>(0,r.jsxs)(c.x,{...S("root",{style:e}),ref:t,...k,children:[(0,r.jsx)(d.a,{...S("loader"),unstyled:b,...w}),(0,r.jsx)(p.a,{..._,...S("overlay"),darkHidden:!0,unstyled:b,color:x?.color||P.white}),(0,r.jsx)(p.a,{..._,...S("overlay"),lightHidden:!0,unstyled:b,color:x?.color||P.colors.dark[5]})]})})});v.classes=m,v.displayName="@mantine/core/LoadingOverlay"},60284:function(e,t,o){o.d(t,{W:function(){return j}});var r=o(52322),n=o(40489),s=o(66178),i=o(9341);o(2784);var a=o(91482),l=o(11200),c=o(51477),u=o(46690),d=o(38483),p=o(97072),f=o(82027),m=o(54813),g=o(6941),h=o(73063),v={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let b={visibilityToggleIcon:({reveal:e})=>(0,r.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,r.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},y=(0,l.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,a.ap)(t,"psi-icon-size"),"--psi-button-size":(0,a.ap)(t,"psi-button-size")}})),j=(0,f.d)((e,t)=>{let o=(0,d.w)("PasswordInput",b,e),{classNames:a,className:l,style:f,styles:h,unstyled:j,vars:w,required:x,error:C,leftSection:O,disabled:k,id:P,variant:S,inputContainer:_,description:I,label:M,size:Z,errorProps:z,descriptionProps:D,labelProps:L,withAsterisk:A,inputWrapperOrder:N,wrapperProps:E,radius:q,rightSection:R,rightSectionWidth:B,rightSectionPointerEvents:T,leftSectionWidth:V,visible:W,defaultVisible:Y,onVisibilityChange:F,visibilityToggleIcon:H,visibilityToggleButtonProps:K,rightSectionProps:U,leftSectionProps:X,leftSectionPointerEvents:G,withErrorStyles:J,mod:Q,...$}=o,ee=(0,s.M)(P),[et,eo]=(0,i.C)({value:W,defaultValue:Y,finalValue:!1,onChange:F}),er=()=>eo(!et),en=(0,u.y)({name:"PasswordInput",classes:v,props:o,className:l,style:f,classNames:a,styles:h,unstyled:j,vars:w,varsResolver:y}),{resolvedClassNames:es,resolvedStyles:ei}=(0,c.h)({classNames:a,styles:h,props:o}),{styleProps:ea,rest:el}=(0,p.c)($),ec=(0,r.jsx)(m.A,{...en("visibilityToggle"),disabled:k,radius:q,"aria-hidden":!K,tabIndex:-1,...K,variant:"subtle",color:"gray",unstyled:j,onMouseDown:e=>{e.preventDefault(),K?.onMouseDown?.(e),er()},onKeyDown:e=>{K?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),er())},children:(0,r.jsx)(H,{reveal:et})});return(0,r.jsx)(g.I.Wrapper,{required:x,id:ee,label:M,error:C,description:I,size:Z,classNames:es,styles:ei,__staticSelector:"PasswordInput",errorProps:z,descriptionProps:D,unstyled:j,withAsterisk:A,inputWrapperOrder:N,inputContainer:_,variant:S,labelProps:{...L,htmlFor:ee},mod:Q,...en("root"),...ea,...E,children:(0,r.jsx)(g.I,{component:"div",error:C,leftSection:O,size:Z,classNames:{...es,input:(0,n.Z)(v.input,es.input)},styles:ei,radius:q,disabled:k,__staticSelector:"PasswordInput",rightSectionWidth:B,rightSection:R??ec,variant:S,unstyled:j,leftSectionWidth:V,rightSectionPointerEvents:T||"all",rightSectionProps:U,leftSectionProps:X,leftSectionPointerEvents:G,withAria:!1,withErrorStyles:J,children:(0,r.jsx)("input",{required:x,"data-invalid":!!C||void 0,"data-with-left-section":!!O||void 0,...en("innerInput"),disabled:k,id:ee,ref:t,...el,autoComplete:el.autoComplete||"off",type:et?"text":"password"})})})});j.classes={...h.M.classes,...v},j.displayName="@mantine/core/PasswordInput"},3900:function(e,t,o){o.d(t,{q:function(){return n}});var r=o(2784);function n(e=!1,t){let{onOpen:o,onClose:n}=t||{},[s,i]=(0,r.useState)(e),a=(0,r.useCallback)(()=>{i(e=>e||(o?.(),!0))},[o]),l=(0,r.useCallback)(()=>{i(e=>e?(n?.(),!1):e)},[n]),c=(0,r.useCallback)(()=>{s?l():a()},[l,a,s]);return[s,{open:a,close:l,toggle:c}]}}}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/_app-490a43fa711c9ada.js b/_next/static/chunks/pages/_app-490a43fa711c9ada.js new file mode 100644 index 00000000000..cea5b4d90ec --- /dev/null +++ b/_next/static/chunks/pages/_app-490a43fa711c9ada.js @@ -0,0 +1,88 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[92888],{2107:function(e,t,n){"use strict";n.d(t,{Z:function(){return V}});var r=function(){function e(e){var t=this;this._insertTag=function(e){var n;n=0===t.tags.length?t.insertionPoint?t.insertionPoint.nextSibling:t.prepend?t.container.firstChild:t.before:t.tags[t.tags.length-1].nextSibling,t.container.insertBefore(e,n),t.tags.push(e)},this.isSpeedy=void 0===e.speedy||e.speedy,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container,this.prepend=e.prepend,this.insertionPoint=e.insertionPoint,this.before=null}var t=e.prototype;return t.hydrate=function(e){e.forEach(this._insertTag)},t.insert=function(e){if(this.ctr%(this.isSpeedy?65e3:1)==0){var t;this._insertTag(((t=document.createElement("style")).setAttribute("data-emotion",this.key),void 0!==this.nonce&&t.setAttribute("nonce",this.nonce),t.appendChild(document.createTextNode("")),t.setAttribute("data-s",""),t))}var n=this.tags[this.tags.length-1];if(this.isSpeedy){var r=function(e){if(e.sheet)return e.sheet;for(var t=0;t0?h[k]+" "+w:s(w,/&\f/g,h[k])).trim())&&(d[x++]=j);return y(e,t,n,0===i?P:l,d,p,f)}function A(e,t,n,r){return y(e,t,n,R,u(e,0,r),u(e,r+1,-1),r)}var L=function(e,t,n){for(var r=0,o=0;r=o,o=w(),38===r&&12===o&&(t[n]=1),!j(o);)k();return u(b,e,g)},D=function(e,t){var n=-1,r=44;do switch(j(r)){case 0:38===r&&12===w()&&(t[n]=1),e[n]+=L(g-1,t,n);break;case 2:e[n]+=S(r);break;case 4:if(44===r){e[++n]=58===w()?"&\f":"",t[n]=e[n].length;break}default:e[n]+=i(r)}while(r=k());return e},$=function(e,t){var n;return n=D(C(e),t),b="",n},z=new WeakMap,H=function(e){if("rule"===e.type&&e.parent&&!(e.length<1)){for(var t=e.value,n=e.parent,r=e.column===n.column&&e.line===n.line;"rule"!==n.type;)if(!(n=n.parent))return;if((1!==e.props.length||58===t.charCodeAt(0)||z.get(n))&&!r){z.set(e,!0);for(var o=[],i=$(t,o),a=n.props,s=0,c=0;s-1&&!e.return)switch(e.type){case R:e.return=function e(t,n){switch(45^l(t,0)?(((n<<2^l(t,0))<<2^l(t,1))<<2^l(t,2))<<2^l(t,3):0){case 5103:return T+"print-"+t+t;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return T+t+t;case 5349:case 4246:case 4810:case 6968:case 2756:return T+t+M+t+I+t+t;case 6828:case 4268:return T+t+I+t+t;case 6165:return T+t+I+"flex-"+t+t;case 5187:return T+t+s(t,/(\w+).+(:[^]+)/,T+"box-$1$2"+I+"flex-$1$2")+t;case 5443:return T+t+I+"flex-item-"+s(t,/flex-|-self/,"")+t;case 4675:return T+t+I+"flex-line-pack"+s(t,/align-content|flex-|-self/,"")+t;case 5548:return T+t+I+s(t,"shrink","negative")+t;case 5292:return T+t+I+s(t,"basis","preferred-size")+t;case 6060:return T+"box-"+s(t,"-grow","")+T+t+I+s(t,"grow","positive")+t;case 4554:return T+s(t,/([^-])(transform)/g,"$1"+T+"$2")+t;case 6187:return s(s(s(t,/(zoom-|grab)/,T+"$1"),/(image-set)/,T+"$1"),t,"")+t;case 5495:case 3959:return s(t,/(image-set\([^]*)/,T+"$1$`$1");case 4968:return s(s(t,/(.+:)(flex-)?(.*)/,T+"box-pack:$3"+I+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+T+t+t;case 4095:case 3583:case 4068:case 2532:return s(t,/(.+)-inline(.+)/,T+"$1$2")+t;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(d(t)-1-n>6)switch(l(t,n+1)){case 109:if(45!==l(t,n+4))break;case 102:return s(t,/(.+:)(.+)-([^]+)/,"$1"+T+"$2-$3$1"+M+(108==l(t,n+3)?"$3":"$2-$3"))+t;case 115:return~c(t,"stretch")?e(s(t,"stretch","fill-available"),n)+t:t}break;case 4949:if(115!==l(t,n+1))break;case 6444:switch(l(t,d(t)-3-(~c(t,"!important")&&10))){case 107:return s(t,":",":"+T)+t;case 101:return s(t,/(.+:)([^;!]+)(;|!.+)?/,"$1"+T+(45===l(t,14)?"inline-":"")+"box$3$1"+T+"$2$3$1"+I+"$2box$3")+t}break;case 5936:switch(l(t,n+11)){case 114:return T+t+I+s(t,/[svh]\w+-[tblr]{2}/,"tb")+t;case 108:return T+t+I+s(t,/[svh]\w+-[tblr]{2}/,"tb-rl")+t;case 45:return T+t+I+s(t,/[svh]\w+-[tblr]{2}/,"lr")+t}return T+t+I+t+t}return t}(e.value,e.length);break;case N:return _([x(e,{value:s(e.value,"@","@"+T)})],r);case P:if(e.length){var o,i;return o=e.props,i=function(t){var n;switch(n=t,(n=/(::plac\w+|:read-\w+)/.exec(n))?n[0]:n){case":read-only":case":read-write":return _([x(e,{props:[s(t,/:(read-\w+)/,":"+M+"$1")]})],r);case"::placeholder":return _([x(e,{props:[s(t,/:(plac\w+)/,":"+T+"input-$1")]}),x(e,{props:[s(t,/:(plac\w+)/,":"+M+"$1")]}),x(e,{props:[s(t,/:(plac\w+)/,I+"input-$1")]})],r)}return""},o.map(i).join("")}}}],V=function(e){var t,n,o,a,h,x,I=e.key;if("css"===I){var M=document.querySelectorAll("style[data-emotion]:not([data-s])");Array.prototype.forEach.call(M,function(e){-1!==e.getAttribute("data-emotion").indexOf(" ")&&(document.head.appendChild(e),e.setAttribute("data-s",""))})}var T=e.stylisPlugins||Z,P={},R=[];a=e.container||document.head,Array.prototype.forEach.call(document.querySelectorAll('style[data-emotion^="'+I+' "]'),function(e){for(var t=e.getAttribute("data-emotion").split(" "),n=1;n2||j(v)>3?"":" "}(F);break;case 92:G+=function(e,t){for(var n;--t&&k()&&!(v<48)&&!(v>102)&&(!(v>57)||!(v<65))&&(!(v>70)||!(v<97)););return n=g+(t<6&&32==w()&&32==k()),u(b,e,n)}(g-1,7);continue;case 47:switch(w()){case 42:case 47:p(y(M=function(e,t){for(;k();)if(e+v===57)break;else if(e+v===84&&47===w())break;return"/*"+u(b,t,g-1)+"*"+i(47===e?e:k())}(k(),g),n,r,E,i(v),u(M,2,-2),0),I);break;default:G+="/"}break;case 123*L:C[T++]=d(G)*$;case 125*L:case 59:case 0:switch(z){case 0:case 125:D=0;case 59+P:-1==$&&(G=s(G,/\f/g,"")),_>0&&d(G)-R&&p(_>32?A(G+";",o,r,R-1):A(s(G," ","")+";",o,r,R-2),I);break;case 59:G+=";";default:if(p(V=B(G,n,r,T,P,a,C,H,O=[],Z=[],R),h),123===z){if(0===P)e(G,n,V,V,O,h,R,C,Z);else switch(99===N&&110===l(G,3)?100:N){case 100:case 108:case 109:case 115:e(t,V,V,o&&p(B(t,V,V,0,0,a,C,H,a,O=[],R),Z),a,Z,R,C,o?O:Z);break;default:e(G,V,V,V,[""],Z,0,C,Z)}}}T=P=_=0,L=$=1,H=G="",R=x;break;case 58:R=1+d(G),_=F;default:if(L<1){if(123==z)--L;else if(125==z&&0==L++&&125==(v=g>0?l(b,--g):0,m--,10===v&&(m=1,f--),v))continue}switch(G+=i(z),z*L){case 38:$=P>0?1:(G+="\f",-1);break;case 44:C[T++]=(d(G)-1)*$,$=1;break;case 64:45===w()&&(G+=S(k())),N=w(),P=R=d(H=G+=function(e){for(;!j(w());)k();return u(b,e,g)}(g)),z++;break;case 45:45===F&&2==d(G)&&(L=0)}}return h}("",null,null,null,[""],t=C(t=e),0,[0],t),b="",n),N)};h=function(e,t,n,r){x=n,L(e?e+"{"+t.styles+"}":t.styles),r&&(D.inserted[t.name]=!0)};var D={key:I,sheet:new r({key:I,container:a,nonce:e.nonce,speedy:e.speedy,prepend:e.prepend,insertionPoint:e.insertionPoint}),nonce:e.nonce,inserted:P,registered:{},insert:h};return D.sheet.hydrate(R),D}},74251:function(e,t,n){"use strict";n.d(t,{O:function(){return h}});var r,o,i,a={animationIterationCount:1,aspectRatio:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},s=/[A-Z]|^ms/g,c=/_EMO_([^_]+?)_([^]*?)_EMO_/g,l=function(e){return 45===e.charCodeAt(1)},u=function(e){return null!=e&&"boolean"!=typeof e},d=(r=function(e){return l(e)?e:e.replace(s,"-$&").toLowerCase()},o=Object.create(null),function(e){return void 0===o[e]&&(o[e]=r(e)),o[e]}),p=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(c,function(e,t,n){return i={name:t,styles:n,next:i},t})}return 1===a[e]||l(e)||"number"!=typeof t||0===t?t:t+"px"};function f(e,t,n){if(null==n)return"";if(void 0!==n.__emotion_styles)return n;switch(typeof n){case"boolean":return"";case"object":if(1===n.anim)return i={name:n.name,styles:n.styles,next:i},n.name;if(void 0!==n.styles){var r=n.next;if(void 0!==r)for(;void 0!==r;)i={name:r.name,styles:r.styles,next:i},r=r.next;return n.styles+";"}return function(e,t,n){var r="";if(Array.isArray(n))for(var o=0;o=4;++r,o-=4)t=(65535&(t=255&e.charCodeAt(r)|(255&e.charCodeAt(++r))<<8|(255&e.charCodeAt(++r))<<16|(255&e.charCodeAt(++r))<<24))*1540483477+((t>>>16)*59797<<16),t^=t>>>24,n=(65535&t)*1540483477+((t>>>16)*59797<<16)^(65535&n)*1540483477+((n>>>16)*59797<<16);switch(o){case 3:n^=(255&e.charCodeAt(r+2))<<16;case 2:n^=(255&e.charCodeAt(r+1))<<8;case 1:n^=255&e.charCodeAt(r),n=(65535&n)*1540483477+((n>>>16)*59797<<16)}return n^=n>>>13,(((n=(65535&n)*1540483477+((n>>>16)*59797<<16))^n>>>15)>>>0).toString(36)}(a)+l,styles:a,next:i}}},82668:function(e,t,n){"use strict";var r,o=n(2784);(r||(r=n.t(o,2))).useInsertionEffect&&(r||(r=n.t(o,2))).useInsertionEffect||o.useLayoutEffect},86570:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return n(64270)}])},28550:function(e,t,n){"use strict";n.d(t,{U:function(){return s}});var r=n(52322),o=n(40489),i=n(5874),a=n.n(i);function s(e){let{className:t,...n}=e;return(0,r.jsx)("div",{className:(0,o.Z)(a().section,t),...n})}},69351:function(e,t,n){"use strict";n.d(t,{T:function(){return p}});var r=n(52322),o=n(39097),i=n.n(o),a=n(40489),s=n(79289),c=n(1767),l=n(48158),u=n(41601),d=n.n(u);function p(e){return(0,r.jsxs)(i(),{href:"/",className:(0,a.Z)(d().logo,s.C.auto),"aria-label":"Mantine",children:[(0,r.jsx)(c.T,{children:"Welcome to Mantine, React components library that you always wished for"}),(0,r.jsx)(l.D,{size:30,...e})]})}},89793:function(e,t,n){"use strict";n.d(t,{g:function(){return s}});var r=n(52322),o=n(96242),i=n(58898),a=n(28550);function s(e){let{data:t,head:n}=e,s=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)}),c=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:[c&&(0,r.jsx)(o.i.Thead,{children:(0,r.jsx)(o.i.Tr,{children:c})}),(0,r.jsx)(o.i.Tbody,{children:s})]})})})})}},52905:function(e,t,n){"use strict";n.d(t,{yp:function(){return c},gw:function(){return eN.g},Ec:function(){return B},NV:function(){return $},Cu:function(){return eJ},an:function(){return b}});var r=n(52322),o=n(40489),i=n(80508),a=n(49603),s=n.n(a);function c(e){let{className:t,...n}=e;return(0,r.jsx)(i.P,{className:(0,o.Z)(s().code,t),...n})}function l(e){let{children:t}=e;return(0,r.jsx)(c,{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 u=n(9705),d=n(94120),p=n(79289),f=n(63409),m=n(78574);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 g=n(77689),v=n.n(g);function b(e){let{id:t,children:n,order:i=2,...a}=e,{copied:s,copy:c,reset:l}=(0,m.V)();return 1===i?(0,r.jsx)(d.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":i,className:v().offset}),(0,r.jsxs)(d.D,{order:i,className:v().title,...a,children:[(0,r.jsx)("a",{className:(0,o.Z)(v().link,p.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:()=>c("".concat(window.location.origin).concat(window.location.pathname,"#").concat(t)),onMouseLeave:l,title:s?"✓ Copied to clipboard":"Copy link",children:s?(0,r.jsx)(u.Z,{className:v().copyIcon}):(0,r.jsx)(h,{className:v().copyIcon})})]})]})}let y=e=>t=>(0,r.jsx)(b,{order:e,...t}),x={div:"HTMLDivElement",button:"HTMLButtonElement",input:"HTMLInputElement",textarea:"HTMLTextAreaElement",select:"HTMLSelectElement",a:"HTMLAnchorElement"};function k(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"get-element-ref",children:"Get element ref"}),(0,r.jsx)(c,{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 w=n(55709),j=n(48671),C=n(68755),S=n(94856),I=n(20754),M=n(73057),T=n.n(M);function E(e){let{className:t,...n}=e,i=(0,C.rZ)();return(0,r.jsx)(S.V,{className:(0,o.Z)(T().root,t),icon:(0,r.jsx)(j.Z,{className:T().icon}),radius:"md",__vars:{"--docs-bq-code-bg-light":(0,I.m)(i.colors.blue[6],.2),"--docs-bq-code-bg-dark":(0,I.m)(i.colors.blue[4],.2)},...n})}var P=n(39097),R=n.n(P),N=n(71873),_=n(23233),F=n.n(_);function B(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)(N.e,{className:F().link,href:t,...n}):(0,r.jsx)(N.e,{className:F().link,component:R(),href:o,...n})}var A=n(45909),L=n(32481),D=n.n(L);function $(e){let{className:t,...n}=e;return(0,r.jsx)("p",{className:(0,o.Z)(D().paragraph,t),...n})}function z(e){let{className:t,...n}=e;return(0,r.jsx)("ul",{className:(0,o.Z)(D().ul,t),...n})}function H(e){let{className:t,...n}=e;return(0,r.jsx)("li",{className:(0,o.Z)(D().li,t),...n})}function O(e){return(0,r.jsx)(A.E,{...e})}function Z(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)(O,{children:e.component})," is a"," ",(0,r.jsx)(B,{href:"/guides/polymorphic/",children:"polymorphic component"})," – its default root element is ",(0,r.jsx)(O,{children:e.defaultElement}),", but it can be changed to any other element or component with ",(0,r.jsx)(O,{children:"component"})," prop:"]}),(0,r.jsx)(c,{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)(O,{children:"component"})," prop, for example, Next.js"," ",(0,r.jsx)(O,{children:"Link"}),":"]}),(0,r.jsx)(c,{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)(E,{icon:(0,r.jsx)(w.s,{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)(O,{children:[e.component,"Props"]})," does not extend"," ",(0,r.jsxs)(O,{children:["React.ComponentPropsWithoutRef","'<'","div","'>'"]})," ","although ",(0,r.jsx)(O,{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)(O,{children:"component"})," prop), then your component props interface should extend HTML element props, for example:"," "]}),(0,r.jsx)(c,{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)(O,{children:"createPolymorphicComponent"})," function described in"," ",(0,r.jsx)(B,{href:"/guides/polymorphic/",children:"this guide"}),"."]})]})]})}let V=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}"),G=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}"),W=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 Y(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)(O,{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)(c,{code:V(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)(O,{children:"ref"})," prop:"]}),(0,r.jsx)(c,{code:G(t),language:"tsx"}),(0,r.jsxs)($,{children:["Use ",(0,r.jsx)(O,{children:"forwardRef"})," function to forward ref to root element:"]}),(0,r.jsx)(c,{code:W(t),language:"tsx"})]})}function q(e){let{component:t,element:n}=e;return(0,r.jsxs)($,{children:[(0,r.jsx)(O,{children:t})," component supports ",(0,r.jsx)(B,{href:"/core/input",children:"Input"})," ","and ",(0,r.jsx)(B,{href:"/core/input",children:"Input.Wrapper"})," components features and all"," ",(0,r.jsx)(O,{children:n})," element props. ",(0,r.jsx)(O,{children:t})," documentation does not include all features supported by the component – see"," ",(0,r.jsx)(B,{href:"/core/input",children:"Input"})," documentation to learn about all available features."]})}let K=(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"),U=(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'),X=(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 J(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)(O,{children:e.component})," is used without ",(0,r.jsx)(O,{children:"label"})," prop, it will not be announced properly by screen reader:"]}),(0,r.jsx)(c,{code:K(e.component,t),language:"tsx"}),(0,r.jsxs)($,{children:["Set ",(0,r.jsx)(O,{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)(c,{code:U(e.component,t),language:"tsx"}),(0,r.jsxs)($,{children:["If ",(0,r.jsx)(O,{children:"label"})," prop is set, input will be accessible it is not required to set"," ",(0,r.jsx)(O,{children:"aria-label"}),":"]}),(0,r.jsx)(c,{code:X(e.component,t),language:"tsx"})]})}function Q(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)(O,{children:t})," uses"," ",(0,r.jsx)(B,{href:"https://caniuse.com/flexbox-gap",children:"flexbox gap"})," to add spacing between children. In older browsers, ",(0,r.jsx)(O,{children:t})," children may not have spacing. You can install PostCSS"," ",(0,r.jsx)(B,{href:"https://github.com/gavinmcfarland/flex-gap-polyfill",children:"flex-gap-polyfill"})," ","to add support for older browsers."]})]})}function ee(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)(O,{children:"variant"})," prop is set to ",(0,r.jsx)(O,{children:"gradient"}),", you can control gradient with ",(0,r.jsx)(O,{children:"gradient"})," prop, it accepts an object with"," ",(0,r.jsx)(O,{children:"from"}),", ",(0,r.jsx)(O,{children:"to"})," and ",(0,r.jsx)(O,{children:"deg"})," properties. If the",(0,r.jsx)(O,{children:"gradient"})," prop is not set, ",(0,r.jsx)(O,{children:t})," will use"," ",(0,r.jsx)(O,{children:"theme.defaultGradient"})," which can be configured on the"," ",(0,r.jsx)(B,{href:"/theming/theme-object",children:"theme object"}),". ",(0,r.jsx)(O,{children:"gradient"})," ","prop is ignored when ",(0,r.jsx)(O,{children:"variant"})," is not ",(0,r.jsx)(O,{children:"gradient"}),"."]}),(0,r.jsxs)($,{children:["Note that ",(0,r.jsx)(O,{children:'variant="gradient"'})," supports only linear gradients with two colors. If you need a more complex gradient, then use"," ",(0,r.jsx)(B,{href:"/styles/styles-api",children:"Styles API"})," to modify"," ",(0,r.jsx)(O,{children:t})," styles."]})]})}function et(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)(O,{children:t})," supports"," ",(0,r.jsx)(B,{href:"/styles/styles-api/",children:"Styles API"}),", you can add styles to any inner element of the component with",(0,r.jsx)(O,{children:"classNames"})," prop. Follow"," ",(0,r.jsx)(B,{href:"/styles/styles-api/",children:"Styles API"})," documentation to learn more."]})]})}var en=n(79797),er=n(90982),eo=n(96242),ei=n(8582),ea=n(17115),es=n(40586);let ec=[{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:"next",name:"next-tailwind-template",link:"https://github.com/hasib-rashid/next-app-tailwind-template",description:"Next.js app router + Mantine + Tailwind template"},{type:"next",name:"next-bun-template",link:"https://github.com/KennethAduan/kenstack-bun-nextjs-mantine/",description:"Next.js app router + Mantine + Bun 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"},{type:"vite",name:"dashboard-template",link:"https://github.com/auronvila/mantine-template",description:"Vite + Redux + i18next + auth + Mantine dashboard template"},{type:"vite",name:"supabase-template",link:"https://github.com/LanVukusic/mantine-supabase-template",description:"Vite + Supabase + Mantine template"},{type:"vite",name:"waku-template",link:"https://github.com/doiska/waku-mantine-starter",description:"Vite + Waku + Mantine template"}],el=[{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 eu=n(42975),ed=n.n(eu);function ep(e){let{type:t,name:n,community:o=!1}=e,i=o?ec:el,a=(n?i.filter(e=>n.includes(e.name)):t?i.filter(e=>e.type===t):i).map(e=>{let t=es.mZ[e.type];return(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Td,{className:ed().iconCell,w:70,children:(0,r.jsx)("div",{className:ed().icon,"data-type":e.type,children:(0,r.jsx)(t,{})})}),(0,r.jsxs)(eo.i.Td,{children:[(0,r.jsx)(ei.x,{fz:"sm",fw:500,children:e.name}),(0,r.jsx)(ei.x,{fz:"xs",children:e.description})]}),(0,r.jsx)(eo.i.Td,{w:146,children:(0,r.jsx)(ea.z,{component:"a",href:e.link,target:"_blank",size:"xs",variant:"default",rightSection:(0,r.jsx)(en.Z,{stroke:1.5,className:ed().externalLinkIcon}),children:"Use template"})})]},e.name)});return(0,r.jsx)(eo.i,{highlightOnHover:!0,verticalSpacing:"sm",layout:"fixed",children:(0,r.jsxs)(eo.i.Tbody,{children:[o&&(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Td,{className:ed().iconCell,w:70,children:(0,r.jsx)("div",{className:ed().icon,"data-type":"empty",children:(0,r.jsx)(er.Z,{stroke:1.5,size:40})})}),(0,r.jsxs)(eo.i.Td,{children:[(0,r.jsx)(ei.x,{fz:"sm",fw:500,children:"Your template here"}),(0,r.jsx)(ei.x,{fz:"xs",children:"Create a template with your stack and share it with the community"})]}),(0,r.jsx)(eo.i.Td,{w:146,children:(0,r.jsx)(ea.z,{component:R(),href:"/submit-template/",size:"xs",children:"Submit template"})})]}),a]})})}function ef(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)(B,{href:"/styles/postcss-preset",children:"PostCSS setup"}),","," ",(0,r.jsx)(B,{href:"/theming/color-schemes",children:"ColorSchemeScript"})," and other essential features. Some templates also include additional features like"," ",(0,r.jsx)(B,{href:"/guides/jest",children:"Jest"}),","," ",(0,r.jsx)(B,{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)(B,{href:"/templates-usage",children:"this page"}),"."]}),(0,r.jsx)(ep,{type:t})]})}function em(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)(O,{children:t})," is an ",(0,r.jsx)("b",{children:"opinionated"})," component built on top of"," ",(0,r.jsx)(B,{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)(B,{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)(B,{href:"/combobox/?e=BasicSelect",children:"the examples page"}),"."]})]})}let eh=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," data={['React', 'Angular']} />;\n}\n"),eg=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"),ev=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"),eb=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 ey(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)(O,{children:t})," ",(0,r.jsx)(O,{children:"data"})," prop accepts data in one of the following formats:"]}),(0,r.jsx)($,{children:"Array of strings:"}),(0,r.jsx)(c,{language:"tsx",code:eh(t)}),n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)($,{children:["Array of object with ",(0,r.jsx)(O,{children:"value"}),", ",(0,r.jsx)(O,{children:"label"})," and optional"," ",(0,r.jsx)(O,{children:"disabled"})," keys:"]}),(0,r.jsx)(c,{language:"tsx",code:eg(t)})]}),(0,r.jsx)($,{children:"Array of groups with string options:"}),(0,r.jsx)(c,{language:"tsx",code:ev(t)}),n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)($,{children:"Array of groups with object options:"}),(0,r.jsx)(c,{language:"tsx",code:eb(t)})]})]})}function ex(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)(O,{children:"limit"})," prop. Note that if you use a custom ",(0,r.jsx)(O,{children:"filter"})," function, you need to implement your own logic to limit the number of options in ",(0,r.jsx)(O,{children:"filter"})]}),(0,r.jsxs)($,{children:["Example of ",(0,r.jsx)(O,{children:t})," with 100 000 options, 5 options are rendered at the same time:"]})]})}function ek(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)(O,{children:t})," filters options by checking if the option label contains input value. You can change this behavior with ",(0,r.jsx)(O,{children:"filter"})," prop.",(0,r.jsx)(O,{children:"filter"})," function receives an object with the following properties as a single argument:",(0,r.jsxs)(z,{children:[(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"options"})," – array of options or options groups, all options are in"," ",(0,r.jsx)(O,{children:"{ value: string; label: string; disabled?: boolean }"})," format"]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"search"})," – current search query"]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"limit"})," – value of ",(0,r.jsx)(O,{children:"limit"})," prop passed to"," ",(0,r.jsx)(O,{children:t})]})]}),(0,r.jsx)($,{children:"Example of a custom filter function that matches options by words instead of letters sequence:"})]})}let ew=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," comboboxProps={{ withinPortal: false }} data={[]} />;\n}\n"),ej=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," comboboxProps={{ zIndex: 1000 }} data={[]} />;\n}\n");function eC(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)(B,{href:"/core/combobox",children:"Combobox"})," props with"," ",(0,r.jsx)(O,{children:"comboboxProps"}),". It is useful when you need to change some of the props that are not exposed by ",(0,r.jsx)(O,{children:t}),", for example"," ",(0,r.jsx)(O,{children:"withinPortal"}),":"]}),(0,r.jsx)(c,{language:"tsx",code:ew(t)}),(0,r.jsx)(b,{id:"change-z-index",children:"Change dropdown z-index"}),(0,r.jsx)(c,{language:"tsx",code:ej(t)})]})}function eS(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)(O,{children:t})," is not compatible with React server components as it requires function as children. To use ",(0,r.jsx)(O,{children:t})," add"," ",(0,r.jsx)(O,{children:'"use client;"'})," at the top of the file."]})]})}let eI=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," wrapperProps={{ 'data-testid': 'wrapper' }} data-testid=\"input\" />;\n}\n");function eM(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)(O,{children:"wrapperProps"}),". In the following example:"]}),(0,r.jsxs)(z,{children:[(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:'data-testid="wrapper"'})," is added to the root element"]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:'data-testid="input"'})," is added to the input element"]})]}),(0,r.jsx)(c,{code:eI(t),language:"tsx"})]})}function eT(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)(O,{children:t})," supports ",(0,r.jsx)(O,{children:"leftSection"})," and"," ",(0,r.jsx)(O,{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)(z,{children:[(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"rightSection"}),"/",(0,r.jsx)(O,{children:"leftSection"})," – React node to render on the corresponding side of input"]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"rightSectionWidth"}),"/",(0,r.jsx)(O,{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)(O,{children:"size"})," prop."]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"rightSectionPointerEvents"}),"/",(0,r.jsx)(O,{children:"leftSectionPointerEvents"})," – controls ",(0,r.jsx)(O,{children:"pointer-events"})," property of the section. If you want to render a non-interactive element, set it to ",(0,r.jsx)(O,{children:"none"})," to pass clicks through to the input."]})]})]})}function eE(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)(O,{children:t})," supports ",(0,r.jsx)(O,{children:"autoContrast"})," prop and"," ",(0,r.jsx)(B,{href:"/theming/theme-object/#autocontrast",children:"theme.autoContrast"}),". If"," ",(0,r.jsx)(O,{children:"autoContrast"})," is set either on ",(0,r.jsx)(O,{children:t})," or on theme, content color will be adjusted to have sufficient contrast with the value specified in"," ",(0,r.jsx)(O,{children:"color"})," prop."]}),(0,r.jsxs)($,{children:["Note that ",(0,r.jsx)(O,{children:"autoContrast"})," feature works only if you use"," ",(0,r.jsx)(O,{children:"color"})," prop to change background color.",n&&(0,r.jsxs)(r.Fragment,{children:[" ",(0,r.jsx)(O,{children:"autoContrast"})," works only with ",(0,r.jsx)(O,{children:"filled"})," variant."]})]})]})}var eP=n(45392),eR=n(25777),eN=n(89793),e_=n(58898);function eF(e){let{label:t,link:n}=e;return(0,r.jsx)(ea.z,{component:"a",href:n,target:"_blank",rightSection:(0,r.jsx)(en.Z,{style:{width:(0,e_.h)(18),height:(0,e_.h)(18)},stroke:1.5}),fullWidth:!0,justify:"space-between",h:50,px:20,radius:"md",children:t})}var eB=n(97654),eA=n(28559);function eL({size:e,style:t,...n}){return(0,r.jsxs)(eA.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",style:[{width:(0,e_.h)(e),height:(0,e_.h)(e)},t],...n,children:[(0,r.jsx)("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"}),(0,r.jsx)("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 eD=n(82106),e$=n(44964),ez=n(70555),eH=n.n(ez);function eO(e){let{yarnScript:t,npmScript:n}=e,[o,i]=(0,eB.I)({key:"script-tab",defaultValue:0});return(0,r.jsx)(e$.Q,{classNames:{root:eH().root},activeTab:o,onTabChange:i,code:[{fileName:"yarn",code:t,language:"bash",icon:(0,r.jsx)(eL,{className:eH().icon,size:16})},{fileName:"npm",code:n,language:"bash",icon:(0,r.jsx)(eD._,{className:eH().icon,size:16})}]})}function eZ(e){let{packages:t,dev:n}=e;return(0,r.jsx)(eO,{yarnScript:"yarn add ".concat(n?"--dev ":"").concat(t),npmScript:"npm install ".concat(n?"--save-dev ":"").concat(t)})}var eV=n(83795);function eG(e){let{data:t}=e,n=t.some(e=>e.condition),o=t.map((e,t)=>(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Td,{children:(0,r.jsx)(eV.T,{children:e.key})}),(0,r.jsx)(eo.i.Td,{children:e.description}),n&&(0,r.jsx)(eo.i.Td,{children:e.condition?(0,r.jsx)(A.E,{children:e.condition}):"–"})]},t));return(0,r.jsx)("div",{style:{overflowX:"auto"},children:(0,r.jsx)("div",{style:{minWidth:(0,e_.h)(500)},children:(0,r.jsxs)(eo.i,{verticalSpacing:"md",children:[(0,r.jsx)(eo.i.Thead,{children:(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Td,{children:"Key"}),(0,r.jsx)(eo.i.Td,{children:"Description"}),n&&(0,r.jsx)(eo.i.Td,{children:"Condition"})]})}),(0,r.jsx)("tbody",{children:o})]})})})}var eW=n(2784),eY=n(95047);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 eK=n(38062),eU=n.n(eK);function eX(e){let{extraPackages:t=[]}=e,[n,o]=(0,eW.useState)(["@mantine/core","@mantine/hooks"]),i=e=>o(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e]),a=eq.map(e=>(0,r.jsxs)(eo.i.Tr,{className:eU().row,onClick:()=>i(e.package),children:[(0,r.jsx)(eo.i.Td,{children:(0,r.jsx)(eY.X,{checked:n.includes(e.package),onChange:()=>{},className:eU().checkbox})}),(0,r.jsx)(eo.i.Td,{children:(0,r.jsx)(A.E,{children:e.package})}),(0,r.jsx)(eo.i.Td,{className:eU().hiddenMobile,children:(0,r.jsx)(ei.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)(eo.i,{mb:"xl",children:[(0,r.jsx)(eo.i.Thead,{children:(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Th,{children:(0,r.jsx)(eY.X,{onChange:()=>o(e=>e.length===eq.length?[]:eq.map(e=>e.package)),checked:n.length>0,indeterminate:n.length0})}),(0,r.jsx)(eo.i.Th,{children:"Package"}),(0,r.jsx)(eo.i.Th,{className:eU().hiddenMobile,children:"Description"})]})}),(0,r.jsx)("tbody",{children:a})]}),(0,r.jsx)($,{children:"Install dependencies:"}),(0,r.jsx)(eZ,{packages:Array.from(new Set(["@mantine/core","@mantine/hooks",...n.reduce((e,t)=>(e.push(...eq.find(e=>e.package===t).dependencies),e),[]),...t])).join(" ")})]})}function eJ(e){let{children:t}=e;return(0,r.jsx)(eP.Z,{components:{Demo:eR.B,GetElementRef:k,Polymorphic:Z,InputFeatures:q,InputAccessibility:J,FlexboxGapSupport:Q,Gradient:ee,StylesApiSelectors:et,DataTable:eN.g,TargetComponent:Y,KeyboardEventsTable:eG,InstallScript:eZ,PackagesInstallation:eX,NpmScript:eO,TemplatesList:ep,GetTemplates:ef,ComboboxDisclaimer:em,ComboboxData:ey,ComboboxLargeData:ex,ComboboxFiltering:ek,ComboboxProps:eC,ServerComponentsIncompatible:eS,ExamplesButton:eF,WrapperProps:eM,InputSections:eT,AutoContrast:eE,pre:l,h1:y(1),h2:y(2),h3:y(3),h4:y(4),h5:y(5),h6:y(6),a:B,p:$,li:H,ul:z,blockquote:E,code:O},children:t})}},20233:function(e,t,n){"use strict";n.d(t,{o:function(){return p},m:function(){return d}});var r=n(52322),o=n(5632),i=n(27111),a=n(58898),s=n(91349),c=n(72278),l=n(15019);let[u,d]=(0,s.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)(c.$,{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..."}})}},47196:function(e,t,n){"use strict";n.d(t,{N:function(){return eR}});var r=n(52322),o=n(9341),i=n(79797),a=n(92536),s=n(40489),c=n(36761),l=n(8582),u=n(50357),d=n(63409),p=n(45909),f=n(93010),m=n(28559),h=n(23205),g=n(893),v=n(90664),b=n(19289),y=n(58092),x=n(68893);let k=(0,n(11306).F)(function({tooltip:e,className:t,"aria-label":n,...o}){return(0,r.jsx)(g.u,{label:e,children:(0,r.jsx)(d.k,{className:(0,s.Z)("m_18a11a80",t),"aria-label":n||e,...o})})});var w="m_83c3d5d1";function j(){let{setColorScheme:e}=(0,y.X)(),t=(0,x.l)("light",{getInitialValueInEffect:!0});return(0,r.jsxs)(k,{onClick:()=>e("light"===t?"dark":"light"),tooltip:`${"dark"===t?"Light":"Dark"} mode`,"aria-label":"Toggle color scheme",children:[(0,r.jsx)(v.Z,{className:(0,s.Z)(w,"m_f4e3c6be"),stroke:1.5}),(0,r.jsx)(b.Z,{className:(0,s.Z)(w,"m_83c188ce"),stroke:1.5})]})}var C=n(40991),S=n(47608),I=n(89027),M=n(58898);function T(){let{toggleDirection:e,dir:t}=(0,I.gm)();return(0,r.jsx)(k,{onClick:()=>e(),tooltip:`${"ltr"===t?"RTL":"LTR"} direction`,children:"rtl"===t?(0,r.jsx)(C.Z,{style:{width:(0,M.h)(22),height:(0,M.h)(22),pointerEvents:"none"},stroke:1.5}):(0,r.jsx)(S.Z,{style:{width:(0,M.h)(22),height:(0,M.h)(22),pointerEvents:"none"},stroke:1.5})})}var E=n(51878);function P({link:e}){return(0,r.jsx)(k,{tooltip:"Discord",component:"a",href:e,className:"m_19df8210",children:(0,r.jsx)(E.D,{size:20})})}var R=n(13444);function N({link:e}){return(0,r.jsx)(k,{tooltip:"Source code",component:"a",href:e,children:(0,r.jsx)(R.E,{size:22})})}var _=n(27111);function F({className:e,...t}){return(0,r.jsx)(d.k,{...t,className:(0,s.Z)("m_6e98493a",e),children:(0,r.jsxs)(f.Z,{gap:"xs",children:[(0,r.jsx)(_.Z,{style:{width:(0,M.h)(15),height:(0,M.h)(15)},stroke:1.5}),(0,r.jsx)(l.x,{fz:"sm",c:"dimmed",pr:80,children:"Search"}),(0,r.jsx)(l.x,{fw:700,className:"m_602cb89e",children:"Ctrl + K"})]})})}function B({onSearch:e,githubLink:t,withDirectionToggle:n=!0,withSearch:o=!0,withGithub:i=!0,withDiscord:a=!0,withColorScheme:s=!0,discordLink:c,...l}){return(0,r.jsx)(g.u.Group,{openDelay:600,closeDelay:100,children:(0,r.jsxs)(f.Z,{gap:"xs",...l,children:[o&&(0,r.jsx)(F,{onClick:e}),a&&(0,r.jsx)(P,{link:c}),i&&(0,r.jsx)(N,{link:t}),n&&(0,r.jsx)(T,{}),s&&(0,r.jsx)(j,{})]})})}function A({onSearch:e}){return(0,r.jsx)(k,{onClick:()=>e(),tooltip:"Search",children:(0,r.jsx)(_.Z,{style:{width:(0,M.h)(22),height:(0,M.h)(22)},stroke:1.5})})}let L=[{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 D=n(10962),$=n(69351),z=n(20233),H=n(36528),O=n.n(H);function Z(e){let{navbarOpened:t,onNavbarToggle:n,headerControlsProps:o}=e,g=L.map(e=>(0,r.jsxs)(c.v.Item,{component:"a",href:e.link,target:"_blank",rightSection:(0,r.jsx)(i.Z,{className:O().versionExternalIcon,stroke:1.5}),children:[(0,r.jsx)("b",{children:e.v})," ",(0,r.jsxs)(l.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)(O().header,u.Z.classNames.fullWidth),"data-desktop":!0,children:[(0,r.jsxs)("div",{className:O().logo,children:[(0,r.jsx)($.T,{}),(0,r.jsxs)(c.v,{width:180,withinPortal:!1,children:[(0,r.jsx)(c.v.Target,{children:(0,r.jsx)(d.k,{children:(0,r.jsxs)(p.E,{fw:"bold",className:O().version,children:[(0,r.jsx)("span",{children:"7.10.2"}),(0,r.jsx)(a.Z,{className:O().versionChevron,stroke:1.5})]})})}),(0,r.jsx)(c.v.Dropdown,{children:g})]})]}),(0,r.jsx)(B,{className:O().controls,onSearch:z.m.open,githubLink:"https://github.com/mantinedev/mantine",discordLink:D.$.discordLink,...o})]}),(0,r.jsx)("header",{className:(0,s.Z)(O().header,u.Z.classNames.fullWidth),"data-mobile":!0,children:(0,r.jsxs)(f.Z,{justify:"space-between",w:"100%",wrap:"nowrap",children:[(0,r.jsx)(m.x,{miw:80,children:(0,r.jsx)(h.O,{opened:t,onClick:n,size:"sm","aria-label":"Toggle navbar"})}),(0,r.jsx)($.T,{}),(0,r.jsxs)(f.Z,{gap:"sm",children:[(0,r.jsx)(A,{onSearch:z.m.open}),(0,r.jsx)(j,{})]})]})})]})}var V=n(73681),G=(0,V.Z)("outline","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"}]]),W=n(59443),Y=(0,V.Z)("outline","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"}]]),q=(0,V.Z)("outline","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,V.Z)("outline","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"}]]),U=(0,V.Z)("outline","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"}]]),X=n(38405),J=n(15019),Q=n(2784),ee=n(39097),et=n.n(ee),en=n(5632),er=(0,V.Z)("outline","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(97189),ei=(0,V.Z)("outline","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,V.Z)("outline","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"}]]),es=n(4680),ec=(0,V.Z)("outline","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(59660),eu=n(43300),ed=(0,V.Z)("outline","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,V.Z)("outline","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"}]]),ef=(0,V.Z)("outline","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"}]]),em=(0,V.Z)("outline","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"}]]),eh=(0,V.Z)("outline","selector","IconSelector",[["path",{d:"M8 9l4 -4l4 4",key:"svg-0"}],["path",{d:"M16 15l-4 4l-4 -4",key:"svg-1"}]]);let eg={"State management":er,"UI and Dom":eo.Z,Utilities:ei,Lifecycle:ea,"Data display":es.Z,overlays:ec,navigation:el.Z,inputs:eo.Z,misc:eu.Z,feedback:ed,typography:ep,layout:ef,buttons:em,combobox:eh};var ev=n(10968),eb=n.n(ev);function ey(e){return"category"in e}function ex(e,t){return e.pages.some(e=>ey(e)?e.pages.some(e=>e.slug===t):e.slug===t)}function ek(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:eb().link,onClick:n,ref:o,children:t.title})}function ew(e){let{data:t,onNavbarClose:n}=e,o=(0,en.useRouter)(),[i,s]=(0,Q.useState)(ex(t,o.pathname)),c=(0,Q.useRef)({}),u=e=>{let t=c.current[e];if(!t)return;let n=window.innerHeight,{top:r,bottom:o}=t.getBoundingClientRect();(r<60||o>n)&&t.scrollIntoView({block:"center"})};(0,Q.useEffect)(()=>{ex(t,o.pathname)&&(s(!0),setTimeout(()=>u(o.pathname),10))},[o.pathname]);let p=t.pages.map(e=>{if(ey(e)){let t=e.pages.sort((e,t)=>e.title.localeCompare(t.title)).map(e=>(0,r.jsx)(ek,{data:e,onNavbarClose:n,linkRef:t=>{c.current[e.slug]=t}},e.slug)),o=eg[e.category];return(0,r.jsxs)("div",{className:eb().category,children:[(0,r.jsxs)(l.x,{className:eb().categoryTitle,children:[(0,r.jsx)(o,{className:eb().categoryIcon}),e.category]}),t]},e.category)}return(0,r.jsx)(ek,{data:e,onNavbarClose:n,linkRef:t=>{c.current[e.slug]=t}},e.slug)});return(0,r.jsxs)(m.x,{className:eb().group,mod:{opened:i},children:[(0,r.jsxs)(d.k,{className:eb().header,onClick:()=>s(e=>!e),children:[(0,r.jsx)(a.Z,{className:eb().chevron,"data-collapsed":!i||void 0}),(0,r.jsx)(l.x,{className:eb().title,children:t.group.replace("-"," ")})]}),i&&p]})}var ej=n(80275),eC=n.n(ej);function eS(e){let{href:t,external:n,children:o,icon:a,onNavbarClose:s}=e,c=(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:c.pathname===t},onClick:s,children:[(0,r.jsx)("span",{className:eC().icon,children:a}),(0,r.jsx)("span",{className:eC().label,children:o}),n&&(0,r.jsx)("span",{className:eC().external,children:(0,r.jsx)(i.Z,{size:14})})]})}var eI=n(3968),eM=n.n(eI);function eT(e){let{navbarOpened:t,onNavbarClose:n,mobileNavbarOnly:o}=e,{dir:i}=(0,I.gm)(),a=J.kl.map(e=>(0,r.jsx)(ew,{data:e,onNavbarClose:n},e.group));return(0,r.jsx)(m.x,{id:"mantine-navbar",component:"nav",className:(0,s.Z)(eM().navbar,{[u.Z.classNames.zeroRight]:"rtl"===i}),mod:{hidden:!t,"mobile-only":o},children:(0,r.jsx)(X.x,{className:eM().scrollarea,type:"never",offsetScrollbars:!1,children:(0,r.jsxs)("div",{className:eM().body,children:[(0,r.jsx)(eS,{icon:(0,r.jsx)(G,{style:{width:(0,M.h)(25),height:(0,M.h)(25)},stroke:1.5}),href:"/getting-started",onNavbarClose:n,children:"Getting started"}),(0,r.jsx)(eS,{icon:(0,r.jsx)(W.Z,{style:{width:(0,M.h)(25),height:(0,M.h)(25)},stroke:1.5}),href:"/about",onNavbarClose:n,children:"About Mantine"}),(0,r.jsx)(eS,{icon:(0,r.jsx)(Y,{style:{width:(0,M.h)(25),height:(0,M.h)(25)},stroke:1.5}),href:"/overview",onNavbarClose:n,children:"API Overview"}),(0,r.jsx)(eS,{icon:(0,r.jsx)(q,{style:{width:(0,M.h)(25),height:(0,M.h)(25)},stroke:1.5}),href:"/contribute",onNavbarClose:n,children:"Contribute"}),(0,r.jsx)(eS,{icon:(0,r.jsx)(K,{style:{width:(0,M.h)(22),height:(0,M.h)(22)},stroke:1.5}),href:"/colors-generator",onNavbarClose:n,children:"Colors generator"}),(0,r.jsx)(eS,{external:!0,icon:(0,r.jsx)(U,{style:{width:(0,M.h)(22),height:(0,M.h)(22)},stroke:1.5}),href:"https://help.mantine.dev",onNavbarClose:n,children:"Help center"}),(0,r.jsx)(eS,{external:!0,icon:(0,r.jsx)(W.Z,{style:{width:(0,M.h)(22),height:(0,M.h)(22)},stroke:1.5}),href:"https://ui.mantine.dev",onNavbarClose:n,children:"Mantine UI"}),(0,r.jsx)("div",{className:eM().groups,children:a})]})})})}var eE=n(29475),eP=n.n(eE);function eR(e){let{children:t,withNavbar:n=!0,mobileNavbarOnly:i=!1,navbarOpened:a,onNavbarOpenedChange:s,headerControlsProps:c}=e,[l,u]=(0,o.C)({value:a,defaultValue:!1,finalValue:!1,onChange:s});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(Z,{navbarOpened:l,onNavbarToggle:()=>u(!l),headerControlsProps:c}),n&&(0,r.jsx)(eT,{navbarOpened:l,onNavbarClose:()=>u(!1),mobileNavbarOnly:i}),(0,r.jsx)("main",{className:eP().main,id:"mdx",style:{paddingLeft:n&&!i?void 0:0,paddingRight:n&&!i?void 0:0},children:t})]})}},40586:function(e,t,n){"use strict";n.d(t,{mZ:function(){return l}});var r=n(52322),o=n(28559),i=n(58898),a=n(42066),s=n.n(a),c=n(2784);let l={next:function(e){let{size:t=40,...n}=e;return(0,r.jsx)(o.x,{component:"svg",__vars:{"--icon-size":(0,i.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,a=(0,c.useId)(),l="vite-a-".concat(a),u="vite-b-".concat(a);return(0,r.jsxs)(o.x,{__vars:{"--icon-size":(0,i.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)(o.x,{__vars:{"--icon-size":(0,i.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)(o.x,{__vars:{"--icon-size":(0,i.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)(o.x,{component:"svg",__vars:{"--icon-size":(0,i.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"})})}}},15019:function(e,t,n){"use strict";n.d(t,{us:function(){return a},kl:function(){return s},YU:function(){return c},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"},Changelog760:{title:"Version v7.6.0",slug:"/changelog/7-6-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.6.0",date:"February 27th, 2024"},Changelog770:{title:"Version v7.7.0",slug:"/changelog/7-7-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.7.0",date:"March 26th, 2024"},Changelog780:{title:"Version v7.8.0",slug:"/changelog/7-8-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.8.0",date:"April 12th, 2024"},Changelog790:{title:"Version v7.9.0",slug:"/changelog/7-9-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.9.0",date:"May 2nd, 2024"},Changelog7100:{title:"Version v7.10.0",slug:"/changelog/7-10-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.10.0",date:"May 23rd, 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:"use-element-size",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"),useMutationObserver:o("useMutationObserver","Subscribe to changes being made to the DOM tree"),useMounted:o("useMounted","Returns true if the component is mounted"),useStateHistory:o("useStateHistory","Move back/forward in state history"),useOrientation:o("useOrientation","Detects device orientation and subscribe to its changes"),useFetch:o("useFetch","Fetch data with built-in loading and error states"),useIsFirstRender:o("useIsFirstRender","Detects if the component is rendered for the first time"),useThrottledState:o("useThrottledState","Throttles state changes"),useThrottledValue:o("useThrottledValue","Throttles value changes"),useThrottledCallback:o("useThrottledCallback","Throttles function calls"),useDebouncedCallback:o("useDebouncedCallback","Debounces function calls"),useSet:o("useSet","Use Set as React state"),useMap:o("useMap","Use Map as React state")},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",search:"A list of all Mantine CSS variables generated by default CSS variables resolver",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},Emotion:{title:"Usage with Emotion",slug:"/styles/emotion",search:"sx props, createStyles, emotion integration",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","CheckboxIndicator","CheckboxCard"],styles:["Checkbox","CheckboxGroup","CheckboxIndicator","CheckboxCard"],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","RadioIndicator","RadioCard"],styles:["Radio","RadioGroup","RadioIndicator","RadioCard"],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"},FloatingIndicator:{title:"FloatingIndicator",package:"@mantine/core",slug:"/core/floating-indicator",props:["FloatingIndicator"],styles:["FloatingIndicator"],description:"Display a floating indicator over a group of elements",import:"import { FloatingIndicator } from '@mantine/core';",source:"@mantine/core/src/components/FloatingIndicator/FloatingIndicator.tsx",docs:"core/floating-indicator.mdx"},Tree:{title:"Tree",package:"@mantine/core",slug:"/core/tree",props:["Tree"],styles:["Tree"],description:"Display a Tree structure",import:"import { Tree } from '@mantine/core';",source:"@mantine/core/src/components/Tree/Tree.tsx",docs:"core/tree.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"},formUncontrolled:{title:"Uncontrolled mode",package:"@mantine/form",slug:"/form/uncontrolled",description:"use-form uncontrolled mode to improve performance",docs:"form/uncontrolled.mdx"},useField:{title:"use-field",package:"@mantine/form",slug:"/form/use-field",description:"use-field hook – manage single field state",docs:"form/use-field.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"},RadarChart:{title:"RadarChart",props:["RadarChart"],styles:["RadarChart"],package:"@mantine/charts",slug:"/charts/radar-chart",description:"Radar chart component",import:"import { RadarChart } from '@mantine/charts';",source:"@mantine/charts/src/RadarChart/RadarChart.tsx",docs:"charts/radar-chart.mdx"},ScatterChart:{title:"ScatterChart",props:["ScatterChart"],styles:["ScatterChart"],package:"@mantine/charts",slug:"/charts/scatter-chart",description:"Radar chart component",import:"import { ScatterChart } from '@mantine/charts';",source:"@mantine/charts/src/ScatterChart/ScatterChart.tsx",docs:"charts/scatter-chart.mdx"}},s=[{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.Emotion,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.useMutationObserver,a.useScrollIntoView,a.useViewportSize,a.useWindowEvent,a.useWindowScroll,a.useInViewport,a.useOrientation]},{category:"State management",pages:[a.useCounter,a.useDebouncedState,a.useDebouncedValue,a.useDebouncedCallback,a.useThrottledState,a.useThrottledValue,a.useThrottledCallback,a.useDisclosure,a.useId,a.useInputState,a.useListState,a.useLocalStorage,a.usePrevious,a.useQueue,a.useSetState,a.useToggle,a.useUncontrolled,a.useValidatedState,a.usePagination,a.useStateHistory,a.useMap,a.useSet]},{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,a.useFetch]},{category:"Lifecycle",pages:[a.useDidUpdate,a.useForceUpdate,a.useIsomorphicEffect,a.useLogger,a.useShallowEffect,a.useMounted,a.useIsFirstRender]}]},{group:"mantine-form",pages:[a.useForm,a.useField,a.formUncontrolled,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,a.Tree]},{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,a.FloatingIndicator]},{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.RadarChart,a.ScatterChart,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.Changelog7100,a.Changelog790,a.Changelog780,a.Changelog770,a.Changelog760,a.Changelog750,a.Changelog740,a.Changelog730,a.Changelog720,a.Changelog710,a.Changelog700,a.AllReleases]}],c=s.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=[...c,...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),[])},64270:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return eN}});var r=n(52322);n(21229),n(31809),n(51377),n(85784),n(55504),n(82521),n(27771),n(47009),n(19406),n(96508),n(31675),n(33465),n(14517),n(70459),n(89355);var o=n(97729),i=n.n(o),a=n(89027),s=n(15759),c=n(29021),l=n(97654),u=n(78297),d=n(2784);function p(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 f(e,t){return(f=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,f(e,t)}n(13980);var h=n(28316),g={disabled:!1},v=d.createContext(null),b="unmounted",y="exited",x="entering",k="entered",w="exiting",j=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=y,r.appearStatus=x):o=k:o=t.unmountOnExit||t.mountOnEnter?b:y,r.state={status:o},r.nextCallback=null,r}m(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&t.status===b?{status:y}: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!==x&&n!==k&&(t=x):(n===x||n===k)&&(t=w)}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===x){if(this.props.unmountOnExit||this.props.mountOnEnter){var n=this.props.nodeRef?this.props.nodeRef.current:h.findDOMNode(this);n&&n.scrollTop}this.performEnter(e)}else this.performExit()}else this.props.unmountOnExit&&this.state.status===y&&this.setState({status:b})},n.performEnter=function(e){var t=this,n=this.props.enter,r=this.context?this.context.isMounting:e,o=this.props.nodeRef?[r]:[h.findDOMNode(this),r],i=o[0],a=o[1],s=this.getTimeouts(),c=r?s.appear:s.enter;if(!e&&!n||g.disabled){this.safeSetState({status:k},function(){t.props.onEntered(i)});return}this.props.onEnter(i,a),this.safeSetState({status:x},function(){t.props.onEntering(i,a),t.onTransitionEnd(c,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:h.findDOMNode(this);if(!t||g.disabled){this.safeSetState({status:y},function(){e.props.onExited(r)});return}this.props.onExit(r),this.safeSetState({status:w},function(){e.props.onExiting(r),e.onTransitionEnd(n.exit,function(){e.safeSetState({status:y},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:h.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===b)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,p(t,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]));return d.createElement(v.Provider,{value:null},"function"==typeof n?n(e,r):d.cloneElement(d.Children.only(n),r))},t}(d.Component);function C(){}function S(){return(S=Object.assign||function(e){for(var t=1;t{var a;let{autoClose:s,message:c,...l}=e,u="number"==typeof(a=e.autoClose)?a:!1!==a&&!1!==n&&n,p=(0,d.useRef)(),f=()=>window.clearTimeout(p.current),m=()=>{t(e.id),f()},h=()=>{"number"==typeof u&&(p.current=window.setTimeout(m,u))};return(0,d.useEffect)(()=>{e.onOpen?.(e)},[]),(0,d.useEffect)(()=>(h(),f),[u]),(0,r.jsx)(V.P,{...o,...l,onClose:m,ref:i,onMouseEnter:f,onMouseLeave:h,children:c})});G.displayName="@mantine/notifications/NotificationContainer";var W=n(60048),Y={root:"m_b37d9ac7",notification:"m_5ed0edd0"};let q={position:"bottom-right",autoClose:4e3,transitionDuration:250,containerWidth:440,notificationMaxHeight:200,limit:5,zIndex:(0,P.w)("overlay"),store:W.Ps,withinPortal:!0},K=(0,R.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,N.h)(r)}}}),U=(0,_.d)((e,t)=>{let n=(0,F.w)("Notifications",q,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,position:u,autoClose:p,transitionDuration:f,containerWidth:m,notificationMaxHeight:h,limit:g,zIndex:v,store:b,portalProps:y,withinPortal:x,...k}=n,w=(0,B.rZ)(),C=(0,W.zn)(b),S=(0,$.N)(),I=(0,z.J)(),M=(0,d.useRef)({}),T=(0,d.useRef)(0),P=w.respectReducedMotion&&I?1:f,R=(0,A.y)({name:"Notifications",classes:Y,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:K});(0,d.useEffect)(()=>{b?.updateState(e=>({...e,limit:g||5}))},[g]),(0,H.l)(()=>{C.notifications.length>T.current&&setTimeout(()=>S(),0),T.current=C.notifications.length},[C.notifications]);let N=C.notifications.map(({style:e,...t})=>(0,r.jsx)(j,{timeout:P,onEnter:()=>M.current[t.id].offsetHeight,nodeRef:{current:M.current[t.id]},children:n=>(0,r.jsx)(G,{ref:e=>{M.current[t.id]=e},data:t,onHide:e=>(0,W.yK)(e,b),autoClose:p,...R("notification",{style:{...function({state:e,maxHeight:t,position:n,transitionDuration:r}){let[o,i]=n.split("-"),a="center"===i?`${o}-center`:i,s={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"},c={opacity:1,transform:Z[a]},l={opacity:0,maxHeight:0,transform:O[a]};return{...s,...{entering:c,entered:c,exiting:l,exited:l}[e]}}({state:n,position:u,transitionDuration:P,maxHeight:h}),...e}})})},t.id));return(0,r.jsx)(L.q,{withinPortal:x,...y,children:(0,r.jsx)(D.x,{...R("root"),ref:t,...k,children:(0,r.jsx)(E,{children:N})})})});U.classes=Y,U.displayName="@mantine/notifications/Notifications",U.show=W.N9.show,U.hide=W.N9.hide,U.update=W.N9.update,U.clean=W.N9.clean,U.cleanQueue=W.N9.cleanQueue,U.updateState=W.N9.updateState;var X=n(70980),J=n(45847),Q=n.n(J);function ee(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(Q(),{strategy:"afterInteractive",src:"https://www.googletagmanager.com/gtag/js?id=G-4Z4NNVLRH5"}),(0,r.jsx)(Q(),{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 et=n(5632),en=n(58092),er=n(68893);let eo=["/combobox"];function ei(){let e=(0,et.useRouter)(),{setColorScheme:t}=(0,en.X)(),{toggleDirection:n}=(0,a.gm)(),o=(0,er.l)("light");return(0,u.A)([["mod + J",()=>t("light"===o?"dark":"light")],["mod + shift + L",()=>!eo.includes(e.pathname)&&n()]],[]),(0,r.jsx)(r.Fragment,{children:null})}var ea=n(52905),es=n(8582),ec=n(17115),el=n(78222),eu=n(73533),ed=n(93010);let ep=(0,d.createContext)(null);function ef({id:e,cancelProps:t,confirmProps:n,labels:o={cancel:"",confirm:""},closeOnConfirm:i=!0,closeOnCancel:a=!0,groupProps:s,onCancel:c,onConfirm:l,children:u}){let{cancel:p,confirm:f}=o,m=function(){let e=(0,d.useContext)(ep);if(!e)throw Error("[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component");return e}();return(0,r.jsxs)(r.Fragment,{children:[u&&(0,r.jsx)(D.x,{mb:"md",children:u}),(0,r.jsxs)(ed.Z,{mt:u?0:"md",justify:"flex-end",...s,children:[(0,r.jsx)(ec.z,{variant:"default",...t,onClick:n=>{"function"==typeof t?.onClick&&t?.onClick(n),"function"==typeof c&&c(),a&&m.closeModal(e)},children:t?.children||p}),(0,r.jsx)(ec.z,{...n,onClick:t=>{"function"==typeof n?.onClick&&n?.onClick(t),"function"==typeof l&&l(),i&&m.closeModal(e)},children:n?.children||f})]})]})}ep.displayName="@mantine/modals/ModalsContext";var em=n(2807);function eh(e,t){t&&"confirm"===e.type&&e.props.onCancel?.(),e.props.onClose?.()}function eg(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;eh(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=>{eh(e,t.canceled)}),{current:e.current,modals:[]};default:return e}}function ev({children:e,modalProps:t,labels:n,modals:o}){let[i,a]=(0,d.useReducer)(eg,{modals:[],current:null}),s=(0,d.useRef)(i);s.current=i;let c=(0,d.useCallback)(e=>{a({type:"CLOSE_ALL",canceled:e})},[s,a]),l=(0,d.useCallback)(({modalId:e,...t})=>{let n=e||(0,eu.k)();return a({type:"OPEN",modal:{id:n,type:"content",props:t}}),n},[a]),u=(0,d.useCallback)(({modalId:e,...t})=>{let n=e||(0,eu.k)();return a({type:"OPEN",modal:{id:n,type:"confirm",props:t}}),n},[a]),p=(0,d.useCallback)((e,{modalId:t,...n})=>{let r=t||(0,eu.k)();return a({type:"OPEN",modal:{id:r,type:"context",props:n,ctx:e}}),r},[a]),f=(0,d.useCallback)((e,t)=>{a({type:"CLOSE",modalId:e,canceled:t})},[s,a]);(0,em.Ro)({openModal:l,openConfirmModal:u,openContextModal:({modal:e,...t})=>p(e,t),closeModal:f,closeContextModal:f,closeAllModals:c});let m={modals:i.modals,openModal:l,openConfirmModal:u,openContextModal:p,closeModal:f,closeContextModal:f,closeAll:c},{modalProps:h,content:g}=(()=>{let e=s.current.current;switch(e?.type){case"context":{let{innerProps:t,...n}=e.props,i=o[e.ctx];return{modalProps:n,content:(0,r.jsx)(i,{innerProps:t,context:m,id:e.id})}}case"confirm":{let{modalProps:t,confirmProps:o}=function(e){if(!e)return{confirmProps:{},modalProps:{}};let{id:t,children:n,onCancel:r,onConfirm:o,closeOnConfirm:i,closeOnCancel:a,cancelProps:s,confirmProps:c,groupProps:l,labels:u,...d}=e;return{confirmProps:{id:t,children:n,onCancel:r,onConfirm:o,closeOnConfirm:i,closeOnCancel:a,cancelProps:s,confirmProps:c,groupProps:l,labels:u},modalProps:{id:t,...d}}}(e.props);return{modalProps:t,content:(0,r.jsx)(ef,{...o,id:e.id,labels:e.props.labels||n})}}case"content":{let{children:t,...n}=e.props;return{modalProps:n,content:(0,r.jsx)(r.Fragment,{children:t})}}default:return{modalProps:{},content:null}}})();return(0,r.jsxs)(ep.Provider,{value:m,children:[(0,r.jsx)(el.u,{zIndex:(0,P.w)("modal")+1,...t,...h,opened:i.modals.length>0,onClose:()=>f(i.current?.id),children:g}),e]})}let eb=e=>{let{context:t,id:n,innerProps:o}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(es.x,{size:"sm",children:o.modalBody}),(0,r.jsx)(ec.z,{fullWidth:!0,mt:"md",onClick:()=>t.closeModal(n),children:"Close modal"})]})};function ey(e){let{children:t}=e;return(0,r.jsx)(ev,{labels:{confirm:"Confirm",cancel:"Cancel"},modals:{demonstration:eb},children:t})}var ex=n(20233),ek=n(47196),ew=n(87744),ej=n(99469),eC=n.n(ej);function eS(){return(0,r.jsx)(i(),{children:(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:":root{ --docs-font-primary: ".concat(eC().style.fontFamily,", ").concat(ew.t.fontFamily,"; }")}})})}var eI=n(60231),eM=n(9065);let eT=(0,eI.j)({fontFamilyMonospace:"Menlo, Monaco, ".concat(ew.t.fontFamilyMonospace),colors:{virtual:(0,eM.R)({name:"virtual",dark:"pink",light:"cyan"}),"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"]}}),eE=(0,n(2107).Z)({key:"css"});n(59739);let eP=["/","/combobox","/app-shell"];async function eR(){let{getHighlighter:e}=await n.e(92198).then(n.bind(n,92198));return await e({langs:["tsx","scss","html","bash","json"],themes:[]})}function eN(e){let{Component:t,pageProps:n,router:o}=e,d=!eP.includes(o.pathname),[p,f]=(0,l.I)({key:"mantine-navbar-opened",defaultValue:!0});return(0,u.A)([["mod + alt + N",()=>f(!p)]]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(i(),{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)(ee,{}),(0,r.jsx)(eS,{}),(0,r.jsx)(a._9,{initialDirection:"ltr",detectDirection:!1,children:(0,r.jsx)(c.Nl,{cache:eE,children:(0,r.jsx)(s.M,{theme:eT,defaultColorScheme:"light",children:(0,r.jsxs)(X.U,{loadShiki:eR,children:[(0,r.jsx)(ex.o,{}),(0,r.jsx)(U,{}),(0,r.jsx)(ey,{children:(0,r.jsxs)(ea.Cu,{children:[(0,r.jsx)(ei,{}),d?(0,r.jsx)(ek.N,{withNavbar:p,children:(0,r.jsx)(t,{...n})}):(0,r.jsx)(t,{...n})]})})]})})})})]})}},94684:function(e,t){"use strict";var n,r,o,i;Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var n in t)Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}(t,{ACTION_FAST_REFRESH:function(){return d},ACTION_NAVIGATE:function(){return s},ACTION_PREFETCH:function(){return u},ACTION_REFRESH:function(){return a},ACTION_RESTORE:function(){return c},ACTION_SERVER_ACTION:function(){return p},ACTION_SERVER_PATCH:function(){return l},PrefetchCacheEntryStatus:function(){return r},PrefetchKind:function(){return n},isThenable:function(){return f}});let a="refresh",s="navigate",c="restore",l="server-patch",u="prefetch",d="fast-refresh",p="server-action";function f(e){return e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then}(o=n||(n={})).AUTO="auto",o.FULL="full",o.TEMPORARY="temporary",(i=r||(r={})).fresh="fresh",i.reusable="reusable",i.expired="expired",i.stale="stale",("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)},8250: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(62476),("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)},26713:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return x}});let r=n(43219),o=n(52322),i=r._(n(2784)),a=n(98047),s=n(26790),c=n(47973),l=n(49274),u=n(78074),d=n(17942),p=n(1586),f=n(70514),m=n(8250),h=n(87891),g=n(94684),v=new Set;function b(e,t,n,r,o,i){if(i||(0,s.isLocalURL)(t)){if(!r.bypassPrefetchedCheck){let o=t+"%"+n+"%"+(void 0!==r.locale?r.locale:"locale"in e?e.locale:void 0);if(v.has(o))return;v.add(o)}Promise.resolve(i?e.prefetch(t,o):e.prefetch(t,n,r)).catch(e=>{})}}function y(e){return"string"==typeof e?e:(0,c.formatUrl)(e)}let x=i.default.forwardRef(function(e,t){let n,r;let{href:c,as:v,children:x,prefetch:k=null,passHref:w,replace:j,shallow:C,scroll:S,locale:I,onClick:M,onMouseEnter:T,onTouchStart:E,legacyBehavior:P=!1,...R}=e;n=x,P&&("string"==typeof n||"number"==typeof n)&&(n=(0,o.jsx)("a",{children:n}));let N=i.default.useContext(d.RouterContext),_=i.default.useContext(p.AppRouterContext),F=null!=N?N:_,B=!N,A=!1!==k,L=null===k?g.PrefetchKind.AUTO:g.PrefetchKind.FULL,{href:D,as:$}=i.default.useMemo(()=>{if(!N){let e=y(c);return{href:e,as:v?y(v):e}}let[e,t]=(0,a.resolveHref)(N,c,!0);return{href:e,as:v?(0,a.resolveHref)(N,v):t||e}},[N,c,v]),z=i.default.useRef(D),H=i.default.useRef($);P&&(r=i.default.Children.only(n));let O=P?r&&"object"==typeof r&&r.ref:t,[Z,V,G]=(0,f.useIntersection)({rootMargin:"200px"}),W=i.default.useCallback(e=>{(H.current!==$||z.current!==D)&&(G(),H.current=$,z.current=D),Z(e),O&&("function"==typeof O?O(e):"object"==typeof O&&(O.current=e))},[$,O,D,G,Z]);i.default.useEffect(()=>{F&&V&&A&&b(F,D,$,{locale:I},{kind:L},B)},[$,D,V,I,A,null==N?void 0:N.locale,F,B,L]);let Y={ref:W,onClick(e){P||"function"!=typeof M||M(e),P&&r.props&&"function"==typeof r.props.onClick&&r.props.onClick(e),F&&!e.defaultPrevented&&function(e,t,n,r,o,a,c,l,u){let{nodeName:d}=e.currentTarget;if("A"===d.toUpperCase()&&(function(e){let t=e.currentTarget.getAttribute("target");return t&&"_self"!==t||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||!u&&!(0,s.isLocalURL)(n)))return;e.preventDefault();let p=()=>{let e=null==c||c;"beforePopState"in t?t[o?"replace":"push"](n,r,{shallow:a,locale:l,scroll:e}):t[o?"replace":"push"](r||n,{scroll:e})};u?i.default.startTransition(p):p()}(e,F,D,$,j,C,S,I,B)},onMouseEnter(e){P||"function"!=typeof T||T(e),P&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),F&&(A||!B)&&b(F,D,$,{locale:I,priority:!0,bypassPrefetchedCheck:!0},{kind:L},B)},onTouchStart:function(e){P||"function"!=typeof E||E(e),P&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),F&&(A||!B)&&b(F,D,$,{locale:I,priority:!0,bypassPrefetchedCheck:!0},{kind:L},B)}};if((0,l.isAbsoluteUrl)($))Y.href=$;else if(!P||w||"a"===r.type&&!("href"in r.props)){let e=void 0!==I?I:null==N?void 0:N.locale,t=(null==N?void 0:N.isLocaleDomain)&&(0,m.getDomainLocale)($,e,null==N?void 0:N.locales,null==N?void 0:N.domainLocales);Y.href=t||(0,h.addBasePath)((0,u.addLocale)($,e,null==N?void 0:N.defaultLocale))}return P?i.default.cloneElement(r,Y):(0,o.jsx)("a",{...R,...Y,children:n})});("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)},70514:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"useIntersection",{enumerable:!0,get:function(){return c}});let r=n(2784),o=n(25132),i="function"==typeof IntersectionObserver,a=new Map,s=[];function c(e){let{rootRef:t,rootMargin:n,disabled:c}=e,l=c||!i,[u,d]=(0,r.useState)(!1),p=(0,r.useRef)(null),f=(0,r.useCallback)(e=>{p.current=e},[]);return(0,r.useEffect)(()=>{if(i){if(l||u)return;let e=p.current;if(e&&e.tagName)return 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=s.find(e=>e.root===n.root&&e.margin===n.margin);if(r&&(t=a.get(r)))return t;let o=new Map;return t={id:n,observer:new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e),elements:o},s.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=s.findIndex(e=>e.root===r.root&&e.margin===r.margin);e>-1&&s.splice(e,1)}}}(e,e=>e&&d(e),{root:null==t?void 0:t.current,rootMargin:n})}else if(!u){let e=(0,o.requestIdleCallback)(()=>d(!0));return()=>(0,o.cancelIdleCallback)(e)}},[l,n,t,u,p.current]),[f,u,(0,r.useCallback)(()=>{d(!1)},[])]}("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)},89355:function(){},47009:function(){},96508:function(){},85784:function(){},21229:function(){},31809:function(){},55504:function(){},51377:function(){},82521:function(){},27771:function(){},19406:function(){},31675:function(){},14517:function(){},33465:function(){},70459:function(){},59739:function(){},99469:function(e){e.exports={style:{fontFamily:"'__greycliffCF_0e41f6', '__greycliffCF_Fallback_0e41f6'"},className:"__className_0e41f6"}},5874:function(e){e.exports={section:"DocsSection_section__o2plc"}},41601:function(e){e.exports={logo:"Logo_logo__c5nVK"}},73057:function(e){e.exports={root:"MdxInfo_root__KVEKQ",icon:"MdxInfo_icon__cOv9p"}},23233:function(e){e.exports={link:"MdxLink_link__DWoQo"}},70555:function(e){e.exports={root:"MdxNpmScript_root__wk_w9",icon:"MdxNpmScript_icon___9BYF"}},38062:function(e){e.exports={row:"MdxPackagesInstallation_row__4jECZ",checkbox:"MdxPackagesInstallation_checkbox__jBi9e",hiddenMobile:"MdxPackagesInstallation_hiddenMobile__VJhVH"}},49603:function(e){e.exports={code:"MdxPre_code__tSup0"}},42975:function(e){e.exports={externalLinkIcon:"MdxTemplatesList_externalLinkIcon___In9x",icon:"MdxTemplatesList_icon__759wE",iconCell:"MdxTemplatesList_iconCell__t22nh"}},77689: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"}},32481:function(e){e.exports={paragraph:"MdxTypography_paragraph__XriB5",ul:"MdxTypography_ul__gGDJt",li:"MdxTypography_li__gO4GM"}},36528:function(e){e.exports={header:"Header_header__KDGDv",logo:"Header_logo__DqpNC",version:"Header_version__jVWmz",versionChevron:"Header_versionChevron__t4WMy",versionExternalIcon:"Header_versionExternalIcon___plOU"}},3968:function(e){e.exports={navbar:"Navbar_navbar__LAEds",scrollarea:"Navbar_scrollarea__sbhtk",body:"Navbar_body__8M1M_",groups:"Navbar_groups__4j6NE"}},10968: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"}},80275:function(e){e.exports={link:"NavbarMainLink_link__eG_24",icon:"NavbarMainLink_icon__ePqig",external:"NavbarMainLink_external__Ko9pq",label:"NavbarMainLink_label__gBi5w"}},29475:function(e){e.exports={main:"Shell_main__o5vhe"}},42066:function(e){e.exports={nextIcon:"icons_nextIcon__ZCrZ1",icon:"icons_icon__yq4dY"}},97729:function(e,t,n){e.exports=n(50044)},39097:function(e,t,n){e.exports=n(26713)},5632:function(e,t,n){e.exports=n(69442)},45847:function(e,t,n){e.exports=n(55706)},34406: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 s(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 c=[],l=!1,u=-1;function d(){l&&r&&(l=!1,r.length?c=r.concat(c):u=-1,c.length&&p())}function p(){if(!l){var e=s(d);l=!0;for(var t=c.length;t;){for(r=c,c=[];++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"]),I=(n=[i,t],r=function(e){return n.forEach(function(t){return"function"==typeof t?t(e):t&&(t.current=e),t})},(o=(0,d.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),M=u(u({},S),s);return d.createElement(d.Fragment,null,v&&d.createElement(y,{sideCar:h,removeScrollBar:m,shards:b,noIsolation:x,inert:k,setCallbacks:c,allowPinchZoom:!!w,lockRef:i,gapMode:C}),l?d.cloneElement(d.Children.only(p),u(u({},M),{ref:I})):d.createElement(void 0===j?"div":j,u({},M,{className:f,ref:I}),p))});v.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},v.classNames={fullWidth:f,zeroRight:p};var b=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 d.createElement(r,m({},n))};b.isSideCarExport=!0;var y=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)}}},x=function(){var e=y();return function(t,n){d.useEffect(function(){return e.add(t),function(){e.remove()}},[t&&n])}},k=function(){var e=x();return function(t){return e(t.styles,t.dynamic),null}},w={left:0,top:0,right:0,gap:0},j=function(e){return parseInt(e||"",10)||0},C=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[j(n),j(r),j(o)]},S=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return w;var t=C(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])}},I=k(),M=function(e,t,n,r){var o=e.left,i=e.top,a=e.right,s=e.gap;return void 0===n&&(n="margin"),"\n .".concat("with-scroll-bars-hidden"," {\n overflow: hidden ").concat(r,";\n padding-right: ").concat(s,"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(s,"px ").concat(r,";\n "),"padding"===n&&"padding-right: ".concat(s,"px ").concat(r,";")].filter(Boolean).join(""),"\n }\n \n .").concat(p," {\n right: ").concat(s,"px ").concat(r,";\n }\n \n .").concat(f," {\n margin-right: ").concat(s,"px ").concat(r,";\n }\n \n .").concat(p," .").concat(p," {\n right: 0 ").concat(r,";\n }\n \n .").concat(f," .").concat(f," {\n margin-right: 0 ").concat(r,";\n }\n \n body {\n ").concat("--removed-body-scroll-bar-size",": ").concat(s,"px;\n }\n")},T=function(e){var t=e.noRelative,n=e.noImportant,r=e.gapMode,o=void 0===r?"margin":r,i=d.useMemo(function(){return S(o)},[o]);return d.createElement(I,{styles:M(i,!t,o,n?"":"!important")})},E=!1;if("undefined"!=typeof window)try{var P=Object.defineProperty({},"passive",{get:function(){return E=!0,!0}});window.addEventListener("test",P,P),window.removeEventListener("test",P,P)}catch(e){E=!1}var R=!!E&&{passive:!1},N=function(e,t){var n=window.getComputedStyle(e);return"hidden"!==n[t]&&!(n.overflowY===n.overflowX&&"TEXTAREA"!==e.tagName&&"visible"===n[t])},_=function(e,t){var n=t.ownerDocument,r=t;do{if("undefined"!=typeof ShadowRoot&&r instanceof ShadowRoot&&(r=r.host),F(e,r)){var o=B(e,r);if(o[1]>o[2])return!0}r=r.parentNode}while(r&&r!==n.body);return!1},F=function(e,t){return"v"===e?N(t,"overflowY"):N(t,"overflowX")},B=function(e,t){return"v"===e?[t.scrollTop,t.scrollHeight,t.clientHeight]:[t.scrollLeft,t.scrollWidth,t.clientWidth]},A=function(e,t,n,r,o){var i,a=(i=window.getComputedStyle(t).direction,"h"===e&&"rtl"===i?-1:1),s=a*r,c=n.target,l=t.contains(c),u=!1,d=s>0,p=0,f=0;do{var m=B(e,c),h=m[0],g=m[1]-m[2]-a*h;(h||g)&&F(e,c)&&(p+=g,f+=h),c instanceof ShadowRoot?c=c.host:c=c.parentNode}while(!l&&c!==document.body||l&&(t.contains(c)||t===c));return d&&(o&&1>Math.abs(p)||!o&&s>p)?u=!0:!d&&(o&&1>Math.abs(f)||!o&&-s>f)&&(u=!0),u},L=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},D=function(e){return[e.deltaX,e.deltaY]},$=function(e){return e&&"current"in e?e.current:e},z=0,H=[],O=(l=function(e){var t=d.useRef([]),n=d.useRef([0,0]),r=d.useRef(),o=d.useState(z++)[0],i=d.useState(k)[0],a=d.useRef(e);d.useEffect(function(){a.current=e},[e]),d.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=_(d,u);if(!p)return!0;if(p?o=d:(o="v"===d?"h":"v",p=_(d,u)),!p)return!1;if(!r.current&&"changedTouches"in e&&(c||l)&&(r.current=o),!o)return!0;var f=r.current||o;return A(f,t,e,"h"===f?c:l,!0)},[]),c=d.useCallback(function(e){if(H.length&&H[H.length-1]===i){var n="deltaY"in e?D(e):L(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($).filter(Boolean).filter(function(t){return t.contains(e.target)});(o.length>0?s(e,o[0]):!a.current.noIsolation)&&e.cancelable&&e.preventDefault()}}},[]),l=d.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)},[]),u=d.useCallback(function(e){n.current=L(e),r.current=void 0},[]),p=d.useCallback(function(t){l(t.type,D(t),t.target,s(t,e.lockRef.current))},[]),f=d.useCallback(function(t){l(t.type,L(t),t.target,s(t,e.lockRef.current))},[]);d.useEffect(function(){return H.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,R),document.addEventListener("touchmove",c,R),document.addEventListener("touchstart",u,R),function(){H=H.filter(function(e){return e!==i}),document.removeEventListener("wheel",c,R),document.removeEventListener("touchmove",c,R),document.removeEventListener("touchstart",u,R)}},[]);var m=e.removeScrollBar,h=e.inert;return d.createElement(d.Fragment,null,h?d.createElement(i,{styles:"\n .block-interactivity-".concat(o," {pointer-events: none;}\n .allow-interactivity-").concat(o," {pointer-events: all;}\n")}):null,m?d.createElement(T,{gapMode:e.gapMode}):null)},h.useMedium(l),b),Z=d.forwardRef(function(e,t){return d.createElement(v,u({},e,{ref:t,sideCar:O}))});Z.classNames=v.classNames;var V=Z},84061:function(e,t,n){"use strict";n.d(t,{Qo:function(){return u},RR:function(){return c},cv:function(){return p},dp:function(){return h},dr:function(){return m},oo:function(){return i},uY:function(){return f},x7:function(){return s}});var r=n(4029);function o(e,t,n){let o,{reference:i,floating:a}=e,s=(0,r.Qq)(t),c=(0,r.Wh)(t),l=(0,r.I4)(c),u=(0,r.k3)(t),d="y"===s,p=i.x+i.width/2-a.width/2,f=i.y+i.height/2-a.height/2,m=i[l]/2-a[l]/2;switch(u){case"top":o={x:p,y:i.y-a.height};break;case"bottom":o={x:p,y:i.y+i.height};break;case"right":o={x:i.x+i.width,y:f};break;case"left":o={x:i.x-a.width,y:f};break;default:o={x:i.x,y:i.y}}switch((0,r.hp)(t)){case"start":o[c]-=m*(n&&d?-1:1);break;case"end":o[c]+=m*(n&&d?-1:1)}return o}let i=async(e,t,n)=>{let{placement:r="bottom",strategy:i="absolute",middleware:a=[],platform:s}=n,c=a.filter(Boolean),l=await (null==s.isRTL?void 0:s.isRTL(t)),u=await s.getElementRects({reference:e,floating:t,strategy:i}),{x:d,y:p}=o(u,r,l),f=r,m={},h=0;for(let n=0;n({name:"arrow",options:e,async fn(t){let{x:n,y:o,placement:i,rects:a,platform:s,elements:c,middlewareData:l}=t,{element:u,padding:d=0}=(0,r.ku)(e,t)||{};if(null==u)return{};let p=(0,r.yd)(d),f={x:n,y:o},m=(0,r.Wh)(i),h=(0,r.I4)(m),g=await s.getDimensions(u),v="y"===m,b=v?"clientHeight":"clientWidth",y=a.reference[h]+a.reference[m]-f[m]-a.floating[h],x=f[m]-a.reference[m],k=await (null==s.getOffsetParent?void 0:s.getOffsetParent(u)),w=k?k[b]:0;w&&await (null==s.isElement?void 0:s.isElement(k))||(w=c.floating[b]||a.floating[h]);let j=w/2-g[h]/2-1,C=(0,r.VV)(p[v?"top":"left"],j),S=(0,r.VV)(p[v?"bottom":"right"],j),I=w-g[h]-S,M=w/2-g[h]/2+(y/2-x/2),T=(0,r.uZ)(C,M,I),E=!l.arrow&&null!=(0,r.hp)(i)&&M!==T&&a.reference[h]/2-(Me<=0)){let e=((null==(i=u.flip)?void 0:i.index)||0)+1,t=I[e];if(t)return{data:{index:e,overflows:E},reset:{placement:t}};let n=null==(s=E.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0])?void 0:s.placement;if(!n)switch(b){case"bestFit":{let e=null==(c=E.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:c[0];e&&(n=e);break}case"initialPlacement":n=p}if(l!==n)return{reset:{placement:n}}}return{}}}};function l(e){let t=(0,r.VV)(...e.map(e=>e.left)),n=(0,r.VV)(...e.map(e=>e.top));return{x:t,y:n,width:(0,r.Fp)(...e.map(e=>e.right))-t,height:(0,r.Fp)(...e.map(e=>e.bottom))-n}}let u=function(e){return void 0===e&&(e={}),{name:"inline",options:e,async fn(t){let{placement:n,elements:o,rects:i,platform:a,strategy:s}=t,{padding:c=2,x:u,y:d}=(0,r.ku)(e,t),p=Array.from(await (null==a.getClientRects?void 0:a.getClientRects(o.reference))||[]),f=function(e){let t=e.slice().sort((e,t)=>e.y-t.y),n=[],o=null;for(let e=0;eo.height/2?n.push([r]):n[n.length-1].push(r),o=r}return n.map(e=>(0,r.JB)(l(e)))}(p),m=(0,r.JB)(l(p)),h=(0,r.yd)(c),g=await a.getElementRects({reference:{getBoundingClientRect:function(){if(2===f.length&&f[0].left>f[1].right&&null!=u&&null!=d)return f.find(e=>u>e.left-h.left&&ue.top-h.top&&d=2){if("y"===(0,r.Qq)(n)){let e=f[0],t=f[f.length-1],o="top"===(0,r.k3)(n),i=e.top,a=t.bottom,s=o?e.left:t.left,c=o?e.right:t.right;return{top:i,bottom:a,left:s,right:c,width:c-s,height:a-i,x:s,y:i}}let e="left"===(0,r.k3)(n),t=(0,r.Fp)(...f.map(e=>e.right)),o=(0,r.VV)(...f.map(e=>e.left)),i=f.filter(n=>e?n.left===o:n.right===t),a=i[0].top,s=i[i.length-1].bottom;return{top:a,bottom:s,left:o,right:t,width:t-o,height:s-a,x:o,y:a}}return m}},floating:o.floating,strategy:s});return i.reference.x!==g.reference.x||i.reference.y!==g.reference.y||i.reference.width!==g.reference.width||i.reference.height!==g.reference.height?{reset:{rects:g}}:{}}}};async function d(e,t){let{placement:n,platform:o,elements:i}=e,a=await (null==o.isRTL?void 0:o.isRTL(i.floating)),s=(0,r.k3)(n),c=(0,r.hp)(n),l="y"===(0,r.Qq)(n),u=["left","top"].includes(s)?-1:1,d=a&&l?-1:1,p=(0,r.ku)(t,e),{mainAxis:f,crossAxis:m,alignmentAxis:h}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...p};return c&&"number"==typeof h&&(m="end"===c?-1*h:h),l?{x:m*d,y:f*u}:{x:f*u,y:m*d}}let p=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var n,r;let{x:o,y:i,placement:a,middlewareData:s}=t,c=await d(t,e);return a===(null==(n=s.offset)?void 0:n.placement)&&null!=(r=s.arrow)&&r.alignmentOffset?{}:{x:o+c.x,y:i+c.y,data:{...c,placement:a}}}}},f=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){let{x:n,y:o,placement:i}=t,{mainAxis:s=!0,crossAxis:c=!1,limiter:l={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...u}=(0,r.ku)(e,t),d={x:n,y:o},p=await a(t,u),f=(0,r.Qq)((0,r.k3)(i)),m=(0,r.Rn)(f),h=d[m],g=d[f];if(s){let e="y"===m?"top":"left",t="y"===m?"bottom":"right",n=h+p[e],o=h-p[t];h=(0,r.uZ)(n,h,o)}if(c){let e="y"===f?"top":"left",t="y"===f?"bottom":"right",n=g+p[e],o=g-p[t];g=(0,r.uZ)(n,g,o)}let v=l.fn({...t,[m]:h,[f]:g});return{...v,data:{x:v.x-n,y:v.y-o}}}}},m=function(e){return void 0===e&&(e={}),{options:e,fn(t){let{x:n,y:o,placement:i,rects:a,middlewareData:s}=t,{offset:c=0,mainAxis:l=!0,crossAxis:u=!0}=(0,r.ku)(e,t),d={x:n,y:o},p=(0,r.Qq)(i),f=(0,r.Rn)(p),m=d[f],h=d[p],g=(0,r.ku)(c,t),v="number"==typeof g?{mainAxis:g,crossAxis:0}:{mainAxis:0,crossAxis:0,...g};if(l){let e="y"===f?"height":"width",t=a.reference[f]-a.floating[e]+v.mainAxis,n=a.reference[f]+a.reference[e]-v.mainAxis;mn&&(m=n)}if(u){var b,y;let e="y"===f?"width":"height",t=["top","left"].includes((0,r.k3)(i)),n=a.reference[p]-a.floating[e]+(t&&(null==(b=s.offset)?void 0:b[p])||0)+(t?0:v.crossAxis),o=a.reference[p]+a.reference[e]+(t?0:(null==(y=s.offset)?void 0:y[p])||0)-(t?v.crossAxis:0);ho&&(h=o)}return{[f]:m,[p]:h}}}},h=function(e){return void 0===e&&(e={}),{name:"size",options:e,async fn(t){let n,o;let{placement:i,rects:s,platform:c,elements:l}=t,{apply:u=()=>{},...d}=(0,r.ku)(e,t),p=await a(t,d),f=(0,r.k3)(i),m=(0,r.hp)(i),h="y"===(0,r.Qq)(i),{width:g,height:v}=s.floating;"top"===f||"bottom"===f?(n=f,o=m===(await (null==c.isRTL?void 0:c.isRTL(l.floating))?"start":"end")?"left":"right"):(o=f,n="end"===m?"top":"bottom");let b=v-p[n],y=g-p[o],x=!t.middlewareData.shift,k=b,w=y;if(h){let e=g-p.left-p.right;w=m||x?(0,r.VV)(y,e):e}else{let e=v-p.top-p.bottom;k=m||x?(0,r.VV)(b,e):e}if(x&&!m){let e=(0,r.Fp)(p.left,0),t=(0,r.Fp)(p.right,0),n=(0,r.Fp)(p.top,0),o=(0,r.Fp)(p.bottom,0);h?w=g-2*(0!==e||0!==t?e+t:(0,r.Fp)(p.left,p.right)):k=v-2*(0!==n||0!==o?n+o:(0,r.Fp)(p.top,p.bottom))}await u({...t,availableWidth:w,availableHeight:k});let j=await c.getDimensions(l.floating);return g!==j.width||v!==j.height?{reset:{rects:!0}}:{}}}}},75580:function(e,t,n){"use strict";n.d(t,{Me:function(){return x},Qo:function(){return S},RR:function(){return w},dp:function(){return j},dr:function(){return I},oo:function(){return M},uY:function(){return k},x7:function(){return C}});var r=n(4029),o=n(84061),i=n(10712);function a(e){let t=(0,i.Dx)(e),n=parseFloat(t.width)||0,o=parseFloat(t.height)||0,a=(0,i.Re)(e),s=a?e.offsetWidth:n,c=a?e.offsetHeight:o,l=(0,r.NM)(n)!==s||(0,r.NM)(o)!==c;return l&&(n=s,o=c),{width:n,height:o,$:l}}function s(e){return(0,i.kK)(e)?e:e.contextElement}function c(e){let t=s(e);if(!(0,i.Re)(t))return(0,r.ze)(1);let n=t.getBoundingClientRect(),{width:o,height:c,$:l}=a(t),u=(l?(0,r.NM)(n.width):n.width)/o,d=(l?(0,r.NM)(n.height):n.height)/c;return u&&Number.isFinite(u)||(u=1),d&&Number.isFinite(d)||(d=1),{x:u,y:d}}let l=(0,r.ze)(0);function u(e){let t=(0,i.Jj)(e);return(0,i.Pf)()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:l}function d(e,t,n,o){var a;void 0===t&&(t=!1),void 0===n&&(n=!1);let l=e.getBoundingClientRect(),d=s(e),p=(0,r.ze)(1);t&&(o?(0,i.kK)(o)&&(p=c(o)):p=c(e));let f=(void 0===(a=n)&&(a=!1),o&&(!a||o===(0,i.Jj)(d))&&a)?u(d):(0,r.ze)(0),m=(l.left+f.x)/p.x,h=(l.top+f.y)/p.y,g=l.width/p.x,v=l.height/p.y;if(d){let e=(0,i.Jj)(d),t=o&&(0,i.kK)(o)?(0,i.Jj)(o):o,n=e.frameElement;for(;n&&o&&t!==e;){let e=c(n),t=n.getBoundingClientRect(),r=(0,i.Dx)(n),o=t.left+(n.clientLeft+parseFloat(r.paddingLeft))*e.x,a=t.top+(n.clientTop+parseFloat(r.paddingTop))*e.y;m*=e.x,h*=e.y,g*=e.x,v*=e.y,m+=o,h+=a,n=(0,i.Jj)(n).frameElement}}return(0,r.JB)({width:g,height:v,x:m,y:h})}let p=[":popover-open",":modal"];function f(e){let t=!1,n=0,r=0;if(p.forEach(n=>{!function(n){try{t=t||e.matches(n)}catch(e){}}(n)}),t){let t=(0,i.gQ)(e);if(t){let e=t.getBoundingClientRect();n=e.x,r=e.y}}return[t,n,r]}function m(e){return d((0,i.tF)(e)).left+(0,i.Lw)(e).scrollLeft}function h(e,t,n){let o;if("viewport"===t)o=function(e,t){let n=(0,i.Jj)(e),r=(0,i.tF)(e),o=n.visualViewport,a=r.clientWidth,s=r.clientHeight,c=0,l=0;if(o){a=o.width,s=o.height;let e=(0,i.Pf)();(!e||e&&"fixed"===t)&&(c=o.offsetLeft,l=o.offsetTop)}return{width:a,height:s,x:c,y:l}}(e,n);else if("document"===t)o=function(e){let t=(0,i.tF)(e),n=(0,i.Lw)(e),o=e.ownerDocument.body,a=(0,r.Fp)(t.scrollWidth,t.clientWidth,o.scrollWidth,o.clientWidth),s=(0,r.Fp)(t.scrollHeight,t.clientHeight,o.scrollHeight,o.clientHeight),c=-n.scrollLeft+m(e),l=-n.scrollTop;return"rtl"===(0,i.Dx)(o).direction&&(c+=(0,r.Fp)(t.clientWidth,o.clientWidth)-a),{width:a,height:s,x:c,y:l}}((0,i.tF)(e));else if((0,i.kK)(t))o=function(e,t){let n=d(e,!0,"fixed"===t),o=n.top+e.clientTop,a=n.left+e.clientLeft,s=(0,i.Re)(e)?c(e):(0,r.ze)(1),l=e.clientWidth*s.x;return{width:l,height:e.clientHeight*s.y,x:a*s.x,y:o*s.y}}(t,n);else{let n=u(e);o={...t,x:t.x-n.x,y:t.y-n.y}}return(0,r.JB)(o)}function g(e,t){return(0,i.Re)(e)&&"fixed"!==(0,i.Dx)(e).position?t?t(e):e.offsetParent:null}function v(e,t){let n=(0,i.Jj)(e);if(!(0,i.Re)(e))return n;let r=g(e,t);for(;r&&(0,i.Ze)(r)&&"static"===(0,i.Dx)(r).position;)r=g(r,t);return r&&("html"===(0,i.wk)(r)||"body"===(0,i.wk)(r)&&"static"===(0,i.Dx)(r).position&&!(0,i.hT)(r))?n:r||(0,i.gQ)(e)||n}let b=async function(e){let t=this.getOffsetParent||v,n=this.getDimensions;return{reference:function(e,t,n,o){let a=(0,i.Re)(t),s=(0,i.tF)(t),c="fixed"===n,l=d(e,!0,c,t),u={scrollLeft:0,scrollTop:0},p=(0,r.ze)(0);if(a||!a&&!c){if(("body"!==(0,i.wk)(t)||(0,i.ao)(s))&&(u=(0,i.Lw)(t)),a){let e=d(t,!0,c,t);p.x=e.x+t.clientLeft,p.y=e.y+t.clientTop}else s&&(p.x=m(s))}let h=l.left+u.scrollLeft-p.x,g=l.top+u.scrollTop-p.y,[v,b,y]=f(o);return v&&(h+=b,g+=y,a&&(h+=t.clientLeft,g+=t.clientTop)),{x:h,y:g,width:l.width,height:l.height}}(e.reference,await t(e.floating),e.strategy,e.floating),floating:{x:0,y:0,...await n(e.floating)}}},y={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{elements:t,rect:n,offsetParent:o,strategy:a}=e,s=(0,i.tF)(o),[l]=t?f(t.floating):[!1];if(o===s||l)return n;let u={scrollLeft:0,scrollTop:0},p=(0,r.ze)(1),m=(0,r.ze)(0),h=(0,i.Re)(o);if((h||!h&&"fixed"!==a)&&(("body"!==(0,i.wk)(o)||(0,i.ao)(s))&&(u=(0,i.Lw)(o)),(0,i.Re)(o))){let e=d(o);p=c(o),m.x=e.x+o.clientLeft,m.y=e.y+o.clientTop}return{width:n.width*p.x,height:n.height*p.y,x:n.x*p.x-u.scrollLeft*p.x+m.x,y:n.y*p.y-u.scrollTop*p.y+m.y}},getDocumentElement:i.tF,getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:o,strategy:a}=e,s=[..."clippingAncestors"===n?function(e,t){let n=t.get(e);if(n)return n;let r=(0,i.Kx)(e,[],!1).filter(e=>(0,i.kK)(e)&&"body"!==(0,i.wk)(e)),o=null,a="fixed"===(0,i.Dx)(e).position,s=a?(0,i.Ow)(e):e;for(;(0,i.kK)(s)&&!(0,i.Py)(s);){let t=(0,i.Dx)(s),n=(0,i.hT)(s);n||"fixed"!==t.position||(o=null),(a?!n&&!o:!n&&"static"===t.position&&!!o&&["absolute","fixed"].includes(o.position)||(0,i.ao)(s)&&!n&&function e(t,n){let r=(0,i.Ow)(t);return!(r===n||!(0,i.kK)(r)||(0,i.Py)(r))&&("fixed"===(0,i.Dx)(r).position||e(r,n))}(e,s))?r=r.filter(e=>e!==s):o=t,s=(0,i.Ow)(s)}return t.set(e,r),r}(t,this._c):[].concat(n),o],c=s[0],l=s.reduce((e,n)=>{let o=h(t,n,a);return e.top=(0,r.Fp)(o.top,e.top),e.right=(0,r.VV)(o.right,e.right),e.bottom=(0,r.VV)(o.bottom,e.bottom),e.left=(0,r.Fp)(o.left,e.left),e},h(t,c,a));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},getOffsetParent:v,getElementRects:b,getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){let{width:t,height:n}=a(e);return{width:t,height:n}},getScale:c,isElement:i.kK,isRTL:function(e){return"rtl"===(0,i.Dx)(e).direction}};function x(e,t,n,o){let a;void 0===o&&(o={});let{ancestorScroll:c=!0,ancestorResize:l=!0,elementResize:u="function"==typeof ResizeObserver,layoutShift:p="function"==typeof IntersectionObserver,animationFrame:f=!1}=o,m=s(e),h=c||l?[...m?(0,i.Kx)(m):[],...(0,i.Kx)(t)]:[];h.forEach(e=>{c&&e.addEventListener("scroll",n,{passive:!0}),l&&e.addEventListener("resize",n)});let g=m&&p?function(e,t){let n,o=null,a=(0,i.tF)(e);function s(){var e;clearTimeout(n),null==(e=o)||e.disconnect(),o=null}return!function i(c,l){void 0===c&&(c=!1),void 0===l&&(l=1),s();let{left:u,top:d,width:p,height:f}=e.getBoundingClientRect();if(c||t(),!p||!f)return;let m=(0,r.GW)(d),h=(0,r.GW)(a.clientWidth-(u+p)),g={rootMargin:-m+"px "+-h+"px "+-(0,r.GW)(a.clientHeight-(d+f))+"px "+-(0,r.GW)(u)+"px",threshold:(0,r.Fp)(0,(0,r.VV)(1,l))||1},v=!0;function b(e){let t=e[0].intersectionRatio;if(t!==l){if(!v)return i();t?i(!1,t):n=setTimeout(()=>{i(!1,1e-7)},100)}v=!1}try{o=new IntersectionObserver(b,{...g,root:a.ownerDocument})}catch(e){o=new IntersectionObserver(b,g)}o.observe(e)}(!0),s}(m,n):null,v=-1,b=null;u&&(b=new ResizeObserver(e=>{let[r]=e;r&&r.target===m&&b&&(b.unobserve(t),cancelAnimationFrame(v),v=requestAnimationFrame(()=>{var e;null==(e=b)||e.observe(t)})),n()}),m&&!f&&b.observe(m),b.observe(t));let y=f?d(e):null;return f&&function t(){let r=d(e);y&&(r.x!==y.x||r.y!==y.y||r.width!==y.width||r.height!==y.height)&&n(),y=r,a=requestAnimationFrame(t)}(),n(),()=>{var e;h.forEach(e=>{c&&e.removeEventListener("scroll",n),l&&e.removeEventListener("resize",n)}),null==g||g(),null==(e=b)||e.disconnect(),b=null,f&&cancelAnimationFrame(a)}}let k=o.uY,w=o.RR,j=o.dp,C=o.x7,S=o.Qo,I=o.dr,M=(e,t,n)=>{let r=new Map,i={platform:y,...n},a={...i.platform,_c:r};return(0,o.oo)(e,t,{...i,platform:a})}},92416:function(e,t,n){"use strict";n.d(t,{YF:function(){return p},x7:function(){return a}});var r=n(75580),o=n(2784),i=n(28316);let a=e=>({name:"arrow",options:e,fn(t){let{element:n,padding:o}="function"==typeof e?e(t):e;return n&&({}).hasOwnProperty.call(n,"current")?null!=n.current?(0,r.x7)({element:n.current,padding:o}).fn(t):{}:n?(0,r.x7)({element:n,padding:o}).fn(t):{}}});var s="undefined"!=typeof document?o.useLayoutEffect:o.useEffect;function c(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(!c(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)&&!c(e[n],t[n]))return!1}return!0}return e!=e&&t!=t}function l(e){return"undefined"==typeof window?1:(e.ownerDocument.defaultView||window).devicePixelRatio||1}function u(e,t){let n=l(e);return Math.round(t*n)/n}function d(e){let t=o.useRef(e);return s(()=>{t.current=e}),t}function p(e){void 0===e&&(e={});let{placement:t="bottom",strategy:n="absolute",middleware:a=[],platform:p,elements:{reference:f,floating:m}={},transform:h=!0,whileElementsMounted:g,open:v}=e,[b,y]=o.useState({x:0,y:0,strategy:n,placement:t,middlewareData:{},isPositioned:!1}),[x,k]=o.useState(a);c(x,a)||k(a);let[w,j]=o.useState(null),[C,S]=o.useState(null),I=o.useCallback(e=>{e!==P.current&&(P.current=e,j(e))},[]),M=o.useCallback(e=>{e!==R.current&&(R.current=e,S(e))},[]),T=f||w,E=m||C,P=o.useRef(null),R=o.useRef(null),N=o.useRef(b),_=null!=g,F=d(g),B=d(p),A=o.useCallback(()=>{if(!P.current||!R.current)return;let e={placement:t,strategy:n,middleware:x};B.current&&(e.platform=B.current),(0,r.oo)(P.current,R.current,e).then(e=>{let t={...e,isPositioned:!0};L.current&&!c(N.current,t)&&(N.current=t,i.flushSync(()=>{y(t)}))})},[x,t,n,B]);s(()=>{!1===v&&N.current.isPositioned&&(N.current.isPositioned=!1,y(e=>({...e,isPositioned:!1})))},[v]);let L=o.useRef(!1);s(()=>(L.current=!0,()=>{L.current=!1}),[]),s(()=>{if(T&&(P.current=T),E&&(R.current=E),T&&E){if(F.current)return F.current(T,E,A);A()}},[T,E,A,F,_]);let D=o.useMemo(()=>({reference:P,floating:R,setReference:I,setFloating:M}),[I,M]),$=o.useMemo(()=>({reference:T,floating:E}),[T,E]),z=o.useMemo(()=>{let e={position:n,left:0,top:0};if(!$.floating)return e;let t=u($.floating,b.x),r=u($.floating,b.y);return h?{...e,transform:"translate("+t+"px, "+r+"px)",...l($.floating)>=1.5&&{willChange:"transform"}}:{position:n,left:t,top:r}},[n,h,$.floating,b.x,b.y]);return o.useMemo(()=>({...b,update:A,refs:D,elements:$,floatingStyles:z}),[b,A,D,$,z])}},63607:function(e,t,n){"use strict";n.d(t,{e0:function(){return F},Qu:function(){return B},tj:function(){return _},bQ:function(){return z},YF:function(){return H},KK:function(){return O},XI:function(){return R},NI:function(){return W},qs:function(){return q}});var r=n(2784),o=n.t(r,2),i=n(10712);function a(e){let t=e.activeElement;for(;(null==(n=t)||null==(n=n.shadowRoot)?void 0:n.activeElement)!=null;){var n;t=t.shadowRoot.activeElement}return t}function s(e,t){if(!e||!t)return!1;let n=null==t.getRootNode?void 0:t.getRootNode();if(e.contains(t))return!0;if(n&&(0,i.Zq)(n)){let n=t;for(;n;){if(e===n)return!0;n=n.parentNode||n.host}}return!1}function c(){let e=navigator.userAgentData;return null!=e&&e.platform?e.platform:navigator.platform}function l(){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}function u(){let e=/android/i;return e.test(c())||e.test(l())}function d(e,t){let n=["mouse","pen"];return t||n.push("",void 0),n.includes(e)}function p(e){return(null==e?void 0:e.ownerDocument)||document}function f(e,t){return null!=t&&("composedPath"in e?e.composedPath().includes(t):null!=e.target&&t.contains(e.target))}function m(e){return"composedPath"in e?e.composedPath()[0]:e.target}var h=n(92416);n(28316);let g=o["useInsertionEffect".toString()]||(e=>e());function v(e){let t=r.useRef(()=>{});return g(()=>{t.current=e}),r.useCallback(function(){for(var e=arguments.length,n=Array(e),r=0;r"floating-ui-"+x++,w=o["useId".toString()]||function(){let[e,t]=r.useState(()=>y?k():void 0);return b(()=>{null==e&&t(k())},[]),r.useEffect(()=>{y||(y=!0)},[]),e},j=r.createContext(null),C=r.createContext(null),S=()=>{var e;return(null==(e=r.useContext(j))?void 0:e.id)||null},I=()=>r.useContext(C);function M(e){return"data-floating-ui-"+e}function T(e){let t=(0,r.useRef)(e);return b(()=>{t.current=e}),t}let E=M("safe-polygon");function P(e,t,n){return n&&!d(n)?0:"number"==typeof e?e:null==e?void 0:e[t]}function R(e,t){void 0===t&&(t={});let{open:n,onOpenChange:o,dataRef:a,events:c,elements:{domReference:l,floating:u},refs:f}=e,{enabled:m=!0,delay:h=0,handleClose:g=null,mouseOnly:v=!1,restMs:y=0,move:x=!0}=t,k=I(),w=S(),j=T(g),C=T(h),M=r.useRef(),R=r.useRef(),N=r.useRef(),_=r.useRef(),F=r.useRef(!0),B=r.useRef(!1),A=r.useRef(()=>{}),L=r.useCallback(()=>{var e;let t=null==(e=a.current.openEvent)?void 0:e.type;return(null==t?void 0:t.includes("mouse"))&&"mousedown"!==t},[a]);r.useEffect(()=>{if(m)return c.on("openchange",e),()=>{c.off("openchange",e)};function e(e){let{open:t}=e;t||(clearTimeout(R.current),clearTimeout(_.current),F.current=!0)}},[m,c]),r.useEffect(()=>{if(!m||!j.current||!n)return;function e(e){L()&&o(!1,e,"hover")}let t=p(u).documentElement;return t.addEventListener("mouseleave",e),()=>{t.removeEventListener("mouseleave",e)}},[u,n,o,m,j,L]);let D=r.useCallback(function(e,t,n){void 0===t&&(t=!0),void 0===n&&(n="hover");let r=P(C.current,"close",M.current);r&&!N.current?(clearTimeout(R.current),R.current=setTimeout(()=>o(!1,e,n),r)):t&&(clearTimeout(R.current),o(!1,e,n))},[C,o]),$=r.useCallback(()=>{A.current(),N.current=void 0},[]),z=r.useCallback(()=>{if(B.current){let e=p(f.floating.current).body;e.style.pointerEvents="",e.removeAttribute(E),B.current=!1}},[f]);return r.useEffect(()=>{if(m&&(0,i.kK)(l))return n&&l.addEventListener("mouseleave",f),null==u||u.addEventListener("mouseleave",f),x&&l.addEventListener("mousemove",r,{once:!0}),l.addEventListener("mouseenter",r),l.addEventListener("mouseleave",c),()=>{n&&l.removeEventListener("mouseleave",f),null==u||u.removeEventListener("mouseleave",f),x&&l.removeEventListener("mousemove",r),l.removeEventListener("mouseenter",r),l.removeEventListener("mouseleave",c)};function t(){return!!a.current.openEvent&&["click","mousedown"].includes(a.current.openEvent.type)}function r(e){if(clearTimeout(R.current),F.current=!1,v&&!d(M.current)||y>0&&0===P(C.current,"open"))return;let t=P(C.current,"open",M.current);t?R.current=setTimeout(()=>{o(!0,e,"hover")},t):o(!0,e,"hover")}function c(r){if(t())return;A.current();let o=p(u);if(clearTimeout(_.current),j.current){n||clearTimeout(R.current),N.current=j.current({...e,tree:k,x:r.clientX,y:r.clientY,onClose(){z(),$(),D(r,!0,"safe-polygon")}});let t=N.current;o.addEventListener("mousemove",t),A.current=()=>{o.removeEventListener("mousemove",t)};return}"touch"===M.current&&s(u,r.relatedTarget)||D(r)}function f(n){t()||null==j.current||j.current({...e,tree:k,x:n.clientX,y:n.clientY,onClose(){z(),$(),D(n)}})(n)}},[l,u,m,e,v,y,x,D,$,z,o,n,k,C,j,a]),b(()=>{var e,t;if(m&&n&&null!=(e=j.current)&&e.__options.blockPointerEvents&&L()){let e=p(u).body;if(e.setAttribute(E,""),e.style.pointerEvents="none",B.current=!0,(0,i.kK)(l)&&u){let e=null==k||null==(t=k.nodesRef.current.find(e=>e.id===w))||null==(t=t.context)?void 0:t.elements.floating;return e&&(e.style.pointerEvents=""),l.style.pointerEvents="auto",u.style.pointerEvents="auto",()=>{l.style.pointerEvents="",u.style.pointerEvents=""}}}},[m,n,w,u,l,k,j,L]),b(()=>{n||(M.current=void 0,$(),z())},[n,$,z]),r.useEffect(()=>()=>{$(),clearTimeout(R.current),clearTimeout(_.current),z()},[m,l,$,z]),r.useMemo(()=>{if(!m)return{};function e(e){M.current=e.pointerType}return{reference:{onPointerDown:e,onPointerEnter:e,onMouseMove(e){n||0===y||(clearTimeout(_.current),_.current=setTimeout(()=>{F.current||o(!0,e.nativeEvent,"hover")},y))}},floating:{onMouseEnter(){clearTimeout(R.current)},onMouseLeave(e){D(e.nativeEvent,!1)}}}},[m,y,n,o,D])}let N=r.createContext({delay:0,initialDelay:0,timeoutMs:0,currentId:null,setCurrentId:()=>{},setState:()=>{},isInstantPhase:!1}),_=()=>r.useContext(N),F=e=>{let{children:t,delay:n,timeoutMs:o=0}=e,[i,a]=r.useReducer((e,t)=>({...e,...t}),{delay:n,timeoutMs:o,initialDelay:n,currentId:null,isInstantPhase:!1}),s=r.useRef(null),c=r.useCallback(e=>{a({currentId:e})},[]);return b(()=>{i.currentId?null===s.current?s.current=i.currentId:a({isInstantPhase:!0}):(a({isInstantPhase:!1}),s.current=null)},[i.currentId]),r.createElement(N.Provider,{value:r.useMemo(()=>({...i,setState:a,setCurrentId:c}),[i,c])},t)},B=(e,t)=>{let{open:n,onOpenChange:r}=e,{id:o}=t,{currentId:i,setCurrentId:a,initialDelay:s,setState:c,timeoutMs:l}=_();b(()=>{i&&(c({delay:{open:1,close:P(s,"close")}}),i!==o&&r(!1))},[o,r,c,i,s]),b(()=>{function e(){r(!1),c({delay:s,currentId:null})}if(!n&&i===o){if(l){let t=window.setTimeout(e,l);return()=>{clearTimeout(t)}}e()}},[n,c,i,o,r,s,l]),b(()=>{n&&a(o)},[n,a,o])};function A(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 L={pointerdown:"onPointerDown",mousedown:"onMouseDown",click:"onClick"},D={pointerdown:"onPointerDownCapture",mousedown:"onMouseDownCapture",click:"onClickCapture"},$=e=>{var t,n;return{escapeKey:"boolean"==typeof e?e:null!=(t=null==e?void 0:e.escapeKey)&&t,outsidePress:"boolean"==typeof e?e:null==(n=null==e?void 0:e.outsidePress)||n}};function z(e,t){void 0===t&&(t={});let{open:n,onOpenChange:o,nodeId:a,elements:{reference:c,domReference:l,floating:u},dataRef:d}=e,{enabled:h=!0,escapeKey:g=!0,outsidePress:b=!0,outsidePressEvent:y="pointerdown",referencePress:x=!1,referencePressEvent:k="pointerdown",ancestorScroll:w=!1,bubbles:j,capture:C}=t,S=I(),T=v("function"==typeof b?b:()=>!1),E="function"==typeof b?T:b,P=r.useRef(!1),R=r.useRef(!1),{escapeKey:N,outsidePress:_}=$(j),{escapeKey:F,outsidePress:B}=$(C),z=v(e=>{if(!n||!h||!g||"Escape"!==e.key)return;let t=S?A(S.nodesRef.current,a):[];if(!N&&(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}o(!1,"nativeEvent"in e?e.nativeEvent:e,"escape-key")}),H=v(e=>{var t;let n=()=>{var t;z(e),null==(t=m(e))||t.removeEventListener("keydown",n)};null==(t=m(e))||t.addEventListener("keydown",n)}),O=v(e=>{let t=P.current;P.current=!1;let n=R.current;if(R.current=!1,"click"===y&&n||t||"function"==typeof E&&!E(e))return;let r=m(e),c="["+M("inert")+"]",d=p(u).querySelectorAll(c),h=(0,i.kK)(r)?r:null;for(;h&&!(0,i.Py)(h);){let e=(0,i.Ow)(h);if((0,i.Py)(e)||!(0,i.kK)(e))break;h=e}if(d.length&&(0,i.kK)(r)&&!r.matches("html,body")&&!s(r,u)&&Array.from(d).every(e=>!s(h,e)))return;if((0,i.Re)(r)&&u){let t=r.clientWidth>0&&r.scrollWidth>r.clientWidth,n=r.clientHeight>0&&r.scrollHeight>r.clientHeight,o=n&&e.offsetX>r.clientWidth;if(n&&"rtl"===(0,i.Dx)(r).direction&&(o=e.offsetX<=r.offsetWidth-r.clientWidth),o||t&&e.offsetY>r.clientHeight)return}let g=S&&A(S.nodesRef.current,a).some(t=>{var n;return f(e,null==(n=t.context)?void 0:n.elements.floating)});if(f(e,u)||f(e,l)||g)return;let v=S?A(S.nodesRef.current,a):[];if(v.length>0){let e=!0;if(v.forEach(t=>{var n;if(null!=(n=t.context)&&n.open&&!t.context.dataRef.current.__outsidePressBubbles){e=!1;return}}),!e)return}o(!1,e,"outside-press")}),Z=v(e=>{var t;let n=()=>{var t;O(e),null==(t=m(e))||t.removeEventListener(y,n)};null==(t=m(e))||t.addEventListener(y,n)});return r.useEffect(()=>{if(!n||!h)return;function e(e){o(!1,e,"ancestor-scroll")}d.current.__escapeKeyBubbles=N,d.current.__outsidePressBubbles=_;let t=p(u);g&&t.addEventListener("keydown",F?H:z,F),E&&t.addEventListener(y,B?Z:O,B);let r=[];return w&&((0,i.kK)(l)&&(r=(0,i.Kx)(l)),(0,i.kK)(u)&&(r=r.concat((0,i.Kx)(u))),!(0,i.kK)(c)&&c&&c.contextElement&&(r=r.concat((0,i.Kx)(c.contextElement)))),(r=r.filter(e=>{var n;return e!==(null==(n=t.defaultView)?void 0:n.visualViewport)})).forEach(t=>{t.addEventListener("scroll",e,{passive:!0})}),()=>{g&&t.removeEventListener("keydown",F?H:z,F),E&&t.removeEventListener(y,B?Z:O,B),r.forEach(t=>{t.removeEventListener("scroll",e)})}},[d,u,l,c,g,E,y,n,o,w,h,N,_,z,F,H,O,B,Z]),r.useEffect(()=>{P.current=!1},[E,y]),r.useMemo(()=>h?{reference:{onKeyDown:z,[L[k]]:e=>{x&&o(!1,e.nativeEvent,"reference-press")}},floating:{onKeyDown:z,onMouseDown(){R.current=!0},onMouseUp(){R.current=!0},[D[y]]:()=>{P.current=!0}}}:{},[h,x,y,k,o,z])}function H(e){var t;void 0===e&&(e={});let{open:n=!1,onOpenChange:o,nodeId:a}=e,[s,c]=r.useState(null),l=(null==(t=e.elements)?void 0:t.reference)||s,u=(0,h.YF)(e),d=I(),p=null!=S(),f=v((e,t,n)=>{e&&(g.current.openEvent=t),y.emit("openchange",{open:e,event:t,reason:n,nested:p}),null==o||o(e,t,n)}),m=r.useRef(null),g=r.useRef({}),y=r.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],x=w(),k=r.useCallback(e=>{let t=(0,i.kK)(e)?{getBoundingClientRect:()=>e.getBoundingClientRect(),contextElement:e}:e;u.refs.setReference(t)},[u.refs]),j=r.useCallback(e=>{((0,i.kK)(e)||null===e)&&(m.current=e,c(e)),((0,i.kK)(u.refs.reference.current)||null===u.refs.reference.current||null!==e&&!(0,i.kK)(e))&&u.refs.setReference(e)},[u.refs]),C=r.useMemo(()=>({...u.refs,setReference:j,setPositionReference:k,domReference:m}),[u.refs,j,k]),M=r.useMemo(()=>({...u.elements,domReference:l}),[u.elements,l]),T=r.useMemo(()=>({...u,refs:C,elements:M,dataRef:g,nodeId:a,floatingId:x,events:y,open:n,onOpenChange:f}),[u,a,x,y,n,f,C,M]);return b(()=>{let e=null==d?void 0:d.nodesRef.current.find(e=>e.id===a);e&&(e.context=T)}),r.useMemo(()=>({...u,context:T,refs:C,elements:M}),[u,C,M,T])}function O(e,t){void 0===t&&(t={});let{open:n,onOpenChange:o,events:d,refs:f,elements:{domReference:h}}=e,{enabled:g=!0,visibleOnly:v=!0}=t,b=r.useRef(!1),y=r.useRef(),x=r.useRef(!0);return r.useEffect(()=>{if(!g)return;let e=(0,i.Jj)(h);function t(){!n&&(0,i.Re)(h)&&h===a(p(h))&&(b.current=!0)}function r(){x.current=!0}return e.addEventListener("blur",t),e.addEventListener("keydown",r,!0),()=>{e.removeEventListener("blur",t),e.removeEventListener("keydown",r,!0)}},[h,n,g]),r.useEffect(()=>{if(g)return d.on("openchange",e),()=>{d.off("openchange",e)};function e(e){let{reason:t}=e;("reference-press"===t||"escape-key"===t)&&(b.current=!0)}},[d,g]),r.useEffect(()=>()=>{clearTimeout(y.current)},[]),r.useMemo(()=>g?{reference:{onPointerDown(e){var t;t=e.nativeEvent,!l().includes("jsdom/")&&(!u()&&0===t.width&&0===t.height||u()&&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&&"touch"===t.pointerType)||(x.current=!1)},onMouseLeave(){b.current=!1},onFocus(e){if(b.current)return;let t=m(e.nativeEvent);if(v&&(0,i.kK)(t))try{if(/apple/i.test(navigator.vendor)&&c().toLowerCase().startsWith("mac")&&!navigator.maxTouchPoints)throw Error();if(!t.matches(":focus-visible"))return}catch(e){if(!x.current&&!((0,i.Re)(t)&&t.matches("input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])")))return}o(!0,e.nativeEvent,"focus")},onBlur(e){b.current=!1;let t=e.relatedTarget,n=(0,i.kK)(t)&&t.hasAttribute(M("focus-guard"))&&"outside"===t.getAttribute("data-type");y.current=window.setTimeout(()=>{let r=a(h?h.ownerDocument:document);if(t||r!==h){if(s(f.floating.current,r)||s(h,r)||n)return;o(!1,e.nativeEvent,"focus")}})}}}:{},[g,v,h,f,o])}let Z="active",V="selected";function G(e,t,n){let r=new Map,o="item"===n,i=e;if(o&&e){let{[Z]:t,[V]:n,...r}=e;i=r}return{..."floating"===n&&{tabIndex:-1},...i,...t.map(t=>{let r=t?t[n]:null;return"function"==typeof r?e?r(e):null:r}).concat(e).reduce((e,t)=>(t&&Object.entries(t).forEach(t=>{let[n,i]=t;if(!(o&&[Z,V].includes(n))){if(0===n.indexOf("on")){if(r.has(n)||r.set(n,[]),"function"==typeof i){var a;null==(a=r.get(n))||a.push(i),e[n]=function(){for(var e,t=arguments.length,o=Array(t),i=0;ie(...o)).find(e=>void 0!==e)}}}else e[n]=i}}),e),{})}}function W(e){void 0===e&&(e=[]);let t=e,n=r.useCallback(t=>G(t,e,"reference"),t),o=r.useCallback(t=>G(t,e,"floating"),t),i=r.useCallback(t=>G(t,e,"item"),e.map(e=>null==e?void 0:e.item));return r.useMemo(()=>({getReferenceProps:n,getFloatingProps:o,getItemProps:i}),[n,o,i])}let Y=new Map([["select","listbox"],["combobox","listbox"],["label",!1]]);function q(e,t){var n;void 0===t&&(t={});let{open:o,floatingId:i}=e,{enabled:a=!0,role:s="dialog"}=t,c=null!=(n=Y.get(s))?n:s,l=w(),u=null!=S();return r.useMemo(()=>{if(!a)return{};let e={id:i,...c&&{role:c}};return"tooltip"===c||"label"===s?{reference:{["aria-"+("label"===s?"labelledby":"describedby")]:o?i:void 0},floating:e}:{reference:{"aria-expanded":o?"true":"false","aria-haspopup":"alertdialog"===c?"dialog":c,"aria-controls":o?i:void 0,..."listbox"===c&&{role:"combobox"},..."menu"===c&&{id:l},..."menu"===c&&u&&{role:"menuitem"},..."select"===s&&{"aria-autocomplete":"none"},..."combobox"===s&&{"aria-autocomplete":"list"}},floating:{...e,..."menu"===c&&{"aria-labelledby":l}},item(e){let{active:t,selected:n}=e,r={role:"option",...t&&{id:i+"-option"}};switch(s){case"select":return{...r,"aria-selected":t&&n};case"combobox":return{...r,...t&&{"aria-selected":!0}}}return{}}}},[a,s,c,o,i,l,u])}},10712:function(e,t,n){"use strict";function r(e){return a(e)?(e.nodeName||"").toLowerCase():"#document"}function o(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function i(e){var t;return null==(t=(a(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function a(e){return e instanceof Node||e instanceof o(e).Node}function s(e){return e instanceof Element||e instanceof o(e).Element}function c(e){return e instanceof HTMLElement||e instanceof o(e).HTMLElement}function l(e){return"undefined"!=typeof ShadowRoot&&(e instanceof ShadowRoot||e instanceof o(e).ShadowRoot)}function u(e){let{overflow:t,overflowX:n,overflowY:r,display:o}=g(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&!["inline","contents"].includes(o)}function d(e){return["table","td","th"].includes(r(e))}function p(e){let t=m(),n=g(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 f(e){let t=b(e);for(;c(t)&&!h(t);){if(p(t))return t;t=b(t)}return null}function m(){return"undefined"!=typeof CSS&&!!CSS.supports&&CSS.supports("-webkit-backdrop-filter","none")}function h(e){return["html","body","#document"].includes(r(e))}function g(e){return o(e).getComputedStyle(e)}function v(e){return s(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function b(e){if("html"===r(e))return e;let t=e.assignedSlot||e.parentNode||l(e)&&e.host||i(e);return l(t)?t.host:t}n.d(t,{Dx:function(){return g},Jj:function(){return o},Kx:function(){return function e(t,n,r){var i;void 0===n&&(n=[]),void 0===r&&(r=!0);let a=function e(t){let n=b(t);return h(n)?t.ownerDocument?t.ownerDocument.body:t.body:c(n)&&u(n)?n:e(n)}(t),s=a===(null==(i=t.ownerDocument)?void 0:i.body),l=o(a);return s?n.concat(l,l.visualViewport||[],u(a)?a:[],l.frameElement&&r?e(l.frameElement):[]):n.concat(a,e(a,[],r))}},Lw:function(){return v},Ow:function(){return b},Pf:function(){return m},Py:function(){return h},Re:function(){return c},Ze:function(){return d},Zq:function(){return l},ao:function(){return u},gQ:function(){return f},hT:function(){return p},kK:function(){return s},tF:function(){return i},wk:function(){return r}})},4029:function(e,t,n){"use strict";n.d(t,{Fp:function(){return o},GW:function(){return a},I4:function(){return h},JB:function(){return C},KX:function(){return k},NM:function(){return i},Qq:function(){return g},Rn:function(){return m},VV:function(){return r},Wh:function(){return v},gy:function(){return y},hp:function(){return f},i8:function(){return b},k3:function(){return p},ku:function(){return d},pw:function(){return w},uZ:function(){return u},yd:function(){return j},ze:function(){return s}});let r=Math.min,o=Math.max,i=Math.round,a=Math.floor,s=e=>({x:e,y:e}),c={left:"right",right:"left",bottom:"top",top:"bottom"},l={start:"end",end:"start"};function u(e,t,n){return o(e,r(t,n))}function d(e,t){return"function"==typeof e?e(t):e}function p(e){return e.split("-")[0]}function f(e){return e.split("-")[1]}function m(e){return"x"===e?"y":"x"}function h(e){return"y"===e?"height":"width"}function g(e){return["top","bottom"].includes(p(e))?"y":"x"}function v(e){return m(g(e))}function b(e,t,n){void 0===n&&(n=!1);let r=f(e),o=v(e),i=h(o),a="x"===o?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return t.reference[i]>t.floating[i]&&(a=w(a)),[a,w(a)]}function y(e){let t=w(e);return[x(e),t,x(t)]}function x(e){return e.replace(/start|end/g,e=>l[e])}function k(e,t,n,r){let o=f(e),i=function(e,t,n){let r=["left","right"],o=["right","left"];switch(e){case"top":case"bottom":if(n)return t?o:r;return t?r:o;case"left":case"right":return t?["top","bottom"]:["bottom","top"];default:return[]}}(p(e),"start"===n,r);return o&&(i=i.map(e=>e+"-"+o),t&&(i=i.concat(i.map(x)))),i}function w(e){return e.replace(/left|right|bottom|top/g,e=>c[e])}function j(e){return"number"!=typeof e?{top:0,right:0,bottom:0,left:0,...e}:{top:e,right:e,bottom:e,left:e}}function C(e){return{...e,top:e.y,left:e.x,right:e.x+e.width,bottom:e.y+e.height}}},45392:function(e,t,n){"use strict";n.d(t,{Z:function(){return s},a:function(){return a}});var r=n(2784);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 s(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)}},73681:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var r=n(2784),o={outline:{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"},filled:{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"}};/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */let i=(e,t,n,i)=>{let a=(0,r.forwardRef)(({color:n="currentColor",size:a=24,stroke:s=2,className:c,children:l,...u},d)=>(0,r.createElement)("svg",{ref:d,...o[e],width:a,height:a,className:["tabler-icon",`tabler-icon-${t}`,c].join(" "),..."filled"===e?{fill:n}:{strokeWidth:s,stroke:n},...u},[...i.map(([e,t])=>(0,r.createElement)(e,t)),...Array.isArray(l)?l:[l]]));return a.displayName=`${n}`,a}},59443:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},9705:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","check","IconCheck",[["path",{d:"M5 12l5 5l10 -10",key:"svg-0"}]])},92536:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","chevron-down","IconChevronDown",[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]])},90982:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},43300:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},79797:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},97189:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},48671:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},59660:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},19289:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},4680:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},27111:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},90664:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},40991:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},47608:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** + * @license @tabler/icons-react v3.3.0 - MIT + * + * This source code is licensed under the MIT license. + * See the LICENSE file in the root directory of this source tree. + */var r=(0,n(73681).Z)("outline","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"}]])},40489:function(e,t,n){"use strict";t.Z=function(){for(var e,t,n=0,r="",o=arguments.length;n({group:{"--ai-border-width":(0,f.h)(t)}})),b=(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:f,borderWidth:m,variant:b,mod:y,...x}=(0,a.w)("ActionIconGroup",g,e),k=(0,s.y)({name:"ActionIconGroup",props:n,classes:h,className:o,style:i,classNames:l,styles:u,unstyled:d,vars:f,varsResolver:v,rootSelector:"group"});return(0,r.jsx)(c.x,{...k("group"),ref:t,variant:b,mod:[{"data-orientation":p},y],role:"group",...x})});b.classes=h,b.displayName="@mantine/core/ActionIconGroup";let y={},x=(0,i.Z)((e,{size:t,radius:n,variant:r,gradient:i,color:a,autoContrast:s})=>{let c=e.variantColorResolver({color:a||e.primaryColor,theme:e,gradient:i,variant:r||"filled",autoContrast:s});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?c.background:void 0,"--ai-hover":a||r?c.hover:void 0,"--ai-hover-color":a||r?c.hoverColor:void 0,"--ai-color":c.color,"--ai-bd":a||r?c.border:void 0}}}),k=(0,l.b)((e,t)=>{let n=(0,a.w)("ActionIcon",y,e),{className:o,unstyled:i,variant:l,classNames:f,styles:m,style:g,loading:v,loaderProps:b,size:k,color:w,radius:j,__staticSelector:C,gradient:S,vars:I,children:M,disabled:T,"data-disabled":E,autoContrast:P,mod:R,...N}=n,_=(0,s.y)({name:["ActionIcon",C],props:n,className:o,style:g,classes:h,classNames:f,styles:m,unstyled:i,vars:I,varsResolver:x});return(0,r.jsxs)(p.k,{..._("root",{active:!T&&!v&&!E}),...N,unstyled:i,variant:l,size:k,disabled:T||v,ref:t,mod:[{loading:v,disabled:T||E},R],children:[(0,r.jsx)(d.u,{mounted:!!v,transition:"slide-down",duration:150,children:e=>(0,r.jsx)(c.x,{component:"span",..._("loader",{style:e}),"aria-hidden":!0,children:(0,r.jsx)(u.a,{color:"var(--ai-color)",size:"calc(var(--ai-size) * 0.55)",...b})})}),(0,r.jsx)(c.x,{component:"span",mod:{loading:v},..._("icon"),children:M})]})});k.classes=h,k.displayName="@mantine/core/ActionIcon",k.Group=b},71873:function(e,t,n){"use strict";n.d(t,{e:function(){return u}});var r=n(52322),o=n(40489);n(2784);var i=n(38483),a=n(33502),s=n(8582),c={root:"m_849cf0da"};let l={underline:"hover"},u=(0,a.b)((e,t)=>{let{underline:n,className:a,unstyled:u,mod:d,...p}=(0,i.w)("Anchor",l,e);return(0,r.jsx)(s.x,{component:"a",ref:t,className:(0,o.Z)({[c.root]:!u},a),...p,mod:[{underline:n},d],__staticSelector:"Anchor",unstyled:u})});u.classes=c,u.displayName="@mantine/core/Anchor"},94856:function(e,t,n){"use strict";n.d(t,{V:function(){return v}});var r=n(52322),o=n(58898);n(2784);var i=n(91482),a=n(11200),s=n(46403),c=n(13588),l=n(20754),u=n(38483),d=n(46690),p=n(28559),f=n(82027),m={root:"m_ddec01c0",icon:"m_dde7bd57",cite:"m_dde51a35"};let h={iconSize:48},g=(0,a.Z)((e,{color:t,iconSize:n,radius:r})=>{let a=(0,s.E)({color:t||e.primaryColor,theme:e,colorScheme:"dark"}),u=(0,s.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,c.p)(t,e),"--bq-icon-size":(0,o.h)(n),"--bq-radius":(0,i.H5)(r)}}}),v=(0,f.d)((e,t)=>{let n=(0,u.w)("Blockquote",h,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,children:f,icon:v,iconSize:b,cite:y,...x}=n,k=(0,d.y)({name:"Blockquote",classes:m,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:g});return(0,r.jsxs)(p.x,{component:"blockquote",ref:t,...k("root"),...x,children:[v&&(0,r.jsx)("span",{...k("icon"),children:v}),f,y&&(0,r.jsx)("cite",{...k("cite"),children:y})]})});v.classes=m,v.displayName="@mantine/core/Blockquote"},23205:function(e,t,n){"use strict";n.d(t,{O:function(){return h}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(13588),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d=n(63409),p={root:"m_fea6bf1a",burger:"m_d4fb9cad"};let f={},m=(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}})),h=(0,u.d)((e,t)=>{let n=(0,s.w)("Burger",f,e),{classNames:o,className:i,style:a,styles:u,unstyled:h,vars:g,opened:v,children:b,transitionDuration:y,transitionTimingFunction:x,...k}=n,w=(0,c.y)({name:"Burger",classes:p,props:n,className:i,style:a,classNames:o,styles:u,unstyled:h,vars:g,varsResolver:m});return(0,r.jsxs)(d.k,{...w("root"),ref:t,...k,children:[(0,r.jsx)(l.x,{mod:["reduce-motion",{opened:v}],...w("burger")}),b]})});h.classes=p,h.displayName="@mantine/core/Burger"},17115:function(e,t,n){"use strict";n.d(t,{z:function(){return w}});var r=n(52322),o=n(58898);n(2784);var i=n(91482),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(33502),d=n(12491),p=n(96321),f=n(63409),m=n(82027),h={root:"m_77c9d27d",inner:"m_80f1301b",label:"m_811560b9",section:"m_a74036a",loader:"m_a25b86ee",group:"m_80d6d844"};let g={orientation:"horizontal"},v=(0,a.Z)((e,{borderWidth:t})=>({group:{"--button-border-width":(0,o.h)(t)}})),b=(0,m.d)((e,t)=>{let n=(0,s.w)("ButtonGroup",g,e),{className:o,style:i,classNames:a,styles:u,unstyled:d,orientation:p,vars:f,borderWidth:m,variant:b,mod:y,...x}=(0,s.w)("ButtonGroup",g,e),k=(0,c.y)({name:"ButtonGroup",props:n,classes:h,className:o,style:i,classNames:a,styles:u,unstyled:d,vars:f,varsResolver:v,rootSelector:"group"});return(0,r.jsx)(l.x,{...k("group"),ref:t,variant:b,mod:[{"data-orientation":p},y],role:"group",...x})});b.classes=h,b.displayName="@mantine/core/ButtonGroup";let y={in:{opacity:1,transform:`translate(-50%, calc(-50% + ${(0,o.h)(1)}))`},out:{opacity:0,transform:"translate(-50%, -200%)"},common:{transformOrigin:"center"},transitionProperty:"transform, opacity"},x={},k=(0,a.Z)((e,{radius:t,color:n,gradient:r,variant:o,size:a,justify:s,autoContrast:c})=>{let l=e.variantColorResolver({color:n||e.primaryColor,theme:e,gradient:r,variant:o||"filled",autoContrast:c});return{root:{"--button-justify":s,"--button-height":(0,i.ap)(a,"button-height"),"--button-padding-x":(0,i.ap)(a,"button-padding-x"),"--button-fz":a?.includes("compact")?(0,i.yv)(a.replace("compact-","")):(0,i.yv)(a),"--button-radius":void 0===t?void 0:(0,i.H5)(t),"--button-bg":n||o?l.background:void 0,"--button-hover":n||o?l.hover:void 0,"--button-color":l.color,"--button-bd":n||o?l.border:void 0,"--button-hover-color":n||o?l.hoverColor:void 0}}}),w=(0,u.b)((e,t)=>{let n=(0,s.w)("Button",x,e),{style:o,vars:i,className:a,color:u,disabled:m,children:g,leftSection:v,rightSection:b,fullWidth:w,variant:j,radius:C,loading:S,loaderProps:I,gradient:M,classNames:T,styles:E,unstyled:P,"data-disabled":R,autoContrast:N,mod:_,...F}=n,B=(0,c.y)({name:"Button",props:n,classes:h,className:a,style:o,classNames:T,styles:E,unstyled:P,vars:i,varsResolver:k}),A=!!v,L=!!b;return(0,r.jsxs)(f.k,{ref:t,...B("root",{active:!m&&!S&&!R}),unstyled:P,variant:j,disabled:m||S,mod:[{disabled:m||R,loading:S,block:w,"with-left-section":A,"with-right-section":L},_],...F,children:[(0,r.jsx)(p.u,{mounted:!!S,transition:y,duration:150,children:e=>(0,r.jsx)(l.x,{component:"span",...B("loader",{style:e}),"aria-hidden":!0,children:(0,r.jsx)(d.a,{color:"var(--button-color)",size:"calc(var(--button-height) / 1.8)",...I})})}),(0,r.jsxs)("span",{...B("inner"),children:[v&&(0,r.jsx)(l.x,{component:"span",...B("section"),mod:{position:"left"},children:v}),(0,r.jsx)(l.x,{component:"span",mod:{loading:S},...B("label"),children:g}),b&&(0,r.jsx)(l.x,{component:"span",...B("section"),mod:{position:"right"},children:b})]})]})});w.classes=h,w.displayName="@mantine/core/Button",w.Group=b},40284:function(e,t,n){"use strict";n.d(t,{P:function(){return a},n:function(){return i}});var r=n(52322),o=n(58898);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(0,r.jsx)("svg",{viewBox:"0 0 10 7",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:i,"aria-hidden":!0,...n,children:(0,r.jsx)("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?(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 32 6","aria-hidden":!0,...t,children:(0,r.jsx)("rect",{width:"32",height:"6",fill:"currentColor",rx:"3"})}):(0,r.jsx)(i,{...t})}n(2784)},95047:function(e,t,n){"use strict";n.d(t,{X:function(){return H}});var r=n(52322),o=n(66178),i=n(2784),a=n(91482),s=n(11200),c=n(46403),l=n(13588),u=n(39568),d=n(90006),p=n(38483),f=n(46690),m=n(97072),h=n(28559),g=n(82027),v=n(50569),b=n(63409);let y=(0,i.createContext)(null),x=y.Provider,k=()=>(0,i.useContext)(y),[w,j]=(0,n(75336).V)();var C={card:"m_26775b0a"};let S={withBorder:!0},I=(0,s.Z)((e,{radius:t})=>({card:{"--card-radius":(0,a.H5)(t)}})),M=(0,g.d)((e,t)=>{let n=(0,p.w)("CheckboxCard",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,checked:u,mod:d,withBorder:m,value:h,onClick:g,...v}=n,y=(0,f.y)({name:"CheckboxCard",classes:C,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:I,rootSelector:"card"}),x=k(),j="boolean"==typeof u?u:x?.value.includes(h||"")||!1;return(0,r.jsx)(w,{value:{checked:j},children:(0,r.jsx)(b.k,{ref:t,mod:[{"with-border":m,checked:j},d],...y("card"),...v,role:"checkbox","aria-checked":j,onClick:e=>{g?.(e),x?.onChange(h||"")}})})});M.displayName="@mantine/core/CheckboxCard",M.classes=C;var T=n(9341),E=n(6941),P=n(62770);let R={},N=(0,g.d)((e,t)=>{let{value:n,defaultValue:o,onChange:i,size:a,wrapperProps:s,children:c,readOnly:l,...u}=(0,p.w)("CheckboxGroup",R,e),[d,f]=(0,T.C)({value:n,defaultValue:o,finalValue:[],onChange:i});return(0,r.jsx)(x,{value:{value:d,onChange:e=>{let t="string"==typeof e?e:e.currentTarget.value;l||f(d.includes(t)?d.filter(e=>e!==t):[...d,t])},size:a},children:(0,r.jsx)(E.I.Wrapper,{size:a,ref:t,...s,...u,labelElement:"div",__staticSelector:"CheckboxGroup",children:(0,r.jsx)(P.m,{role:"group",children:c})})})});N.classes=E.I.Wrapper.classes,N.displayName="@mantine/core/CheckboxGroup";var _=n(40284),F={indicator:"m_5e5256ee",icon:"m_1b1c543a","indicator--outline":"m_76e20374"};let B={icon:_.P},A=(0,s.Z)((e,{radius:t,color:n,size:r,iconColor:o,variant:i,autoContrast:s})=>{let p=(0,c.E)({color:n||e.primaryColor,theme:e}),f=p.isThemeColor&&void 0===p.shade?`var(--mantine-color-${p.color}-outline)`:p.color;return{indicator:{"--checkbox-size":(0,a.ap)(r,"checkbox-size"),"--checkbox-radius":void 0===t?void 0:(0,a.H5)(t),"--checkbox-color":"outline"===i?f:(0,l.p)(n,e),"--checkbox-icon-color":o?(0,l.p)(o,e):(0,d.o)(s,e)?(0,u.R)({color:n,theme:e,autoContrast:s}):void 0}}}),L=(0,g.d)((e,t)=>{let n=(0,p.w)("CheckboxIndicator",B,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,icon:u,indeterminate:d,radius:m,color:g,iconColor:v,autoContrast:b,checked:y,mod:x,variant:k,disabled:w,...C}=n,S=(0,f.y)({name:"CheckboxIndicator",classes:F,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:A,rootSelector:"indicator"}),I=j(),M="boolean"==typeof y||"boolean"==typeof d?y||d:I?.checked||!1;return(0,r.jsx)(h.x,{ref:t,...S("indicator",{variant:k}),variant:k,mod:[{checked:M,disabled:w},x],...C,children:(0,r.jsx)(u,{indeterminate:d,...S("icon")})})});L.displayName="@mantine/core/CheckboxIndicator",L.classes=F;var D={root:"m_bf2d988c",inner:"m_26062bec",input:"m_26063560",icon:"m_bf295423","input--outline":"m_215c4542"};let $={labelPosition:"right",icon:_.P},z=(0,s.Z)((e,{radius:t,color:n,size:r,iconColor:o,variant:i,autoContrast:s})=>{let p=(0,c.E)({color:n||e.primaryColor,theme:e}),f=p.isThemeColor&&void 0===p.shade?`var(--mantine-color-${p.color}-outline)`:p.color;return{root:{"--checkbox-size":(0,a.ap)(r,"checkbox-size"),"--checkbox-radius":void 0===t?void 0:(0,a.H5)(t),"--checkbox-color":"outline"===i?f:(0,l.p)(n,e),"--checkbox-icon-color":o?(0,l.p)(o,e):(0,d.o)(s,e)?(0,u.R)({color:n,theme:e,autoContrast:s}):void 0}}}),H=(0,g.d)((e,t)=>{let n=(0,p.w)("Checkbox",$,e),{classNames:i,className:a,style:s,styles:c,unstyled:l,vars:u,color:d,label:g,id:b,size:y,radius:x,wrapperProps:w,children:j,checked:C,labelPosition:S,description:I,error:M,disabled:T,variant:E,indeterminate:P,icon:R,rootRef:N,iconColor:_,onChange:F,autoContrast:B,mod:A,...L}=n,H=k(),O=y||H?.size,Z=(0,f.y)({name:"Checkbox",props:n,classes:D,className:a,style:s,classNames:i,styles:c,unstyled:l,vars:u,varsResolver:z}),{styleProps:V,rest:G}=(0,m.c)(L),W=(0,o.M)(b),Y=H?{checked:H.value.includes(G.value),onChange:e=>{H.onChange(e),F?.(e)}}:{};return(0,r.jsx)(v.Z,{...Z("root"),__staticSelector:"Checkbox",__stylesApiProps:n,id:W,size:O,labelPosition:S,label:g,description:I,error:M,disabled:T,classNames:i,styles:c,unstyled:l,"data-checked":Y.checked||C||void 0,variant:E,ref:N,mod:A,...V,...w,children:(0,r.jsxs)(h.x,{...Z("inner"),mod:{"data-label-position":S},children:[(0,r.jsx)(h.x,{component:"input",id:W,ref:t,checked:C,disabled:T,mod:{error:!!M,indeterminate:P},...Z("input",{focusable:!0,variant:E}),onChange:F,...G,...Y,type:"checkbox"}),(0,r.jsx)(R,{indeterminate:P,...Z("icon")})]})})});H.classes={...D,...v.J},H.displayName="@mantine/core/Checkbox",H.Group=N,H.Indicator=L,H.Card=M},2670:function(e,t,n){"use strict";n.d(t,{P:function(){return g}});var r=n(52322),o=n(58898),i=n(2784),a=n(91482),s=n(11200),c=n(38483),l=n(46690),u=n(33502),d=n(63409);let p=(0,i.forwardRef)(({size:e="var(--cb-icon-size, 70%)",style:t,...n},o)=>(0,r.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{...t,width:e,height:e},ref:o,...n,children:(0,r.jsx)("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"})}));p.displayName="@mantine/core/CloseIcon";var f={root:"m_86a44da5","root--subtle":"m_220c80f2"};let m={variant:"subtle"},h=(0,s.Z)((e,{size:t,radius:n,iconSize:r})=>({root:{"--cb-size":(0,a.ap)(t,"cb-size"),"--cb-radius":void 0===n?void 0:(0,a.H5)(n),"--cb-icon-size":(0,o.h)(r)}})),g=(0,u.b)((e,t)=>{let n=(0,c.w)("CloseButton",m,e),{iconSize:o,children:i,vars:a,radius:s,className:u,classNames:g,style:v,styles:b,unstyled:y,"data-disabled":x,disabled:k,variant:w,icon:j,mod:C,...S}=n,I=(0,l.y)({name:"CloseButton",props:n,className:u,style:v,classes:f,classNames:g,styles:b,unstyled:y,vars:a,varsResolver:h});return(0,r.jsxs)(d.k,{ref:t,...S,unstyled:y,variant:w,disabled:k,mod:[{disabled:k||x},C],...I("root",{variant:w,active:!k&&!x}),children:[j||(0,r.jsx)(p,{}),i]})});g.classes=f,g.displayName="@mantine/core/CloseButton"},45909:function(e,t,n){"use strict";n.d(t,{E:function(){return f}});var r=n(52322);n(2784);var o=n(11200),i=n(13588),a=n(38483),s=n(46690),c=n(28559),l=n(82027),u={root:"m_b183c0a2"};let d={},p=(0,o.Z)((e,{color:t})=>({root:{"--code-bg":t?(0,i.p)(t,e):void 0}})),f=(0,l.d)((e,t)=>{let n=(0,a.w)("Code",d,e),{classNames:o,className:i,style:l,styles:f,unstyled:m,vars:h,color:g,block:v,variant:b,mod:y,...x}=n,k=(0,s.y)({name:"Code",props:n,classes:u,className:i,style:l,classNames:o,styles:f,unstyled:m,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{component:v?"pre":"code",variant:b,ref:t,mod:[{block:v},y],...k("root"),...x,dir:"ltr"})});f.classes=u,f.displayName="@mantine/core/Code"},14726:function(e,t,n){"use strict";n.d(t,{k:function(){return u}});var r=n(52322),o=n(2784),i=n(58898),a=n(38483),s=n(53081),c=n(88957);let l={},u=(0,o.forwardRef)((e,t)=>{let{value:n,onChange:o,onChangeEnd:u,color:d,...p}=(0,a.w)("AlphaSlider",l,e);return(0,r.jsx)(s._,{...p,ref:t,value:n,onChange:e=>o?.(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,i.h)(8)} ${(0,i.h)(8)}`,backgroundPosition:`0 0, 0 ${(0,i.h)(4)}, ${(0,i.h)(4)} ${(0,i.h)(-4)}, ${(0,i.h)(-4)} 0`},{backgroundImage:`linear-gradient(90deg, transparent, ${d})`},{boxShadow:`rgba(0, 0, 0, .1) 0 0 0 ${(0,i.h)(1)} inset, rgb(0, 0, 0, .15) 0 0 ${(0,i.h)(4)} inset`}]})});u.displayName="@mantine/core/AlphaSlider"},40993:function(e,t,n){"use strict";n.d(t,{K:function(){return r},j:function(){return o}}),n(2784),n(52322);let[r,o]=(0,n(75336).V)(null)},37574:function(e,t,n){"use strict";n.d(t,{z:function(){return I}});var r=n(52322),o=n(2784),i=n(9341),a=n(71978),s=n(91482),c=n(11200),l=n(38483),u=n(46690),d=n(28559),p=n(82027),f=n(27009),m=n(14726),h=n(40993),g=n(59835),v=n(88957),b=n(93262),y=n(51438),x=n(55170);function k({className:e,onChange:t,onChangeEnd:n,value:i,saturationLabel:a,focusable:s=!0,size:c,color:l,onScrubStart:u,onScrubEnd:p,...f}){let{getStyles:m}=(0,h.j)(),[v,b]=(0,o.useState)({x:i.s/100,y:1-i.v/100}),k=(0,o.useRef)(v),{ref:w}=(0,y.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)}),p?.()},onScrubStart:u});(0,o.useEffect)(()=>{b({x:i.s/100,y:1-i.v/100})},[i.s,i.v]);let j=(e,r)=>{e.preventDefault();let o=(0,y.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(0,r.jsxs)(d.x,{...m("saturation"),ref:w,...f,role:"slider","aria-label":a,"aria-valuenow":v.x,"aria-valuetext":(0,g.Rt)("rgba",i),tabIndex:s?0:-1,onKeyDown:e=>{switch(e.key){case"ArrowUp":j(e,{y:v.y-.05,x:v.x});break;case"ArrowDown":j(e,{y:v.y+.05,x:v.x});break;case"ArrowRight":j(e,{x:v.x+.05,y:v.y});break;case"ArrowLeft":j(e,{x:v.x-.05,y:v.y})}},children:[(0,r.jsx)("div",{...m("saturationOverlay",{style:{backgroundColor:`hsl(${i.h}, 100%, 50%)`}})}),(0,r.jsx)("div",{...m("saturationOverlay",{style:{backgroundImage:"linear-gradient(90deg, #fff, transparent)"}})}),(0,r.jsx)("div",{...m("saturationOverlay",{style:{backgroundImage:"linear-gradient(0deg, #000, transparent)"}})}),(0,r.jsx)(x.b,{position:v,...m("thumb",{style:{backgroundColor:l}})})]})}k.displayName="@mantine/core/Saturation";let w=(0,o.forwardRef)(({className:e,datatype:t,setValue:n,onChangeEnd:i,size:a,focusable:s,data:c,swatchesPerRow:l,...u},p)=>{let m=(0,h.j)(),g=c.map((e,t)=>(0,o.createElement)(f.b,{...m.getStyles("swatch"),unstyled:m.unstyled,component:"button",type:"button",color:e,key:t,radius:"sm",onClick:()=>{n(e),i?.(e)},"aria-label":e,tabIndex:s?0:-1,"data-swatch":!0}));return(0,r.jsx)(d.x,{...m.getStyles("swatches"),ref:p,...u,children:g})});w.displayName="@mantine/core/Swatches";var j=n(37873);let C={swatchesPerRow:7,withPicker:!0,focusable:!0,size:"md",__staticSelector:"ColorPicker"},S=(0,c.Z)((e,{size:t,swatchesPerRow:n})=>({wrapper:{"--cp-preview-size":(0,s.ap)(t,"cp-preview-size"),"--cp-width":(0,s.ap)(t,"cp-width"),"--cp-body-spacing":(0,s.bG)(t),"--cp-swatch-size":`${100/n}%`,"--cp-thumb-size":(0,s.ap)(t,"cp-thumb-size"),"--cp-saturation-height":(0,s.ap)(t,"cp-saturation-height")}})),I=(0,p.d)((e,t)=>{let n=(0,l.w)("ColorPicker",C,e),{classNames:s,className:c,style:p,styles:y,unstyled:x,vars:I,format:M,value:T,defaultValue:E,onChange:P,onChangeEnd:R,withPicker:N,size:_,saturationLabel:F,hueLabel:B,alphaLabel:A,focusable:L,swatches:D,swatchesPerRow:$,fullWidth:z,onColorSwatchClick:H,__staticSelector:O,mod:Z,...V}=n,G=(0,u.y)({name:O,props:n,classes:j.Z,className:c,style:p,classNames:s,styles:y,unstyled:x,rootSelector:"wrapper",vars:I,varsResolver:S}),W=(0,o.useRef)(M),Y=(0,o.useRef)(),q=(0,o.useRef)(-1),K=(0,o.useRef)(!1),U="hexa"===M||"rgba"===M||"hsla"===M,[X,J,Q]=(0,i.C)({value:T,defaultValue:E,finalValue:"#FFFFFF",onChange:P}),[ee,et]=(0,o.useState)((0,v.lu)(X)),en=()=>{window.clearTimeout(q.current),K.current=!0},er=()=>{window.clearTimeout(q.current),q.current=window.setTimeout(()=>{K.current=!1},200)},eo=e=>{et(t=>{let n={...t,...e};return Y.current=(0,g.Rt)(W.current,n),n}),J(Y.current)};return(0,a.l)(()=>{(0,v.fi)(T)&&!K.current&&et((0,v.lu)(T))},[T]),(0,a.l)(()=>{W.current=M,J((0,g.Rt)(M,ee))},[M]),(0,r.jsx)(h.K,{value:{getStyles:G,unstyled:x},children:(0,r.jsxs)(d.x,{ref:t,...G("wrapper"),size:_,mod:[{"full-width":z},Z],...V,children:[N&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(k,{value:ee,onChange:eo,onChangeEnd:({s:e,v:t})=>R?.(g.Rt(W.current,{...ee,s:e,v:t})),color:X,size:_,focusable:L,saturationLabel:F,onScrubStart:en,onScrubEnd:er}),(0,r.jsxs)("div",{...G("body"),children:[(0,r.jsxs)("div",{...G("sliders"),children:[(0,r.jsx)(b.Q,{value:ee.h,onChange:e=>eo({h:e}),onChangeEnd:e=>R?.(g.Rt(W.current,{...ee,h:e})),size:_,focusable:L,"aria-label":B,onScrubStart:en,onScrubEnd:er}),U&&(0,r.jsx)(m.k,{value:ee.a,onChange:e=>eo({a:e}),onChangeEnd:e=>{R?.(g.Rt(W.current,{...ee,a:e}))},size:_,color:(0,g.Rt)("hex",ee),focusable:L,"aria-label":A,onScrubStart:en,onScrubEnd:er})]}),U&&(0,r.jsx)(f.b,{color:X,radius:"sm",size:"var(--cp-preview-size)",...G("preview")})]})]}),Array.isArray(D)&&(0,r.jsx)(w,{data:D,swatchesPerRow:$,focusable:L,setValue:J,onChangeEnd:e=>{let t=(0,g.Rt)(M,(0,v.lu)(e));H?.(t),R?.(t),Q||et((0,v.lu)(e))}})]})})});I.classes=j.Z,I.displayName="@mantine/core/ColorPicker"},37873: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"}},53081:function(e,t,n){"use strict";n.d(t,{_:function(){return b}});var r=n(52322),o=n(2784),i=n(51438),a=n(71978),s=n(70837),c=n(58898),l=n(68755),u=n(38483),d=n(46690),p=n(28559),f=n(82027),m=n(40993),h=n(55170),g=n(37873);let v={},b=(0,f.d)((e,t)=>{let n=(0,u.w)("ColorSlider",v,e),{classNames:f,className:b,style:y,styles:x,unstyled:k,vars:w,onChange:j,onChangeEnd:C,maxValue:S,round:I,size:M="md",focusable:T=!0,value:E,overlays:P,thumbColor:R="transparent",onScrubStart:N,onScrubEnd:_,__staticSelector:F="ColorPicker",...B}=n,A=(0,d.y)({name:F,classes:g.Z,props:n,className:b,style:y,classNames:f,styles:x,unstyled:k}),L=m.j()?.getStyles||A,D=(0,l.rZ)(),[$,z]=(0,o.useState)({y:0,x:E/S}),H=(0,o.useRef)($),O=e=>I?Math.round(e*S):e*S,{ref:Z}=(0,i.r)(({x:e,y:t})=>{H.current={x:e,y:t},j?.(O(e))},{onScrubEnd:()=>{let{x:e}=H.current;C?.(O(e)),_?.()},onScrubStart:N});(0,a.l)(()=>{z({y:0,x:E/S})},[E]);let V=(e,t)=>{e.preventDefault();let n=(0,i.E)(t);j?.(O(n.x)),C?.(O(n.x))},G=P.map((e,t)=>(0,o.createElement)("div",{...L("sliderOverlay"),style:e,key:t}));return(0,r.jsxs)(p.x,{...B,ref:(0,s.Yx)(Z,t),...L("slider"),role:"slider","aria-valuenow":E,"aria-valuemax":S,"aria-valuemin":0,tabIndex:T?0:-1,onKeyDown:e=>{switch(e.key){case"ArrowRight":V(e,{x:$.x+.05,y:$.y});break;case"ArrowLeft":V(e,{x:$.x-.05,y:$.y})}},"data-focus-ring":D.focusRing,__vars:{"--cp-thumb-size":`var(--cp-thumb-size-${M})`},children:[G,(0,r.jsx)(h.b,{position:$,...L("thumb",{style:{top:(0,c.h)(1),background:R}})})]})});b.displayName="@mantine/core/ColorSlider"},93262:function(e,t,n){"use strict";n.d(t,{Q:function(){return c}});var r=n(52322),o=n(2784),i=n(58898),a=n(38483),s=n(53081);let c=(0,o.forwardRef)((e,t)=>{let{value:n,onChange:o,onChangeEnd:c,color:l,...u}=(0,a.w)("HueSlider",{},e);return(0,r.jsx)(s._,{...u,ref:t,value:n,onChange:o,onChangeEnd:c,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,i.h)(1)} inset, rgb(0, 0, 0, .15) 0 0 ${(0,i.h)(4)} inset`}]})});c.displayName="@mantine/core/HueSlider"},55170:function(e,t,n){"use strict";n.d(t,{b:function(){return a}});var r=n(52322),o=n(2784),i=n(28559);let a=(0,o.forwardRef)(({position:e,...t},n)=>(0,r.jsx)(i.x,{ref:n,__vars:{"--thumb-y-offset":`${100*e.y}%`,"--thumb-x-offset":`${100*e.x}%`},...t}));a.displayName="@mantine/core/ColorPickerThumb"},59835:function(e,t,n){"use strict";n.d(t,{Rt:function(){return u}});var r=n(88957);function o({h:e,s:t,v:n,a:o}){let i=e/360*6,a=t/100,s=n/100,c=Math.floor(i),l=s*(1-a),u=s*(1-(i-c)*a),d=s*(1-(1-i+c)*a),p=c%6;return{r:(0,r.NM)(255*[s,u,l,l,d,s][p]),g:(0,r.NM)(255*[d,s,s,u,l,l][p]),b:(0,r.NM)(255*[l,l,d,s,s,u][p]),a:(0,r.NM)(o,2)}}function i(e,t){let{r:n,g:i,b:a,a:s}=o(e);return t?`rgba(${n}, ${i}, ${a}, ${(0,r.NM)(s,2)})`:`rgb(${n}, ${i}, ${a})`}function a({h:e,s:t,v:n,a:o},i){let a=(200-t)*n/100,s={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(${s.h}, ${s.s}%, ${s.l}%, ${(0,r.NM)(o,2)})`:`hsl(${s.h}, ${s.s}%, ${s.l}%)`}function s(e){let t=e.toString(16);return t.length<2?`0${t}`:t}function c(e){let{r:t,g:n,b:r}=o(e);return`#${s(t)}${s(n)}${s(r)}`}let l={hex:c,hexa:e=>(function(e){let t=Math.round(255*e.a);return`${c(e)}${s(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"}},88957: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 f},lu:function(){return m}});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=(n<50?n:100-n)/100*t;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 s({r:e,g:t,b:n,a:o}){let i=Math.max(e,t,n),a=i-Math.min(e,t,n),s=a?i===e?(t-n)/a:i===t?2+(n-e)/a:4+(e-t)/a:0;return{h:r(60*(s<0?s+6:s),3),s:r(i?a/i*100:0,3),v:r(i/255*100,3),a:o}}function c(e){let t="#"===e[0]?e.slice(1):e;return 3===t.length?s({r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:1}):s({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?s({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:c,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]);return{...c(e),a:r}}let o=t.slice(0,6),i=n(t.slice(6,8));return{...c(o),a:i}},rgb:u,rgba:u,hsl:a,hsla:a};function f(e){for(let[,t]of Object.entries(d))if(t.test(e))return!0;return!1}function m(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}}},27009:function(e,t,n){"use strict";n.d(t,{b:function(){return m}});var r=n(52322),o=n(58898);n(2784);var i=n(91482),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(33502),d={root:"m_de3d2490",colorOverlay:"m_862f3d1b",shadowOverlay:"m_98ae7f22",alphaOverlay:"m_95709ac0",childrenOverlay:"m_93e74e3"};let p={withShadow:!0},f=(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)}})),m=(0,u.b)((e,t)=>{let n=(0,s.w)("ColorSwatch",p,e),{classNames:o,className:i,style:a,styles:u,unstyled:m,vars:h,color:g,size:v,radius:b,withShadow:y,children:x,variant:k,...w}=(0,s.w)("ColorSwatch",p,n),j=(0,c.y)({name:"ColorSwatch",props:n,classes:d,className:i,style:a,classNames:o,styles:u,unstyled:m,vars:h,varsResolver:f});return(0,r.jsxs)(l.x,{ref:t,variant:k,size:v,...j("root",{focusable:!0}),...w,children:[(0,r.jsx)("span",{...j("alphaOverlay")}),y&&(0,r.jsx)("span",{...j("shadowOverlay")}),(0,r.jsx)("span",{...j("colorOverlay",{style:{backgroundColor:g}})}),(0,r.jsx)("span",{...j("childrenOverlay"),children:x})]})});m.classes=d,m.displayName="@mantine/core/ColorSwatch"},61271: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"}},54178:function(e,t,n){"use strict";n.d(t,{d:function(){return f}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(38483),s=n(46690),c=n(28559),l=n(82027),u=n(61271);let d={error:null},p=(0,i.Z)((e,{size:t})=>({chevron:{"--combobox-chevron-size":(0,o.ap)(t,"combobox-chevron-size")}})),f=(0,l.d)((e,t)=>{let n=(0,a.w)("ComboboxChevron",d,e),{size:o,error:i,style:l,className:f,classNames:m,styles:h,unstyled:g,vars:v,mod:b,...y}=n,x=(0,s.y)({name:"ComboboxChevron",classes:u.Z,props:n,style:l,className:f,classNames:m,styles:h,unstyled:g,vars:v,varsResolver:p,rootSelector:"chevron"});return(0,r.jsx)(c.x,{component:"svg",...y,...x("chevron"),size:o,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",mod:["combobox-chevron",{error:i},b],ref:t,children:(0,r.jsx)("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"})})});f.classes=u.Z,f.displayName="@mantine/core/ComboboxChevron"},29995: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}})},87385:function(e,t,n){"use strict";n.d(t,{q:function(){return s}});var r=n(52322),o=n(78574);n(2784);var i=n(38483);let a={timeout:1e3};function s(e){let{children:t,timeout:n,value:s,...c}=(0,i.w)("CopyButton",a,e),l=(0,o.V)({timeout:n});return(0,r.jsx)(r.Fragment,{children:t({copy:()=>l.copy(s),copied:l.copied,...c})})}s.displayName="@mantine/core/CopyButton"},62086:function(e,t,n){"use strict";n.d(t,{Y:function(){return u}});var r=n(52322),o=n(2784),i=n(89027),a=n(58898);function s(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 l={bottom:"borderTopLeftRadius",left:"borderTopRightRadius",right:"borderBottomLeftRadius",top:"borderBottomRightRadius"},u=(0,o.forwardRef)(({position:e,arrowSize:t,arrowOffset:n,arrowRadius:o,arrowPosition:u,visible:d,arrowX:p,arrowY:f,style:m,...h},g)=>{let{dir:v}=(0,i.gm)();return d?(0,r.jsx)("div",{...h,ref:g,style:{...m,...function({position:e,arrowSize:t,arrowOffset:n,arrowRadius:r,arrowPosition:o,arrowX:i,arrowY:u,dir:d}){let[p,f="center"]=e.split("-"),m={width:(0,a.h)(t),height:(0,a.h)(t),transform:"rotate(45deg)",position:"absolute",[l[p]]:(0,a.h)(r)},h=(0,a.h)(-t/2);return"left"===p?{...m,...s(f,u,n,o),right:h,borderLeftColor:"transparent",borderBottomColor:"transparent"}:"right"===p?{...m,...s(f,u,n,o),left:h,borderRightColor:"transparent",borderTopColor:"transparent"}:"top"===p?{...m,...c(f,i,n,o,d),bottom:h,borderTopColor:"transparent",borderLeftColor:"transparent"}:"bottom"===p?{...m,...c(f,i,n,o,d),top:h,borderBottomColor:"transparent",borderRightColor:"transparent"}:{}}({position:e,arrowSize:t,arrowOffset:n,arrowRadius:o,arrowPosition:u,dir:v,arrowX:p,arrowY:f})}}):null});u.displayName="@mantine/core/FloatingArrow"},71916: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}})},39461:function(e,t,n){"use strict";n.d(t,{U:function(){return o}});var r=n(2784);function o({open:e,close:t,openDelay:n,closeDelay:o}){let i=(0,r.useRef)(-1),a=(0,r.useRef)(-1),s=()=>{window.clearTimeout(i.current),window.clearTimeout(a.current)};return(0,r.useEffect)(()=>s,[]),{openDropdown:()=>{s(),0===n||void 0===n?e():i.current=window.setTimeout(e,n)},closeDropdown:()=>{s(),0===o||void 0===o?t():a.current=window.setTimeout(t,o)}}}},52630:function(e,t,n){"use strict";n.d(t,{L:function(){return a}});var r=n(2784),o=n(75580),i=n(71978);function a({opened:e,floating:t,position:n,positionDependencies:a}){let[s,c]=(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,s,n]),(0,i.l)(()=>{t.update()},a),(0,i.l)(()=>{c(e=>e+1)},[e])}},19296:function(e,t,n){"use strict";n.d(t,{G:function(){return v}});var r=n(52322),o=n(2784),i=n(70837),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d=n(8246),p=n(96339),f=n(66596),m={root:"m_96b553a6"};let h={},g=(0,a.Z)((e,{transitionDuration:t})=>({root:{"--transition-duration":"number"==typeof t?`${t}ms`:t}})),v=(0,u.d)((e,t)=>{let n=(0,s.w)("FloatingIndicator",h,e),{classNames:a,className:u,style:v,styles:b,unstyled:y,vars:x,target:k,parent:w,transitionDuration:j,mod:C,displayAfterTransitionEnd:S,...I}=n,M=(0,c.y)({name:"FloatingIndicator",classes:m,props:n,className:u,style:v,classNames:a,styles:b,unstyled:y,vars:x,varsResolver:g}),T=(0,o.useRef)(null),{initialized:E,hidden:P}=function({target:e,parent:t,ref:n,displayAfterTransitionEnd:r}){let i=(0,o.useRef)(),[a,s]=(0,o.useState)(!1),[c,l]=(0,o.useState)("boolean"==typeof r&&r),u=()=>{if(!e||!t)return;let r=e.getBoundingClientRect(),o=t.getBoundingClientRect(),i={top:r.top-o.top,left:r.left-o.left,width:r.width,height:r.height};n.current&&(n.current.style.transform=`translateY(${i.top}px) translateX(${i.left}px)`,n.current.style.width=`${i.width}px`,n.current.style.height=`${i.height}px`)},m=()=>{window.clearTimeout(i.current),n.current&&(n.current.style.transitionDuration="0ms"),u(),i.current=window.setTimeout(()=>{n.current&&(n.current.style.transitionDuration="")},30)},h=(0,o.useRef)(),g=(0,o.useRef)();return(0,o.useEffect)(()=>{if(u(),e)return h.current=new ResizeObserver(m),h.current.observe(e),t&&(g.current=new ResizeObserver(m),g.current.observe(t)),()=>{h.current?.disconnect(),g.current?.disconnect()}},[t,e]),(0,o.useEffect)(()=>{if(t){let e=e=>{(function(e,t){if(!t||!e)return!1;let n=t.parentNode;for(;null!=n;){if(n===e)return!0;n=n.parentNode}return!1})(e.target,t)&&(m(),l(!1))};return document.addEventListener("transitionend",e),()=>{document.removeEventListener("transitionend",e)}}},[t]),(0,d.K)(()=>{"test"!==(0,f.d)()&&s(!0)},20,{autoInvoke:!0}),(0,p.I)(e=>{e.forEach(e=>{"attributes"===e.type&&"dir"===e.attributeName&&m()})},{attributes:!0,attributeFilter:["dir"]},()=>document.documentElement),{initialized:a,hidden:c}}({target:k,parent:w,ref:T,displayAfterTransitionEnd:S}),R=(0,i.Yx)(t,T);return k&&w?(0,r.jsx)(l.x,{ref:R,mod:[{initialized:E,hidden:P},C],...M("root"),...I}):null});v.displayName="@mantine/core/FloatingIndicator",v.classes=m},10266:function(e,t,n){"use strict";n.d(t,{i:function(){return m}});var r=n(52322),o=n(2784),i=n(73533);let a=/input|select|textarea|button|object/,s="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 l(e){let t=e.nodeName.toLowerCase(),n=!Number.isNaN(c(e));return(a.test(t)&&!e.disabled||e instanceof HTMLAnchorElement&&e.href||n)&&function(e){if(e.getAttribute("aria-hidden")||e.getAttribute("hidden")||"hidden"===e.getAttribute("type"))return!1;let t=e;for(;t&&t!==document.body&&11!==t.nodeType;){if("none"===t.style.display)return!1;t=t.parentNode}return!0}(e)}function u(e){let t=c(e);return(Number.isNaN(t)||t>=0)&&l(e)}var d=n(70837),p=n(98399),f=n(1767);function m({children:e,active:t=!0,refProp:n="ref"}){let r=function(e=!0){let t=(0,o.useRef)(),n=(0,o.useRef)(null),r=e=>{let t=e.querySelector("[data-autofocus]");if(!t){let n=Array.from(e.querySelectorAll(s));!(t=n.find(u)||n.find(l)||null)&&l(e)&&(t=e)}t&&t.focus({preventScroll:!0})},a=(0,o.useCallback)(o=>{if(e){if(null===o){n.current&&(n.current(),n.current=null);return}n.current=function(e,t="body > :not(script)"){let n=(0,i.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"))})}}(o),t.current!==o&&(o?(setTimeout(()=>{o.getRootNode()&&r(o)}),t.current=o):t.current=null)}},[e]);return(0,o.useEffect)(()=>{if(!e)return;t.current&&setTimeout(()=>r(t.current));let o=e=>{"Tab"===e.key&&t.current&&function(e,t){let n=Array.from(e.querySelectorAll(s)).filter(u);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,a=o.activeElement;if("INPUT"===a.tagName&&"radio"===a.getAttribute("type")&&(i=n.filter(e=>"radio"===e.getAttribute("type")&&e.getAttribute("name")===a.getAttribute("name")).includes(r)),!i)return;t.preventDefault();let c=n[t.shiftKey?n.length-1:0];c&&c.focus()}(t.current,e)};return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o),n.current&&n.current()}},[e]),a}(t),a=(0,d.Yx)(r,e?.ref);return(0,p.k)(e)?(0,o.cloneElement)(e,{[n]:a}):e}function h(e){return(0,r.jsx)(f.T,{tabIndex:-1,"data-autofocus":!0,...e})}m.displayName="@mantine/core/FocusTrap",h.displayName="@mantine/core/FocusTrapInitialFocus",m.InitialFocus=h},93010:function(e,t,n){"use strict";n.d(t,{Z:function(){return m}});var r=n(52322),o=n(2784),i=n(91482),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d={root:"m_4081bf90"};let p={preventGrowOverflow:!0,gap:"md",align:"center",justify:"flex-start",wrap:"wrap"},f=(0,a.Z)((e,{grow:t,preventGrowOverflow:n,gap:r,align:o,justify:a,wrap:s},{childWidth:c})=>({root:{"--group-child-width":t&&n?c:void 0,"--group-gap":(0,i.bG)(r),"--group-align":o,"--group-justify":a,"--group-wrap":s}})),m=(0,u.d)((e,t)=>{let n=(0,s.w)("Group",p,e),{classNames:a,className:u,style:m,styles:h,unstyled:g,children:v,gap:b,align:y,justify:x,wrap:k,grow:w,preventGrowOverflow:j,vars:C,variant:S,__size:I,mod:M,...T}=n,E=o.Children.toArray(v).filter(Boolean),P=E.length,R=(0,i.bG)(b??"md"),N=`calc(${100/P}% - (${R} - ${R} / ${P}))`,_=(0,c.y)({name:"Group",props:n,stylesCtx:{childWidth:N},className:u,style:m,classes:d,classNames:a,styles:h,unstyled:g,vars:C,varsResolver:f});return(0,r.jsx)(l.x,{..._("root"),ref:t,variant:S,mod:[{grow:w},M],size:I,...T,children:E})});m.classes=d,m.displayName="@mantine/core/Group"},52286:function(e,t,n){"use strict";n.d(t,{y:function(){return u}});var r=n(52322);n(2784);var o=n(38483),i=n(33502),a=n(20368),s=n(8582);function c(e){return e.replace(/[-[\]{}()*+?.,\\^$|#]/g,"\\$&")}let l={},u=(0,i.b)((e,t)=>{let{unstyled:n,children:i,highlight:u,highlightStyles:d,color:p,...f}=(0,o.w)("Highlight",l,e),m=function(e,t){if(null==t)return[{chunk:e,highlighted:!1}];let n=Array.isArray(t)?t.map(c):c(t);if(!(Array.isArray(n)?n.filter(e=>e.trim().length>0).length>0:""!==n.trim()))return[{chunk:e,highlighted:!1}];let r="string"==typeof n?n.trim():n.filter(e=>0!==e.trim().length).map(e=>e.trim()).sort((e,t)=>t.length-e.length).join("|"),o=RegExp(`(${r})`,"gi");return e.split(o).map(e=>({chunk:e,highlighted:o.test(e)})).filter(({chunk:e})=>e)}(i,u);return(0,r.jsx)(s.x,{unstyled:n,ref:t,...f,__staticSelector:"Highlight",children:m.map(({chunk:e,highlighted:t},o)=>t?(0,r.jsx)(a.v,{unstyled:n,color:p,style:d,"data-highlight":e,children:e},o):(0,r.jsx)("span",{children:e},o))})});u.classes=s.x.classes,u.displayName="@mantine/core/Highlight"},50569:function(e,t,n){"use strict";n.d(t,{Z:function(){return d},J:function(){return u}});var r=n(52322),o=n(2784),i=n(91482),a=n(46690),s=n(28559),c=n(6941),l={root:"m_5f75b09e",body:"m_5f6e695e",labelWrapper:"m_d3ea56bb",label:"m_8ee546b8",description:"m_328f68c0",error:"m_8e8a99cc"};let u=l,d=(0,o.forwardRef)(({__staticSelector:e,__stylesApiProps:t,className:n,classNames:o,styles:u,unstyled:d,children:p,label:f,description:m,id:h,disabled:g,error:v,size:b,labelPosition:y="left",bodyElement:x="div",labelElement:k="label",variant:w,style:j,vars:C,mod:S,...I},M)=>{let T=(0,a.y)({name:e,props:t,className:n,style:j,classes:l,classNames:o,styles:u,unstyled:d});return(0,r.jsx)(s.x,{...T("root"),ref:M,__vars:{"--label-fz":(0,i.yv)(b),"--label-lh":(0,i.ap)(b,"label-lh")},mod:[{"label-position":y},S],variant:w,size:b,...I,children:(0,r.jsxs)(s.x,{component:x,htmlFor:"label"===x?h:void 0,...T("body"),children:[p,(0,r.jsxs)("div",{...T("labelWrapper"),"data-disabled":g||void 0,children:[f&&(0,r.jsx)(s.x,{component:k,htmlFor:"label"===k?h:void 0,...T("label"),"data-disabled":g||void 0,children:f}),m&&(0,r.jsx)(c.I.Description,{size:b,__inheritStyles:!1,...T("description"),children:m}),v&&"boolean"!=typeof v&&(0,r.jsx)(c.I.Error,{size:b,__inheritStyles:!1,...T("error"),children:v})]})]})})});d.displayName="@mantine/core/InlineInput"},6941:function(e,t,n){"use strict";n.d(t,{I:function(){return _}});var r=n(52322),o=n(58898),i=n(2784),a=n(91482),s=n(11200),c=n(38483),l=n(46690),u=n(97072),d=n(28559),p=n(33502),f=n(82027),m=n(69349),h={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={},v=(0,s.Z)((e,{size:t})=>({description:{"--input-description-size":void 0===t?void 0:`calc(${(0,a.yv)(t)} - ${(0,o.h)(2)})`}})),b=(0,f.d)((e,t)=>{let n=(0,c.w)("InputDescription",g,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,size:f,__staticSelector:b,__inheritStyles:y=!0,variant:x,...k}=(0,c.w)("InputDescription",g,n),w=(0,m.D)(),j=(0,l.y)({name:["InputWrapper",b],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"description",vars:p,varsResolver:v}),C=y&&w?.getStyles||j;return(0,r.jsx)(d.x,{component:"p",ref:t,variant:x,size:f,...C("description",w?.getStyles?{className:i,style:a}:void 0),...k})});b.classes=h,b.displayName="@mantine/core/InputDescription";let y={},x=(0,s.Z)((e,{size:t})=>({error:{"--input-error-size":void 0===t?void 0:`calc(${(0,a.yv)(t)} - ${(0,o.h)(2)})`}})),k=(0,f.d)((e,t)=>{let n=(0,c.w)("InputError",y,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,size:f,__staticSelector:g,__inheritStyles:v=!0,variant:b,...k}=n,w=(0,l.y)({name:["InputWrapper",g],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"error",vars:p,varsResolver:x}),j=(0,m.D)(),C=v&&j?.getStyles||w;return(0,r.jsx)(d.x,{component:"p",ref:t,variant:b,size:f,...C("error",j?.getStyles?{className:i,style:a}:void 0),...k})});k.classes=h,k.displayName="@mantine/core/InputError";let w={labelElement:"label"},j=(0,s.Z)((e,{size:t})=>({label:{"--input-label-size":(0,a.yv)(t),"--input-asterisk-color":void 0}})),C=(0,f.d)((e,t)=>{let n=(0,c.w)("InputLabel",w,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,labelElement:f,size:g,required:v,htmlFor:b,onMouseDown:y,children:x,__staticSelector:k,variant:C,mod:S,...I}=(0,c.w)("InputLabel",w,n),M=(0,l.y)({name:["InputWrapper",k],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"label",vars:p,varsResolver:j}),T=(0,m.D)(),E=T?.getStyles||M;return(0,r.jsxs)(d.x,{...E("label",T?.getStyles?{className:i,style:a}:void 0),component:f,variant:C,size:g,ref:t,htmlFor:"label"===f?b:void 0,mod:[{required:v},S],onMouseDown:e=>{y?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault()},...I,children:[x,v&&(0,r.jsx)("span",{...E("required"),"aria-hidden":!0,children:" *"})]})});C.classes=h,C.displayName="@mantine/core/InputLabel";let S={},I=(0,f.d)((e,t)=>{let n=(0,c.w)("InputPlaceholder",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,__staticSelector:f,variant:m,error:g,mod:v,...b}=(0,c.w)("InputPlaceholder",S,n),y=(0,l.y)({name:["InputPlaceholder",f],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"placeholder"});return(0,r.jsx)(d.x,{...y("placeholder"),mod:[{error:!!g},v],component:"span",variant:m,ref:t,...b})});I.classes=h,I.displayName="@mantine/core/InputPlaceholder";var M=n(66178);let T={labelElement:"label",inputContainer:e=>e,inputWrapperOrder:["label","description","input","error"]},E=(0,s.Z)((e,{size:t})=>({label:{"--input-label-size":(0,a.yv)(t),"--input-asterisk-color":void 0},error:{"--input-error-size":void 0===t?void 0:`calc(${(0,a.yv)(t)} - ${(0,o.h)(2)})`},description:{"--input-description-size":void 0===t?void 0:`calc(${(0,a.yv)(t)} - ${(0,o.h)(2)})`}})),P=(0,f.d)((e,t)=>{let n=(0,c.w)("InputWrapper",T,e),{classNames:o,className:a,style:s,styles:u,unstyled:p,vars:f,size:g,variant:v,__staticSelector:y,inputContainer:x,inputWrapperOrder:w,label:j,error:S,description:I,labelProps:P,descriptionProps:R,errorProps:N,labelElement:_,children:F,withAsterisk:B,id:A,required:L,__stylesApiProps:D,mod:$,...z}=n,H=(0,l.y)({name:["InputWrapper",y],props:D||n,classes:h,className:a,style:s,classNames:o,styles:u,unstyled:p,vars:f,varsResolver:E}),O={size:g,variant:v,__staticSelector:y},Z=(0,M.M)(A),V=N?.id||`${Z}-error`,G=R?.id||`${Z}-description`,W=!!S&&"boolean"!=typeof S,Y=!!I,q=`${W?V:""} ${Y?G:""}`,K=q.trim().length>0?q.trim():void 0,U=P?.id||`${Z}-label`,X=j&&(0,r.jsx)(C,{labelElement:_,id:U,htmlFor:Z,required:"boolean"==typeof B?B:L,...O,...P,children:j},"label"),J=Y&&(0,r.jsx)(b,{...R,...O,size:R?.size||O.size,id:R?.id||G,children:I},"description"),Q=(0,r.jsx)(i.Fragment,{children:x(F)},"input"),ee=W&&(0,i.createElement)(k,{...N,...O,size:N?.size||O.size,key:"error",id:N?.id||V},S),et=w.map(e=>{switch(e){case"label":return X;case"input":return Q;case"description":return J;case"error":return ee;default:return null}});return(0,r.jsx)(m.I,{value:{getStyles:H,describedBy:K,inputId:Z,labelId:U,...function(e,{hasDescription:t,hasError:n}){let r=e.findIndex(e=>"input"===e),o=e.slice(0,r),i=e.slice(r+1),a=t&&o.includes("description")||n&&o.includes("error");return{offsetBottom:t&&i.includes("description")||n&&i.includes("error"),offsetTop:a}}(w,{hasDescription:Y,hasError:W})},children:(0,r.jsx)(d.x,{ref:t,variant:v,size:g,mod:[{error:!!S},$],...H("root"),...z,children:et})})});P.classes=h,P.displayName="@mantine/core/InputWrapper";let R={variant:"default",leftSectionPointerEvents:"none",rightSectionPointerEvents:"none",withAria:!0,withErrorStyles:!0},N=(0,s.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,a.ap)(t.size,"input-height"),"--input-fz":(0,a.yv)(t.size),"--input-radius":void 0===t.radius?void 0:(0,a.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,a.ap)(t.size,"input-padding-y"):void 0,"--input-left-section-pointer-events":t.leftSectionPointerEvents,"--input-right-section-pointer-events":t.rightSectionPointerEvents}})),_=(0,p.b)((e,t)=>{let n=(0,c.w)("Input",R,e),{classNames:o,className:i,style:a,styles:s,unstyled:p,required:f,__staticSelector:g,__stylesApiProps:v,size:b,wrapperProps:y,error:x,disabled:k,leftSection:w,leftSectionProps:j,leftSectionWidth:C,rightSection:S,rightSectionProps:I,rightSectionWidth:M,rightSectionPointerEvents:T,leftSectionPointerEvents:E,variant:P,vars:_,pointer:F,multiline:B,radius:A,id:L,withAria:D,withErrorStyles:$,mod:z,inputSize:H,...O}=n,{styleProps:Z,rest:V}=(0,u.c)(O),G=(0,m.D)(),W={offsetBottom:G?.offsetBottom,offsetTop:G?.offsetTop},Y=(0,l.y)({name:["Input",g],props:v||n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:p,stylesCtx:W,rootSelector:"wrapper",vars:_,varsResolver:N}),q=D?{required:f,disabled:k,"aria-invalid":!!x,"aria-describedby":G?.describedBy,id:G?.inputId||L}:{};return(0,r.jsxs)(d.x,{...Y("wrapper"),...Z,...y,mod:[{error:!!x&&$,pointer:F,disabled:k,multiline:B,"data-with-right-section":!!S,"data-with-left-section":!!w},z],variant:P,size:b,children:[w&&(0,r.jsx)("div",{...j,"data-position":"left",...Y("section",{className:j?.className,style:j?.style}),children:w}),(0,r.jsx)(d.x,{component:"input",...V,...q,ref:t,required:f,mod:{disabled:k,error:!!x&&$},variant:P,__size:H,...Y("input")}),S&&(0,r.jsx)("div",{...I,"data-position":"right",...Y("section",{className:I?.className,style:I?.style}),children:S})]})});_.classes=h,_.Wrapper=P,_.Label=C,_.Error=k,_.Description=b,_.Placeholder=I,_.displayName="@mantine/core/Input"},69349:function(e,t,n){"use strict";n.d(t,{D:function(){return o},I:function(){return r}}),n(2784),n(52322);let[r,o]=(0,n(75336).V)({offsetBottom:!1,offsetTop:!1,describedBy:void 0,getStyles:null,inputId:void 0,labelId:void 0})},7140:function(e,t,n){"use strict";n.d(t,{k:function(){return i}}),n(2784),n(52322);var r=n(38483),o=n(97072);function i(e,t,n){let i=(0,r.w)(e,t,n),{label:a,description:s,error:c,required:l,classNames:u,styles:d,className:p,unstyled:f,__staticSelector:m,__stylesApiProps:h,errorProps:g,labelProps:v,descriptionProps:b,wrapperProps:y,id:x,size:k,style:w,inputContainer:j,inputWrapperOrder:C,withAsterisk:S,variant:I,vars:M,mod:T,...E}=i,{styleProps:P,rest:R}=(0,o.c)(E),N={label:a,description:s,error:c,required:l,classNames:u,className:p,__staticSelector:m,__stylesApiProps:h||i,errorProps:g,labelProps:v,descriptionProps:b,unstyled:f,styles:d,size:k,style:w,inputContainer:j,inputWrapperOrder:C,withAsterisk:S,variant:I,id:x,mod:T,...y};return{...R,classNames:u,styles:d,unstyled:f,wrapperProps:{...N,...P},inputProps:{required:l,classNames:u,styles:d,unstyled:f,size:k,__staticSelector:m,__stylesApiProps:h||i,error:c,variant:I,id:x}}}},73063:function(e,t,n){"use strict";n.d(t,{M:function(){return c}});var r=n(52322);n(2784);var o=n(33502),i=n(6941),a=n(7140);let s={__staticSelector:"InputBase",withAria:!0},c=(0,o.b)((e,t)=>{let{inputProps:n,wrapperProps:o,...c}=(0,a.k)("InputBase",s,e);return(0,r.jsx)(i.I.Wrapper,{...o,children:(0,r.jsx)(i.I,{...n,...c,ref:t})})});c.classes={...i.I.classes,...i.I.Wrapper.classes},c.displayName="@mantine/core/InputBase"},62770:function(e,t,n){"use strict";n.d(t,{m:function(){return i}});var r=n(52322);n(2784);var o=n(69349);function i({children:e,role:t}){let n=(0,o.D)();return n?(0,r.jsx)("div",{role:t,"aria-labelledby":n.labelId,"aria-describedby":n.describedBy,children:e}):(0,r.jsx)(r.Fragment,{children:e})}},83795:function(e,t,n){"use strict";n.d(t,{T:function(){return f}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(38483),s=n(46690),c=n(28559),l=n(82027),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")}})),f=(0,l.d)((e,t)=>{let n=(0,a.w)("Kbd",d,e),{classNames:o,className:i,style:l,styles:f,unstyled:m,vars:h,...g}=n,v=(0,s.y)({name:"Kbd",classes:u,props:n,className:i,style:l,classNames:o,styles:f,unstyled:m,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{component:"kbd",ref:t,...v("root"),...g})});f.classes=u,f.displayName="@mantine/core/Kbd"},12491:function(e,t,n){"use strict";n.d(t,{a:function(){return y}});var r=n(52322),o=n(2784),i=n(91482),a=n(11200),s=n(13588),c=n(38483),l=n(46690),u=n(28559),d=n(82027),p=n(40489),f={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,o.forwardRef)(({className:e,...t},n)=>(0,r.jsxs)(u.x,{component:"span",className:(0,p.Z)(f.barsLoader,e),...t,ref:n,children:[(0,r.jsx)("span",{className:f.bar}),(0,r.jsx)("span",{className:f.bar}),(0,r.jsx)("span",{className:f.bar})]})),h=(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsxs)(u.x,{component:"span",className:(0,p.Z)(f.dotsLoader,e),...t,ref:n,children:[(0,r.jsx)("span",{className:f.dot}),(0,r.jsx)("span",{className:f.dot}),(0,r.jsx)("span",{className:f.dot})]})),g={bars:m,oval:(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsx)(u.x,{component:"span",className:(0,p.Z)(f.ovalLoader,e),...t,ref:n})),dots:h},v={loaders:g,type:"oval"},b=(0,a.Z)((e,{size:t,color:n})=>({root:{"--loader-size":(0,i.ap)(t,"loader-size"),"--loader-color":n?(0,s.p)(n,e):void 0}})),y=(0,d.d)((e,t)=>{let n=(0,c.w)("Loader",v,e),{size:o,color:i,type:a,vars:s,className:d,style:p,classNames:m,styles:h,unstyled:g,loaders:y,variant:x,children:k,...w}=n,j=(0,l.y)({name:"Loader",props:n,classes:f,className:d,style:p,classNames:m,styles:h,unstyled:g,vars:s,varsResolver:b});return k?(0,r.jsx)(u.x,{...j("root"),ref:t,...w,children:k}):(0,r.jsx)(u.x,{...j("root"),ref:t,component:y[a],variant:x,size:o,...w})});y.defaultLoaders=g,y.classes=f,y.displayName="@mantine/core/Loader"},20368:function(e,t,n){"use strict";n.d(t,{v:function(){return m}});var r=n(52322);n(2784);var o=n(11200),i=n(38483),a=n(46690),s=n(28559),c=n(82027),l=n(46403);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"},f=(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})}})),m=(0,c.d)((e,t)=>{let n=(0,i.w)("Mark",p,e),{classNames:o,className:c,style:l,styles:u,unstyled:m,vars:h,color:g,variant:v,...b}=n,y=(0,a.y)({name:"Mark",props:n,className:c,style:l,classes:d,classNames:o,styles:u,unstyled:m,vars:h,varsResolver:f});return(0,r.jsx)(s.x,{component:"mark",ref:t,variant:v,...y("root"),...b})});m.classes=d,m.displayName="@mantine/core/Mark"},36761:function(e,t,n){"use strict";n.d(t,{v:function(){return D}});var r=n(52322),o=n(2784),i=n(9341),a=n(71978),s=n(73491),c=n(51477),l=n(46690),u=n(38483),d=n(39461),p=n(50205);let[f,m]=(0,n(89106).R)("Menu component was not found in the tree");var h=n(28559),g=n(82027),v={dropdown:"m_dc9b7c9f",label:"m_9bfac126",divider:"m_efdf90cb",item:"m_99ac2aa1",itemLabel:"m_5476e0d3",itemSection:"m_8b75e504"};let b={},y=(0,g.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:s,...c}=(0,u.w)("MenuDivider",b,e),l=m();return(0,r.jsx)(h.x,{ref:t,...l.getStyles("divider",{className:o,style:i,styles:a,classNames:n}),...c})});y.classes=v,y.displayName="@mantine/core/MenuDivider";var x=n(70837),k=n(98498);let w={},j=(0,g.d)((e,t)=>{let{classNames:n,className:i,style:a,styles:s,vars:c,onMouseEnter:l,onMouseLeave:d,children:f,...h}=(0,u.w)("MenuDropdown",w,e),g=(0,o.useRef)(null),v=m(),b=(0,k.x)(l,()=>("hover"===v.trigger||"click-hover"===v.trigger)&&v.openDropdown()),y=(0,k.x)(d,()=>("hover"===v.trigger||"click-hover"===v.trigger)&&v.closeDropdown());return(0,r.jsxs)(p.J.Dropdown,{...h,onMouseEnter:b,onMouseLeave:y,role:"menu","aria-orientation":"vertical",ref:(0,x.Yx)(t,g),...v.getStyles("dropdown",{className:i,style:a,styles:s,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())},children:[(0,r.jsx)("div",{tabIndex:-1,"data-autofocus":!0,"aria-hidden":!0,style:{outline:0}}),f]})});j.classes=v,j.displayName="@mantine/core/MenuDropdown";var C=n(38288),S=n(46403),I=n(68755),M=n(33502),T=n(89027),E=n(63409);let P={},R=(0,M.b)((e,t)=>{let{classNames:n,className:i,style:a,styles:s,vars:c,color:l,closeMenuOnClick:d,leftSection:p,rightSection:f,children:h,disabled:g,...v}=(0,u.w)("MenuItem",P,e),b=m(),y=(0,I.rZ)(),{dir:w}=(0,T.gm)(),j=(0,o.useRef)(),M=b.getItemIndex(j.current),R=(0,k.x)(v.onMouseLeave,()=>b.setHovered(-1)),N=(0,k.x)(v.onMouseEnter,()=>b.setHovered(b.getItemIndex(j.current))),_=(0,k.x)(v.onClick,()=>{"boolean"==typeof d?d&&b.closeDropdownImmediately():b.closeOnItemClick&&b.closeDropdownImmediately()}),F=(0,k.x)(v.onFocus,()=>b.setHovered(b.getItemIndex(j.current))),B=l?y.variantColorResolver({color:l,theme:y,variant:"light"}):void 0,A=l?(0,S.E)({color:l,theme:y}):null;return(0,r.jsxs)(E.k,{...v,unstyled:b.unstyled,tabIndex:b.menuItemTabIndex,onFocus:F,...b.getStyles("item",{className:i,style:a,styles:s,classNames:n}),ref:(0,x.Yx)(j,t),role:"menuitem",disabled:g,"data-menu-item":!0,"data-disabled":g||void 0,"data-hovered":b.hovered===M||void 0,onMouseEnter:N,onMouseLeave:R,onClick:_,onKeyDown:(0,C.R)({siblingSelector:"[data-menu-item]",parentSelector:"[data-menu-dropdown]",activateOnFocus:!1,loop:b.loop,dir:w,orientation:"vertical",onKeyDown:v.onKeydown}),__vars:{"--menu-item-color":A?.isThemeColor&&A?.shade===void 0?`var(--mantine-color-${A.color}-6)`:B?.color,"--menu-item-hover":B?.hover},children:[p&&(0,r.jsx)("div",{...b.getStyles("itemSection",{styles:s,classNames:n}),"data-position":"left",children:p}),h&&(0,r.jsx)("div",{...b.getStyles("itemLabel",{styles:s,classNames:n}),children:h}),f&&(0,r.jsx)("div",{...b.getStyles("itemSection",{styles:s,classNames:n}),"data-position":"right",children:f})]})});R.classes=v,R.displayName="@mantine/core/MenuItem";let N={},_=(0,g.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:s,...c}=(0,u.w)("MenuLabel",N,e),l=m();return(0,r.jsx)(h.x,{ref:t,...l.getStyles("label",{className:o,style:i,styles:a,classNames:n}),...c})});_.classes=v,_.displayName="@mantine/core/MenuLabel";var F=n(98399);let B={refProp:"ref"},A=(0,o.forwardRef)((e,t)=>{let{children:n,refProp:i,...a}=(0,u.w)("MenuTarget",B,e);if(!(0,F.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 s=m(),c=(0,k.x)(n.props.onClick,()=>{"click"===s.trigger?s.toggleDropdown():"click-hover"!==s.trigger||(s.setOpenedViaClick(!0),s.opened||s.openDropdown())}),l=(0,k.x)(n.props.onMouseEnter,()=>("hover"===s.trigger||"click-hover"===s.trigger)&&s.openDropdown()),d=(0,k.x)(n.props.onMouseLeave,()=>{"hover"===s.trigger?s.closeDropdown():"click-hover"!==s.trigger||s.openedViaClick||s.closeDropdown()});return(0,r.jsx)(p.J.Target,{refProp:i,popupType:"menu",ref:t,...a,children:(0,o.cloneElement)(n,{onClick:c,onMouseEnter:l,onMouseLeave:d,"data-expanded":!!s.opened||void 0})})});A.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 D(e){let t=(0,u.w)("Menu",L,e),{children:n,onOpen:m,onClose:h,opened:g,defaultOpened:b,trapFocus:y,onChange:x,closeOnItemClick:k,loop:w,closeOnEscape:j,trigger:C,openDelay:S,closeDelay:I,classNames:M,styles:T,unstyled:E,variant:P,vars:R,menuItemTabIndex:N,keepMounted:_,...F}=t,B=(0,l.y)({name:"Menu",classes:v,props:t,classNames:M,styles:T,unstyled:E}),[A,{setHovered:D,resetHovered:$}]=function(){let[e,t]=(0,o.useState)(-1);return[e,{setHovered:t,resetHovered:()=>t(-1)}]}(),[z,H]=(0,i.C)({value:g,defaultValue:b,finalValue:!1,onChange:x}),[O,Z]=(0,o.useState)(!1),V=()=>{H(!1),Z(!1),z&&h?.()},G=()=>{H(!0),z||m?.()},W=()=>{z?V():G()},{openDropdown:Y,closeDropdown:q}=(0,d.U)({open:G,close:V,closeDelay:I,openDelay:S}),{resolvedClassNames:K,resolvedStyles:U}=(0,c.h)({classNames:M,styles:T,props:t});return(0,a.l)(()=>{$()},[z]),(0,r.jsx)(f,{value:{getStyles:B,opened:z,toggleDropdown:W,getItemIndex:e=>{var t;return t="[data-menu-dropdown]",e?Array.from(s.p(e,t)?.querySelectorAll("[data-menu-item]")||[]).findIndex(t=>t===e):null},hovered:A,setHovered:D,openedViaClick:O,setOpenedViaClick:Z,closeOnItemClick:k,closeDropdown:"click"===C?V:q,openDropdown:"click"===C?G:Y,closeDropdownImmediately:V,loop:w,trigger:C,unstyled:E,menuItemTabIndex:N},children:(0,r.jsx)(p.J,{...F,opened:z,onChange:W,defaultOpened:b,trapFocus:!_&&y,closeOnEscape:j,__staticSelector:"Menu",classNames:K,styles:U,unstyled:E,variant:P,keepMounted:_,children:n})})}D.extend=e=>e,D.classes=v,D.displayName="@mantine/core/Menu",D.Item=R,D.Label=_,D.Dropdown=j,D.Target=A,D.Divider=y},78222:function(e,t,n){"use strict";n.d(t,{u:function(){return D}});var r=n(52322);n(2784);var o=n(97263),i=n(38483),a=n(82027),s=n(83147);let[c,l]=(0,n(89106).R)("Modal component was not found in tree");var u={root:"m_9df02822",content:"m_54c44539",inner:"m_1f958f16",header:"m_d0e2b9cd"};let d={},p=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:c,vars:u,...p}=(0,i.w)("ModalBody",d,e),f=l();return(0,r.jsx)(s.y,{ref:t,...f.getStyles("body",{classNames:n,style:a,styles:c,className:o}),...p})});p.classes=u,p.displayName="@mantine/core/ModalBody";var f=n(91403);let m={},h=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalCloseButton",m,e),d=l();return(0,r.jsx)(f._,{ref:t,...d.getStyles("close",{classNames:n,style:a,styles:s,className:o}),...u})});h.classes=u,h.displayName="@mantine/core/ModalCloseButton";var g=n(58898),v=n(91822),b=n(9628);let y={},x=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,children:u,...d}=(0,i.w)("ModalContent",y,e),p=l(),f=p.scrollAreaComponent||b.Z;return(0,r.jsx)(v.G,{...p.getStyles("content",{className:o,style:a,styles:s,classNames:n}),innerProps:p.getStyles("inner",{className:o,style:a,styles:s,classNames:n}),"data-full-screen":p.fullScreen||void 0,"data-modal-content":!0,ref:t,...d,children:(0,r.jsx)(f,{style:{maxHeight:p.fullScreen?"100dvh":`calc(100dvh - (${(0,g.h)(p.yOffset)} * 2))`},children:u})})});x.classes=u,x.displayName="@mantine/core/ModalContent";var k=n(79208);let w={},j=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalHeader",w,e),d=l();return(0,r.jsx)(k.o,{ref:t,...d.getStyles("header",{classNames:n,style:a,styles:s,className:o}),...u})});j.classes=u,j.displayName="@mantine/core/ModalHeader";var C=n(23461);let S={},I=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalOverlay",S,e),d=l();return(0,r.jsx)(C.e,{ref:t,...d.getStyles("overlay",{classNames:n,style:a,styles:s,className:o}),...u})});I.classes=u,I.displayName="@mantine/core/ModalOverlay";var M=n(91482),T=n(11200),E=n(46690),P=n(74610);let R={__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"},N=(0,T.Z)((e,{radius:t,size:n,yOffset:r,xOffset:o})=>({root:{"--modal-radius":void 0===t?void 0:(0,M.H5)(t),"--modal-size":(0,M.ap)(n,"modal-size"),"--modal-y-offset":(0,g.h)(r),"--modal-x-offset":(0,g.h)(o)}})),_=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalRoot",R,e),{classNames:o,className:a,style:s,styles:l,unstyled:d,vars:p,yOffset:f,scrollAreaComponent:m,radius:h,fullScreen:g,centered:v,xOffset:b,__staticSelector:y,...x}=n,k=(0,E.y)({name:y,classes:u,props:n,className:a,style:s,classNames:o,styles:l,unstyled:d,vars:p,varsResolver:N});return(0,r.jsx)(c,{value:{yOffset:f,scrollAreaComponent:m,getStyles:k,fullScreen:g},children:(0,r.jsx)(P.e,{ref:t,...k("root"),"data-full-screen":g||void 0,"data-centered":v||void 0,unstyled:d,...x})})});_.classes=u,_.displayName="@mantine/core/ModalRoot";var F=n(92682);let B={},A=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalTitle",B,e),d=l();return(0,r.jsx)(F.q,{ref:t,...d.getStyles("title",{classNames:n,style:a,styles:s,className:o}),...u})});A.classes=u,A.displayName="@mantine/core/ModalTitle";let L={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),transitionProps:{duration:200,transition:"fade-down"},withOverlay:!0,withCloseButton:!0},D=(0,a.d)((e,t)=>{let{title:n,withOverlay:o,overlayProps:a,withCloseButton:s,closeButtonProps:c,children:l,radius:u,...d}=(0,i.w)("Modal",L,e),f=!!n||s;return(0,r.jsxs)(_,{ref:t,radius:u,...d,children:[o&&(0,r.jsx)(I,{...a}),(0,r.jsxs)(x,{radius:u,children:[f&&(0,r.jsxs)(j,{children:[n&&(0,r.jsx)(A,{children:n}),s&&(0,r.jsx)(h,{...c})]}),(0,r.jsx)(p,{children:l})]})]})});D.classes=u,D.displayName="@mantine/core/Modal",D.Root=_,D.Overlay=I,D.Content=x,D.Body=p,D.Header=j,D.Title=A,D.CloseButton=h},71116:function(e,t,n){"use strict";n.d(t,{i:function(){return o},q:function(){return i}}),n(2784);var r=n(89106);n(52322);let[o,i]=(0,r.R)("ModalBase component was not found in tree")},74610:function(e,t,n){"use strict";n.d(t,{e:function(){return h}});var r=n(52322),o=n(2784),i=n(50357),a=n(97263),s=n(91482),c=n(28559),l=n(71517),u=n(71116),d=n(66178),p=n(65695),f=n(26565),m=n(98045);let h=(0,o.forwardRef)(({keepMounted:e,opened:t,onClose:n,id:h,transitionProps:g,trapFocus:v,closeOnEscape:b,returnFocus:y,closeOnClickOutside:x,withinPortal:k,portalProps:w,lockScroll:j,children:C,zIndex:S,shadow:I,padding:M,__vars:T,unstyled:E,removeScrollProps:P,...R},N)=>{let{_id:_,titleMounted:F,bodyMounted:B,shouldLockScroll:A,setTitleMounted:L,setBodyMounted:D}=function({id:e,transitionProps:t,opened:n,trapFocus:r,closeOnEscape:i,onClose:a,returnFocus:s}){let c=(0,d.M)(e),[l,u]=(0,o.useState)(!1),[h,g]=(0,o.useState)(!1),v=function({opened:e,transitionDuration:t}){let[n,r]=(0,o.useState)(e),i=(0,o.useRef)(),a=(0,m.J)()?0:t;return(0,o.useEffect)(()=>(e?(r(!0),window.clearTimeout(i.current)):0===a?r(!1):i.current=window.setTimeout(()=>r(!1),a),()=>window.clearTimeout(i.current)),[e,a]),n}({opened:n,transitionDuration:"number"==typeof t?.duration?t?.duration:200});return(0,p.s)("keydown",e=>{"Escape"===e.key&&i&&n&&e.target?.getAttribute("data-mantine-stop-propagation")!=="true"&&a()},{capture:!0}),(0,f.u)({opened:n,shouldReturnFocus:r&&s}),{_id:c,titleMounted:l,bodyMounted:h,shouldLockScroll:v,setTitleMounted:u,setBodyMounted:g}}({id:h,transitionProps:g,opened:t,trapFocus:v,closeOnEscape:b,onClose:n,returnFocus:y});return(0,r.jsx)(l.q,{...w,withinPortal:k,children:(0,r.jsx)(u.i,{value:{opened:t,onClose:n,closeOnClickOutside:x,transitionProps:{...g,keepMounted:e},getTitleId:()=>`${_}-title`,getBodyId:()=>`${_}-body`,titleMounted:F,bodyMounted:B,setTitleMounted:L,setBodyMounted:D,trapFocus:v,closeOnEscape:b,zIndex:S,unstyled:E},children:(0,r.jsx)(i.Z,{enabled:A&&j,...P,children:(0,r.jsx)(c.x,{ref:N,...R,__vars:{...T,"--mb-z-index":(S||(0,a.w)("modal")).toString(),"--mb-shadow":(0,s.Xj)(I),"--mb-padding":(0,s.bG)(M)},children:C})})})})})},40044: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"}},83147:function(e,t,n){"use strict";n.d(t,{y:function(){return l}});var r=n(52322),o=n(2784),i=n(40489),a=n(28559),s=n(71116),c=n(40044);let l=(0,o.forwardRef)(({className:e,...t},n)=>{let l=function(){let e=(0,s.q)();return(0,o.useEffect)(()=>(e.setBodyMounted(!0),()=>e.setBodyMounted(!1)),[]),e.getBodyId()}(),u=(0,s.q)();return(0,r.jsx)(a.x,{ref:n,...t,id:l,className:(0,i.Z)({[c.Z.body]:!u.unstyled},e)})});l.displayName="@mantine/core/ModalBaseBody"},91403:function(e,t,n){"use strict";n.d(t,{_:function(){return l}});var r=n(52322),o=n(2784),i=n(40489),a=n(2670),s=n(71116),c=n(40044);let l=(0,o.forwardRef)(({className:e,onClick:t,...n},o)=>{let l=(0,s.q)();return(0,r.jsx)(a.P,{ref:o,...n,onClick:e=>{l.onClose(),t?.(e)},className:(0,i.Z)({[c.Z.close]:!l.unstyled},e),unstyled:l.unstyled})});l.displayName="@mantine/core/ModalBaseCloseButton"},91822:function(e,t,n){"use strict";n.d(t,{G:function(){return d}});var r=n(52322),o=n(2784),i=n(40489),a=n(10266),s=n(1198),c=n(96321),l=n(71116),u=n(40044);let d=(0,o.forwardRef)(({transitionProps:e,className:t,innerProps:n,onKeyDown:o,style:d,...p},f)=>{let m=(0,l.q)();return(0,r.jsx)(c.u,{mounted:m.opened,transition:"pop",...m.transitionProps,...e,children:e=>(0,r.jsx)("div",{...n,className:(0,i.Z)({[u.Z.inner]:!m.unstyled},n.className),children:(0,r.jsx)(a.i,{active:m.opened&&m.trapFocus,children:(0,r.jsx)(s.X,{...p,component:"section",role:"dialog",tabIndex:-1,"aria-modal":!0,"aria-describedby":m.bodyMounted?m.getBodyId():void 0,"aria-labelledby":m.titleMounted?m.getTitleId():void 0,ref:f,style:[d,e],className:(0,i.Z)({[u.Z.content]:!m.unstyled},t),unstyled:m.unstyled,children:p.children})})})})})},79208:function(e,t,n){"use strict";n.d(t,{o:function(){return l}});var r=n(52322),o=n(2784),i=n(40489),a=n(28559),s=n(71116),c=n(40044);let l=(0,o.forwardRef)(({className:e,...t},n)=>{let o=(0,s.q)();return(0,r.jsx)(a.x,{component:"header",ref:n,className:(0,i.Z)({[c.Z.header]:!o.unstyled},e),...t})});l.displayName="@mantine/core/ModalBaseHeader"},23461:function(e,t,n){"use strict";n.d(t,{e:function(){return l}});var r=n(52322),o=n(2784),i=n(87170),a=n(96321),s=n(71116);let c={duration:200,timingFunction:"ease",transition:"fade"},l=(0,o.forwardRef)(({onClick:e,transitionProps:t,style:n,...o},l)=>{let u=(0,s.q)(),d=function(e){let t=(0,s.q)();return{...c,...t.transitionProps,...e}}(t);return(0,r.jsx)(a.u,{mounted:u.opened,...d,transition:"fade",children:t=>(0,r.jsx)(i.a,{ref:l,fixed:!0,style:[n,t],zIndex:u.zIndex,unstyled:u.unstyled,onClick:t=>{e?.(t),u.closeOnClickOutside&&u.onClose()},...o})})});l.displayName="@mantine/core/ModalBaseOverlay"},92682:function(e,t,n){"use strict";n.d(t,{q:function(){return l}});var r=n(52322),o=n(2784),i=n(40489),a=n(28559),s=n(71116),c=n(40044);let l=(0,o.forwardRef)(({className:e,...t},n)=>{let l=function(){let e=(0,s.q)();return(0,o.useEffect)(()=>(e.setTitleMounted(!0),()=>e.setTitleMounted(!1)),[]),e.getTitleId()}(),u=(0,s.q)();return(0,r.jsx)(a.x,{component:"h2",ref:n,className:(0,i.Z)({[c.Z.title]:!u.unstyled},e),...t,id:l})});l.displayName="@mantine/core/ModalBaseTitle"},9628:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(52322);function o({children:e}){return(0,r.jsx)(r.Fragment,{children:e})}},12189:function(e,t,n){"use strict";n.d(t,{p:function(){return d}});var r=n(52322);n(2784);var o=n(38483),i=n(82027),a=n(29995),s=n(54178),c=n(73063);function l({data:e}){if("group"in e){let t=e.items.map(e=>(0,r.jsx)(l,{data:e},e.value));return(0,r.jsx)("optgroup",{label:e.group,children:t})}let{value:t,label:n,...o}=e;return(0,r.jsx)("option",{value:e.value,...o,children:e.label},e.value)}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:f,unstyled:m,...h}=(0,o.w)("NativeSelect",u,e),g=(0,a.R)(n).map((e,t)=>(0,r.jsx)(l,{data:e},t));return(0,r.jsx)(c.M,{component:"select",ref:t,...h,__staticSelector:"NativeSelect",size:d,pointer:!0,error:p,unstyled:m,rightSection:f||(0,r.jsx)(s.d,{size:d,error:p,unstyled:m}),children:i||g})});d.classes=c.M.classes,d.displayName="@mantine/core/NativeSelect"},41473:function(e,t,n){"use strict";n.d(t,{P:function(){return g}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(13588),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d=n(2670),p=n(12491),f={root:"m_a513464",icon:"m_a4ceffb",loader:"m_b0920b15",body:"m_a49ed24",title:"m_3feedf16",description:"m_3d733a3a",closeButton:"m_919a4d88"};let m={withCloseButton:!0},h=(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}})),g=(0,u.d)((e,t)=>{let n=(0,s.w)("Notification",m,e),{className:o,color:i,radius:a,loading:u,withCloseButton:g,withBorder:v,title:b,icon:y,children:x,onClose:k,closeButtonProps:w,classNames:j,style:C,styles:S,unstyled:I,variant:M,vars:T,mod:E,...P}=n,R=(0,c.y)({name:"Notification",classes:f,props:n,className:o,style:C,classNames:j,styles:S,unstyled:I,vars:T,varsResolver:h});return(0,r.jsxs)(l.x,{...R("root"),mod:[{"data-with-icon":!!y||u,"data-with-border":v},E],ref:t,variant:M,...P,role:"alert",children:[y&&!u&&(0,r.jsx)("div",{...R("icon"),children:y}),u&&(0,r.jsx)(p.a,{size:28,color:i,...R("loader")}),(0,r.jsxs)("div",{...R("body"),children:[b&&(0,r.jsx)("div",{...R("title"),children:b}),(0,r.jsx)(l.x,{...R("description"),mod:{"data-with-title":!!b},children:x})]}),g&&(0,r.jsx)(d.P,{iconSize:16,color:"gray",...w,unstyled:I,onClick:k,...R("closeButton")})]})});g.classes=f,g.displayName="@mantine/core/Notification"},87170:function(e,t,n){"use strict";n.d(t,{a:function(){return g}});var r=n(52322),o=n(58898);n(2784);var i=n(97263),a=n(91482),s=n(11200),c=n(20754),l=n(38483),u=n(46690),d=n(28559),p=n(33502),f={root:"m_9814e45f"};let m={zIndex:(0,i.w)("modal")},h=(0,s.Z)((e,{gradient:t,color:n,backgroundOpacity:r,blur:i,radius:s,zIndex:l})=>({root:{"--overlay-bg":t||(void 0!==n||void 0!==r)&&(0,c.m)(n||"#000",r??.6)||void 0,"--overlay-filter":i?`blur(${(0,o.h)(i)})`:void 0,"--overlay-radius":void 0===s?void 0:(0,a.H5)(s),"--overlay-z-index":l?.toString()}})),g=(0,p.b)((e,t)=>{let n=(0,l.w)("Overlay",m,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:p,fixed:g,center:v,children:b,radius:y,zIndex:x,gradient:k,blur:w,color:j,backgroundOpacity:C,mod:S,...I}=n,M=(0,u.y)({name:"Overlay",props:n,classes:f,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:p,varsResolver:h});return(0,r.jsx)(d.x,{ref:t,...M("root"),mod:[{center:v,fixed:g},S],...I,children:b})});g.classes=f,g.displayName="@mantine/core/Overlay"},1198:function(e,t,n){"use strict";n.d(t,{X:function(){return f}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(38483),s=n(46690),c=n(28559),l=n(33502),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)}})),f=(0,l.b)((e,t)=>{let n=(0,a.w)("Paper",d,e),{classNames:o,className:i,style:l,styles:f,unstyled:m,withBorder:h,vars:g,radius:v,shadow:b,variant:y,mod:x,...k}=n,w=(0,s.y)({name:"Paper",props:n,classes:u,className:i,style:l,classNames:o,styles:f,unstyled:m,vars:g,varsResolver:p});return(0,r.jsx)(c.x,{ref:t,mod:[{"data-with-border":h},x],...w("root"),variant:y,...k})});f.classes=u,f.displayName="@mantine/core/Paper"},50205:function(e,t,n){"use strict";n.d(t,{J:function(){return O}});var r=n(52322),o=n(2784),i=n(66178),a=n(33303),s=n(97263),c=n(91482),l=n(11200),u=n(38483),d=n(46690),p=n(89027),f=n(71916);let[m,h]=(0,n(89106).R)("Popover component was not found in the tree");var g=n(26565),v=n(70837),b=n(58898);let y=()=>{};var x=n(28559),k=n(82027),w=n(62086),j=n(10266),C=n(71517),S=n(96321),I={dropdown:"m_38a85659",arrow:"m_a31dc6c1"};let M={},T=(0,k.d)((e,t)=>{let n=(0,u.w)("PopoverDropdown",M,e),{className:o,style:i,vars:a,children:s,onKeyDownCapture:c,variant:l,classNames:d,styles:p,...f}=n,m=h(),k=(0,g.u)({opened:m.opened,shouldReturnFocus:m.returnFocus}),I=m.withRoles?{"aria-labelledby":m.getTargetId(),id:m.getDropdownId(),role:"dialog",tabIndex:-1}:{},T=(0,v.Yx)(t,m.floating);return m.disabled?null:(0,r.jsx)(C.q,{...m.portalProps,withinPortal:m.withinPortal,children:(0,r.jsx)(S.u,{mounted:m.opened,...m.transitionProps,transition:m.transitionProps?.transition||"fade",duration:m.transitionProps?.duration??150,keepMounted:m.keepMounted,exitDuration:"number"==typeof m.transitionProps?.exitDuration?m.transitionProps.exitDuration:m.transitionProps?.duration,children:e=>(0,r.jsx)(j.i,{active:m.trapFocus,children:(0,r.jsxs)(x.x,{...I,...f,variant:l,ref:T,onKeyDownCapture:function(e,t={active:!0}){return"function"==typeof e&&t.active?n=>{"Escape"===n.key&&(e(n),t.onTrigger?.())}:t.onKeyDown||y}(m.onClose,{active:m.closeOnEscape,onTrigger:k,onKeyDown:c}),"data-position":m.placement,...m.getStyles("dropdown",{className:o,props:n,classNames:d,styles:p,style:[{...e,zIndex:m.zIndex,top:m.y??0,left:m.x??0,width:"target"===m.width?void 0:(0,b.h)(m.width)},i]}),children:[s,(0,r.jsx)(w.Y,{ref:m.arrowRef,arrowX:m.arrowX,arrowY:m.arrowY,visible:m.withArrow,position:m.placement,arrowSize:m.arrowSize,arrowRadius:m.arrowRadius,arrowOffset:m.arrowOffset,arrowPosition:m.arrowPosition,...m.getStyles("arrow",{props:n,classNames:d,styles:p})})]})})})})});T.classes=I,T.displayName="@mantine/core/PopoverDropdown";var E=n(40489),P=n(98399);let R={refProp:"ref",popupType:"dialog"},N=(0,k.d)((e,t)=>{let{children:n,refProp:r,popupType:i,...a}=(0,u.w)("PopoverTarget",R,e);if(!(0,P.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 s=h(),c=(0,v.Yx)(s.reference,n.ref,t),l=s.withRoles?{"aria-haspopup":i,"aria-expanded":s.opened,"aria-controls":s.getDropdownId(),id:s.getTargetId()}:{};return(0,o.cloneElement)(n,{...a,...l,...s.targetProps,className:(0,E.Z)(s.targetProps.className,a.className,n.props.className),[r]:c,...s.controlled?null:{onClick:s.onToggle}})});N.displayName="@mantine/core/PopoverTarget";var _=n(84061),F=n(75580),B=n(92416),A=n(63607),L=n(9341),D=n(71978),$=n(52630);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,s.w)("popover"),__staticSelector:"Popover",width:"max-content"},H=(0,l.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,u.w)("Popover",z,e),{children:n,position:s,offset:c,onPositionChange:l,positionDependencies:h,opened:g,transitionProps:v,width:b,middlewares:y,withArrow:x,arrowSize:k,arrowOffset:w,arrowRadius:j,arrowPosition:C,unstyled:S,classNames:M,styles:T,closeOnClickOutside:E,withinPortal:P,portalProps:R,closeOnEscape:N,clickOutsideEvents:O,trapFocus:Z,onClose:V,onOpen:G,onChange:W,zIndex:Y,radius:q,shadow:K,id:U,defaultOpened:X,__staticSelector:J,withRoles:Q,disabled:ee,returnFocus:et,variant:en,keepMounted:er,vars:eo,floatingStrategy:ei,...ea}=t,es=(0,d.y)({name:J,props:t,classes:I,classNames:M,styles:T,unstyled:S,rootSelector:"dropdown",vars:eo,varsResolver:H}),ec=(0,o.useRef)(null),[el,eu]=(0,o.useState)(null),[ed,ep]=(0,o.useState)(null),{dir:ef}=(0,p.gm)(),em=(0,i.M)(U),eh=function(e){let[t,n]=(0,L.C)({value:e.opened,defaultValue:e.defaultOpened,finalValue:!1,onChange:e.onChange}),r=(0,A.YF)({strategy:e.strategy,placement:e.position,middleware:function(e,t){let n=function(e){if(void 0===e)return{shift:!0,flip:!0};let t={...e};return void 0===e.shift&&(t.shift=!0),void 0===e.flip&&(t.flip=!0),t}(e.middlewares),r=[(0,_.cv)(e.offset)];return n.shift&&r.push((0,F.uY)("boolean"==typeof n.shift?{limiter:(0,F.dr)(),padding:5}:{limiter:(0,F.dr)(),padding:5,...n.shift})),n.flip&&r.push("boolean"==typeof n.flip?(0,F.RR)():(0,F.RR)(n.flip)),n.inline&&r.push("boolean"==typeof n.inline?(0,F.Qo)():(0,F.Qo)(n.inline)),r.push((0,B.x7)({element:e.arrowRef,padding:e.arrowOffset})),(n.size||"target"===e.width)&&r.push((0,F.dp)({..."boolean"==typeof n.size?{}:n.size,apply({rects:r,availableWidth:o,availableHeight:i}){let a=t(),s=a.refs.floating.current?.style??{};n.size&&Object.assign(s,{maxWidth:`${o}px`,maxHeight:`${i}px`}),"target"===e.width&&Object.assign(s,{width:`${r.reference.width}px`})}})),r}(e,()=>r)});return(0,$.L)({opened:e.opened,position:e.position,positionDependencies:e.positionDependencies||[],floating:r}),(0,D.l)(()=>{e.onPositionChange?.(r.placement)},[r.placement]),(0,D.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:y,width:b,position:(0,f._)(ef,s),offset:"number"==typeof c?c+(x?k/2:0):c,arrowRef:ec,arrowOffset:w,onPositionChange:l,positionDependencies:h,opened:g,defaultOpened:X,onChange:W,onOpen:G,onClose:V,strategy:ei});(0,a.O)(()=>E&&eh.onClose(),O,[el,ed]);let eg=(0,o.useCallback)(e=>{eu(e),eh.floating.refs.setReference(e)},[eh.floating.refs.setReference]),ev=(0,o.useCallback)(e=>{ep(e),eh.floating.refs.setFloating(e)},[eh.floating.refs.setFloating]);return(0,r.jsx)(m,{value:{returnFocus:et,disabled:ee,controlled:eh.controlled,reference:eg,floating:ev,x:eh.floating.x,y:eh.floating.y,arrowX:eh.floating?.middlewareData?.arrow?.x,arrowY:eh.floating?.middlewareData?.arrow?.y,opened:eh.opened,arrowRef:ec,transitionProps:v,width:b,withArrow:x,arrowSize:k,arrowOffset:w,arrowRadius:j,arrowPosition:C,placement:eh.floating.placement,trapFocus:Z,withinPortal:P,portalProps:R,zIndex:Y,radius:q,shadow:K,closeOnEscape:N,onClose:eh.onClose,onToggle:eh.onToggle,getTargetId:()=>`${em}-target`,getDropdownId:()=>`${em}-dropdown`,withRoles:Q,targetProps:ea,__staticSelector:J,classNames:M,styles:T,unstyled:S,variant:en,keepMounted:er,getStyles:es},children:n})}O.Target=N,O.Dropdown=T,O.displayName="@mantine/core/Popover",O.extend=e=>e},71517:function(e,t,n){"use strict";n.d(t,{q:function(){return i}});var r=n(52322),o=n(11649);function i({withinPortal:e=!0,children:t,...n}){return e?(0,r.jsx)(o.h,{...n,children:t}):(0,r.jsx)(r.Fragment,{children:t})}i.displayName="@mantine/core/OptionalPortal"},11649:function(e,t,n){"use strict";n.d(t,{h:function(){return u}});var r=n(52322),o=n(2784),i=n(28316),a=n(64261),s=n(70837),c=n(38483);let l={},u=(0,o.forwardRef)((e,t)=>{let{children:n,target:u,...d}=(0,c.w)("Portal",l,e),[p,f]=(0,o.useState)(!1),m=(0,o.useRef)(null);return((0,a.Y)(()=>(f(!0),m.current=u?"string"==typeof u?document.querySelector(u):u: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}(d),(0,s.kR)(t,m.current),!u&&m.current&&document.body.appendChild(m.current),()=>{!u&&m.current&&document.body.removeChild(m.current)}),[u]),p&&m.current)?(0,i.createPortal)((0,r.jsx)(r.Fragment,{children:n}),m.current):null});u.displayName="@mantine/core/Portal"},38405:function(e,t,n){"use strict";n.d(t,{x:function(){return W}});var r=n(52322),o=n(2784),i=n(58898),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d=n(89106);let[p,f]=(0,d.R)("ScrollArea.Root component was not found in tree");var m=n(7966),h=n(64261);function g(e,t){let n=(0,m.W)(t);(0,h.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 v=(0,o.forwardRef)((e,t)=>{let{style:n,...i}=e,a=f(),[s,c]=(0,o.useState)(0),[l,u]=(0,o.useState)(0),d=!!(s&&l);return g(a.scrollbarX,()=>{let e=a.scrollbarX?.offsetHeight||0;a.onCornerHeightChange(e),u(e)}),g(a.scrollbarY,()=>{let e=a.scrollbarY?.offsetWidth||0;a.onCornerWidthChange(e),c(e)}),d?(0,r.jsx)("div",{...i,ref:t,style:{...n,width:s,height:l}}):null}),b=(0,o.forwardRef)((e,t)=>{let n=f(),o=!!(n.scrollbarX&&n.scrollbarY);return"scroll"!==n.type&&o?(0,r.jsx)(v,{...e,ref:t}):null});var y=n(70837);let x={scrollHideDelay:1e3,type:"hover"},k=(0,o.forwardRef)((e,t)=>{let{type:n,scrollHideDelay:i,scrollbars:a,...c}=(0,s.w)("ScrollAreaRoot",x,e),[u,d]=(0,o.useState)(null),[f,m]=(0,o.useState)(null),[h,g]=(0,o.useState)(null),[v,b]=(0,o.useState)(null),[k,w]=(0,o.useState)(null),[j,C]=(0,o.useState)(0),[S,I]=(0,o.useState)(0),[M,T]=(0,o.useState)(!1),[E,P]=(0,o.useState)(!1),R=(0,y.Yx)(t,e=>d(e));return(0,r.jsx)(p,{value:{type:n,scrollHideDelay:i,scrollArea:u,viewport:f,onViewportChange:m,content:h,onContentChange:g,scrollbarX:v,onScrollbarXChange:b,scrollbarXEnabled:M,onScrollbarXEnabledChange:T,scrollbarY:k,onScrollbarYChange:w,scrollbarYEnabled:E,onScrollbarYEnabledChange:P,onCornerWidthChange:C,onCornerHeightChange:I},children:(0,r.jsx)(l.x,{...c,ref:R,__vars:{"--sa-corner-width":"xy"!==a?"0px":`${j}px`,"--sa-corner-height":"xy"!==a?"0px":`${S}px`}})})});k.displayName="@mantine/core/ScrollAreaRoot";var w=n(64006),j=n(89027);function C(e,t){let n=e/t;return Number.isNaN(n)?0:n}function S(e){let t=C(e.viewport,e.content),n=e.scrollbar.paddingStart+e.scrollbar.paddingEnd;return Math.max((e.scrollbar.size-n)*t,18)}function I(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 M(e,t,n="ltr"){let r=S(t),o=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,i=t.scrollbar.size-o,a=t.content-t.viewport,s=function(e,[t,n]){return Math.min(n,Math.max(t,e))}(e,"ltr"===n?[0,a]:[-1*a,0]);return I([0,a],[0,i-r])(s)}function T(e){return e?parseInt(e,10):0}function E(e,t,{checkForDefaultPrevented:n=!0}={}){return r=>{e?.(r),!1!==n&&r.defaultPrevented||t?.(r)}}let[P,R]=(0,d.R)("ScrollAreaScrollbar was not found in tree"),N=(0,o.forwardRef)((e,t)=>{let{sizes:n,hasThumb:i,onThumbChange:a,onThumbPointerUp:s,onThumbPointerDown:c,onThumbPositionChange:l,onDragScroll:u,onWheelScroll:d,onResize:p,...h}=e,v=f(),[b,x]=(0,o.useState)(null),k=(0,y.Yx)(t,e=>x(e)),j=(0,o.useRef)(null),C=(0,o.useRef)(""),{viewport:S}=v,I=n.content-n.viewport,M=(0,m.W)(d),T=(0,m.W)(l),R=(0,w.y)(p,10),N=e=>{j.current&&u({x:e.clientX-j.current.left,y:e.clientY-j.current.top})};return(0,o.useEffect)(()=>{let e=e=>{let t=e.target;b?.contains(t)&&M(e,I)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})},[S,b,I,M]),(0,o.useEffect)(T,[n,T]),g(b,R),g(v.content,R),(0,r.jsx)(P,{value:{scrollbar:b,hasThumb:i,onThumbChange:(0,m.W)(a),onThumbPointerUp:(0,m.W)(s),onThumbPositionChange:T,onThumbPointerDown:(0,m.W)(c)},children:(0,r.jsx)("div",{...h,ref:k,style:{position:"absolute",...h.style},onPointerDown:E(e.onPointerDown,e=>{e.preventDefault(),0===e.button&&(e.target.setPointerCapture(e.pointerId),j.current=b.getBoundingClientRect(),C.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",document.body.style.pointerEvents="none",N(e))}),onPointerMove:E(e.onPointerMove,N),onPointerUp:E(e.onPointerUp,e=>{e.preventDefault();let t=e.target;t.hasPointerCapture(e.pointerId)&&t.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=C.current,document.body.style.pointerEvents="auto",j.current=null})})})}),_=(0,o.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:i,style:a,...s}=e,c=f(),[l,u]=(0,o.useState)(),d=(0,o.useRef)(null),p=(0,y.Yx)(t,d,c.onScrollbarXChange);return(0,o.useEffect)(()=>{d.current&&u(getComputedStyle(d.current))},[d]),(0,r.jsx)(N,{"data-orientation":"horizontal",...s,ref:p,sizes:n,style:{...a,"--sa-thumb-width":`${S(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{d.current&&c.viewport&&l&&i({content:c.viewport.scrollWidth,viewport:c.viewport.offsetWidth,scrollbar:{size:d.current.clientWidth,paddingStart:T(l.paddingLeft),paddingEnd:T(l.paddingRight)}})}})}),F=(0,o.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:i,style:a,...s}=e,c=f(),[l,u]=(0,o.useState)(),d=(0,o.useRef)(null),p=(0,y.Yx)(t,d,c.onScrollbarYChange);return(0,o.useEffect)(()=>{d.current&&u(window.getComputedStyle(d.current))},[]),(0,r.jsx)(N,{...s,"data-orientation":"vertical",ref:p,sizes:n,style:{"--sa-thumb-height":`${S(n)}px`,...a},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{d.current&&c.viewport&&l&&i({content:c.viewport.scrollHeight,viewport:c.viewport.offsetHeight,scrollbar:{size:d.current.clientHeight,paddingStart:T(l.paddingTop),paddingEnd:T(l.paddingBottom)}})}})}),B=(0,o.forwardRef)((e,t)=>{let{orientation:n="vertical",...i}=e,{dir:a}=(0,j.gm)(),s=f(),c=(0,o.useRef)(null),l=(0,o.useRef)(0),[u,d]=(0,o.useState)({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),p=C(u.viewport,u.content),m={...i,sizes:u,onSizesChange:d,hasThumb:!!(p>0&&p<1),onThumbChange:e=>{c.current=e},onThumbPointerUp:()=>{l.current=0},onThumbPointerDown:e=>{l.current=e}},h=(e,t)=>(function(e,t,n,r="ltr"){let o=S(n),i=t||o/2,a=n.scrollbar.paddingStart+i,s=n.scrollbar.size-n.scrollbar.paddingEnd-(o-i),c=n.content-n.viewport;return I([a,s],"ltr"===r?[0,c]:[-1*c,0])(e)})(e,l.current,u,t);return"horizontal"===n?(0,r.jsx)(_,{...m,ref:t,onThumbPositionChange:()=>{if(s.viewport&&c.current){let e=M(s.viewport.scrollLeft,u,a);c.current.style.transform=`translate3d(${e}px, 0, 0)`}},onWheelScroll:e=>{s.viewport&&(s.viewport.scrollLeft=e)},onDragScroll:e=>{s.viewport&&(s.viewport.scrollLeft=h(e,a))}}):"vertical"===n?(0,r.jsx)(F,{...m,ref:t,onThumbPositionChange:()=>{if(s.viewport&&c.current){let e=M(s.viewport.scrollTop,u);0===u.scrollbar.size?c.current.style.opacity="0":c.current.style.opacity="1",c.current.style.transform=`translate3d(0, ${e}px, 0)`}},onWheelScroll:e=>{s.viewport&&(s.viewport.scrollTop=e)},onDragScroll:e=>{s.viewport&&(s.viewport.scrollTop=h(e))}}):null}),A=(0,o.forwardRef)((e,t)=>{let n=f(),{forceMount:i,...a}=e,[s,c]=(0,o.useState)(!1),l="horizontal"===e.orientation,u=(0,w.y)(()=>{if(n.viewport){let e=n.viewport.offsetWidth{let{forceMount:n,...i}=e,a=f(),[s,c]=(0,o.useState)(!1);return((0,o.useEffect)(()=>{let{scrollArea:e}=a,t=0;if(e){let n=()=>{window.clearTimeout(t),c(!0)},r=()=>{t=window.setTimeout(()=>c(!1),a.scrollHideDelay)};return e.addEventListener("pointerenter",n),e.addEventListener("pointerleave",r),()=>{window.clearTimeout(t),e.removeEventListener("pointerenter",n),e.removeEventListener("pointerleave",r)}}},[a.scrollArea,a.scrollHideDelay]),n||s)?(0,r.jsx)(A,{"data-state":s?"visible":"hidden",...i,ref:t}):null}),D=(0,o.forwardRef)((e,t)=>{let{forceMount:n,...i}=e,a=f(),s="horizontal"===e.orientation,[c,l]=(0,o.useState)("hidden"),u=(0,w.y)(()=>l("idle"),100);return((0,o.useEffect)(()=>{if("idle"===c){let e=window.setTimeout(()=>l("hidden"),a.scrollHideDelay);return()=>window.clearTimeout(e)}},[c,a.scrollHideDelay]),(0,o.useEffect)(()=>{let{viewport:e}=a,t=s?"scrollLeft":"scrollTop";if(e){let n=e[t],r=()=>{let r=e[t];n!==r&&(l("scrolling"),u()),n=r};return e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}},[a.viewport,s,u]),n||"hidden"!==c)?(0,r.jsx)(B,{"data-state":"hidden"===c?"hidden":"visible",...i,ref:t,onPointerEnter:E(e.onPointerEnter,()=>l("interacting")),onPointerLeave:E(e.onPointerLeave,()=>l("idle"))}):null}),$=(0,o.forwardRef)((e,t)=>{let{forceMount:n,...i}=e,a=f(),{onScrollbarXEnabledChange:s,onScrollbarYEnabledChange:c}=a,l="horizontal"===e.orientation;return(0,o.useEffect)(()=>(l?s(!0):c(!0),()=>{l?s(!1):c(!1)}),[l,s,c]),"hover"===a.type?(0,r.jsx)(L,{...i,ref:t,forceMount:n}):"scroll"===a.type?(0,r.jsx)(D,{...i,ref:t,forceMount:n}):"auto"===a.type?(0,r.jsx)(A,{...i,ref:t,forceMount:n}):"always"===a.type?(0,r.jsx)(B,{...i,ref:t}):null}),z=(0,o.forwardRef)((e,t)=>{let{style:n,...i}=e,a=f(),s=R(),{onThumbPositionChange:c}=s,l=(0,y.Yx)(t,e=>s.onThumbChange(e)),u=(0,o.useRef)(),d=(0,w.y)(()=>{u.current&&(u.current(),u.current=void 0)},100);return(0,o.useEffect)(()=>{let{viewport:e}=a;if(e){let t=()=>{if(d(),!u.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,s=n.top!==i.top;(a||s)&&t(),n=i,r=window.requestAnimationFrame(o)}(),()=>window.cancelAnimationFrame(r)}(e,c);u.current=t,c()}};return c(),e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)}},[a.viewport,d,c]),(0,r.jsx)("div",{"data-state":s.hasThumb?"visible":"hidden",...i,ref:l,style:{width:"var(--sa-thumb-width)",height:"var(--sa-thumb-height)",...n},onPointerDownCapture:E(e.onPointerDownCapture,e=>{let t=e.target.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top;s.onThumbPointerDown({x:n,y:r})}),onPointerUp:E(e.onPointerUp,s.onThumbPointerUp)})}),H=(0,o.forwardRef)((e,t)=>{let{forceMount:n,...o}=e,i=R();return n||i.hasThumb?(0,r.jsx)(z,{ref:t,...o}):null}),O=(0,o.forwardRef)(({children:e,style:t,...n},o)=>{let i=f(),a=(0,y.Yx)(o,i.onViewportChange);return(0,r.jsx)(l.x,{...n,ref:a,style:{overflowX:i.scrollbarXEnabled?"scroll":"hidden",overflowY:i.scrollbarYEnabled?"scroll":"hidden",...t},children:(0,r.jsx)("div",{style:{minWidth:"100%",display:"table"},ref:i.onContentChange,children:e})})});O.displayName="@mantine/core/ScrollAreaViewport";var Z={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"},G=(0,a.Z)((e,{scrollbarSize:t})=>({root:{"--scrollarea-scrollbar-size":(0,i.h)(t)}})),W=(0,u.d)((e,t)=>{let n=(0,s.w)("ScrollArea",V,e),{classNames:i,className:a,style:l,styles:u,unstyled:d,scrollbarSize:p,vars:f,type:m,scrollHideDelay:h,viewportProps:g,viewportRef:v,onScrollPositionChange:y,children:x,offsetScrollbars:w,scrollbars:j,...C}=n,[S,I]=(0,o.useState)(!1),M=(0,c.y)({name:"ScrollArea",props:n,classes:Z,className:a,style:l,classNames:i,styles:u,unstyled:d,vars:f,varsResolver:G});return(0,r.jsxs)(k,{type:"never"===m?"always":m,scrollHideDelay:h,ref:t,scrollbars:j,...M("root"),...C,children:[(0,r.jsx)(O,{...g,...M("viewport",{style:g?.style}),ref:v,"data-offset-scrollbars":!0===w?"xy":w||void 0,"data-scrollbars":j||void 0,onScroll:e=>{g?.onScroll?.(e),y?.({x:e.currentTarget.scrollLeft,y:e.currentTarget.scrollTop})},children:x}),("xy"===j||"x"===j)&&(0,r.jsx)($,{...M("scrollbar"),orientation:"horizontal","data-hidden":"never"===m||void 0,forceMount:!0,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1),children:(0,r.jsx)(H,{...M("thumb")})}),("xy"===j||"y"===j)&&(0,r.jsx)($,{...M("scrollbar"),orientation:"vertical","data-hidden":"never"===m||void 0,forceMount:!0,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1),children:(0,r.jsx)(H,{...M("thumb")})}),(0,r.jsx)(b,{...M("corner"),"data-hovered":S||void 0,"data-hidden":"never"===m||void 0})]})});W.displayName="@mantine/core/ScrollArea";let Y=(0,u.d)((e,t)=>{let{children:n,classNames:o,styles:i,scrollbarSize:a,scrollHideDelay:c,type:u,dir:d,offsetScrollbars:p,viewportRef:f,onScrollPositionChange:m,unstyled:h,variant:g,viewportProps:v,scrollbars:b,style:y,vars:x,...k}=(0,s.w)("ScrollAreaAutosize",V,e);return(0,r.jsx)(l.x,{...k,ref:t,style:[{display:"flex",overflow:"auto"},y],children:(0,r.jsx)(l.x,{style:{display:"flex",flexDirection:"column",flex:1},children:(0,r.jsx)(W,{classNames:o,styles:i,scrollHideDelay:c,scrollbarSize:a,type:u,dir:d,offsetScrollbars:p,viewportRef:f,onScrollPositionChange:m,unstyled:h,variant:g,viewportProps:v,vars:x,scrollbars:b,children:n})})})});W.classes=Z,Y.displayName="@mantine/core/ScrollAreaAutosize",Y.classes=Z,W.Autosize=Y},84385:function(e,t,n){"use strict";n.d(t,{s:function(){return k}});var r=n(52322),o=n(2784),i=n(9341),a=n(66178),s=n(70837),c=n(91482),l=n(11200),u=n(13588),d=n(39568),p=n(68755),f=n(38483),m=n(46690),h=n(28559),g=n(82027),v=n(19296),b={root:"m_cf365364",indicator:"m_9e182ccd",label:"m_1738fcb2",input:"m_1714d588",control:"m_69686b9b",innerLabel:"m_78882f40"};let y={withItemsBorders:!0},x=(0,l.Z)((e,{radius:t,color:n,transitionDuration:r,size:o,transitionTimingFunction:i})=>({root:{"--sc-radius":void 0===t?void 0:(0,c.H5)(t),"--sc-color":n?(0,u.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,c.ap)(o,"sc-padding"),"--sc-font-size":(0,c.yv)(o)}})),k=(0,g.d)((e,t)=>{let n=(0,f.w)("SegmentedControl",y,e),{classNames:c,className:l,style:u,styles:g,unstyled:k,vars:w,data:j,value:C,defaultValue:S,onChange:I,size:M,name:T,disabled:E,readOnly:P,fullWidth:R,orientation:N,radius:_,color:F,transitionDuration:B,transitionTimingFunction:A,variant:L,autoContrast:D,withItemsBorders:$,mod:z,...H}=n,O=(0,m.y)({name:"SegmentedControl",props:n,classes:b,className:l,style:u,classNames:c,styles:g,unstyled:k,vars:w,varsResolver:x}),Z=(0,p.rZ)(),V=j.map(e=>"string"==typeof e?{label:e,value:e}:e),G=function(){let[e,t]=(0,o.useState)(!1);return(0,o.useEffect)(()=>t(!0),[]),e}(),[W,Y]=(0,o.useState)(null),[q,K]=(0,o.useState)({}),U=(e,t)=>{q[t]=e,K(q)},[X,J]=(0,i.C)({value:C,defaultValue:S,finalValue:Array.isArray(j)?V.find(e=>!e.disabled)?.value??j[0]?.value??null:null,onChange:I}),Q=(0,a.M)(T),ee=V.map(e=>(0,o.createElement)(h.x,{...O("control"),mod:{active:X===e.value,orientation:N},key:e.value},(0,o.createElement)("input",{...O("input"),disabled:E||e.disabled,type:"radio",name:Q,value:e.value,id:`${Q}-${e.value}`,checked:X===e.value,onChange:()=>!P&&J(e.value),"data-focus-ring":Z.focusRing,key:`${e.value}-input`}),(0,o.createElement)(h.x,{component:"label",...O("label"),mod:{active:X===e.value&&!(E||e.disabled),disabled:E||e.disabled,"read-only":P},htmlFor:`${Q}-${e.value}`,ref:t=>U(t,e.value),__vars:{"--sc-label-color":void 0!==F?(0,d.R)({color:F,theme:Z,autoContrast:D}):void 0},key:`${e.value}-label`},(0,r.jsx)("span",{...O("innerLabel"),children:e.label})))),et=(0,s.Yx)(t,e=>Y(e));return 0===j.length?null:(0,r.jsxs)(h.x,{...O("root"),variant:L,size:M,ref:et,mod:[{"full-width":R,orientation:N,initialized:G,"with-items-borders":$},z],...H,role:"radiogroup",children:["string"==typeof X&&(0,r.jsx)(v.G,{target:q[X],parent:W,component:"span",transitionDuration:"var(--sc-transition-duration)",...O("indicator")}),ee]})});k.classes=b,k.displayName="@mantine/core/SegmentedControl"},56867:function(e,t,n){"use strict";n.d(t,{I:function(){return i},Y:function(){return o}}),n(2784);var r=n(89106);n(52322);let[o,i]=(0,r.R)("SliderProvider was not found in tree")},40908: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"}},73822:function(e,t,n){"use strict";n.d(t,{i:function(){return T}});var r=n(52322),o=n(2784),i=n(9341),a=n(82692),s=n(51438),c=n(70837),l=n(58898),u=n(91482),d=n(11200),p=n(13588),f=n(38483),m=n(46690),h=n(82027),g=n(89027),v=n(56867),b=n(10497),y=n(39172),x=n(77970),k=n(37748),w=n(81515),j=n(49514),C=n(40148),S=n(40908);let I={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},M=(0,d.Z)((e,{size:t,color:n,thumbSize:r,radius:o})=>({root:{"--slider-size":(0,u.ap)(t,"slider-size"),"--slider-color":n?(0,p.p)(n,e):void 0,"--slider-radius":void 0===o?void 0:(0,u.H5)(o),"--slider-thumb-size":void 0!==r?(0,l.h)(r):"calc(var(--slider-size) * 2)"}})),T=(0,h.d)((e,t)=>{let n=(0,f.w)("Slider",I,e),{classNames:l,styles:u,value:d,onChange:p,onChangeEnd:h,size:T,min:E,max:P,step:R,precision:N,defaultValue:_,name:F,marks:B,label:A,labelTransitionProps:L,labelAlwaysOn:D,thumbLabel:$,showLabelOnHover:z,thumbChildren:H,disabled:O,unstyled:Z,scale:V,inverted:G,className:W,style:Y,vars:q,hiddenInputProps:K,...U}=n,X=(0,m.y)({name:"Slider",props:n,classes:S.Z,classNames:l,className:W,styles:u,style:Y,vars:q,varsResolver:M,unstyled:Z}),{dir:J}=(0,g.gm)(),[Q,ee]=(0,o.useState)(!1),[et,en]=(0,i.C)({value:"number"==typeof d?(0,a.u)(d,E,P):d,defaultValue:"number"==typeof _?(0,a.u)(_,E,P):_,finalValue:(0,a.u)(0,E,P),onChange:p}),er=(0,o.useRef)(et),eo=(0,o.useRef)(),ei=(0,o.useRef)(),ea=(0,j.b)({value:et,min:E,max:P}),es=V(et),ec="function"==typeof A?A(es):A,el=N??(0,C.p)(R),eu=(0,o.useCallback)(({x:e})=>{if(!O){let t=(0,k.i)({value:e,min:E,max:P,step:R,precision:el});en(t),er.current=t}},[O,E,P,R,el,en]),{ref:ed,active:ep}=(0,s.r)(eu,{onScrubEnd:()=>h?.(er.current)},J);return(0,r.jsx)(v.Y,{value:{getStyles:X},children:(0,r.jsxs)(b.l,{...U,ref:(0,c.Yx)(t,eo),onKeyDownCapture:e=>{if(!O)switch(e.key){case"ArrowUp":{e.preventDefault(),ei.current?.focus();let t=(0,w.J)(Math.min(Math.max(et+R,E),P),el);en(t),h?.(t);break}case"ArrowRight":{e.preventDefault(),ei.current?.focus();let t=(0,w.J)(Math.min(Math.max("rtl"===J?et-R:et+R,E),P),el);en(t),h?.(t);break}case"ArrowDown":{e.preventDefault(),ei.current?.focus();let t=(0,w.J)(Math.min(Math.max(et-R,E),P),el);en(t),h?.(t);break}case"ArrowLeft":{e.preventDefault(),ei.current?.focus();let t=(0,w.J)(Math.min(Math.max("rtl"===J?et+R:et-R,E),P),el);en(t),h?.(t);break}case"Home":e.preventDefault(),ei.current?.focus(),en(E),h?.(E);break;case"End":e.preventDefault(),ei.current?.focus(),en(P),h?.(P)}},onMouseDownCapture:()=>eo.current?.focus(),size:T,disabled:O,children:[(0,r.jsx)(x.f,{inverted:G,offset:0,filled:ea,marks:B,min:E,max:P,value:es,disabled:O,containerProps:{ref:ed,onMouseEnter:z?()=>ee(!0):void 0,onMouseLeave:z?()=>ee(!1):void 0},children:(0,r.jsx)(y.b,{max:P,min:E,value:es,position:ea,dragging:ep,label:ec,ref:ei,labelTransitionProps:L,labelAlwaysOn:D,thumbLabel:$,showLabelOnHover:z,isHovered:Q,disabled:O,children:H})}),(0,r.jsx)("input",{type:"hidden",name:F,value:es,...K})]})})});T.classes=S.Z,T.displayName="@mantine/core/Slider"},10497:function(e,t,n){"use strict";n.d(t,{l:function(){return s}});var r=n(52322),o=n(2784),i=n(28559),a=n(56867);let s=(0,o.forwardRef)(({size:e,disabled:t,variant:n,color:o,thumbSize:s,radius:c,...l},u)=>{let{getStyles:d}=(0,a.I)();return(0,r.jsx)(i.x,{tabIndex:-1,variant:n,size:e,ref:u,...d("root"),...l})});s.displayName="@mantine/core/SliderRoot"},39172:function(e,t,n){"use strict";n.d(t,{b:function(){return c}});var r=n(52322),o=n(2784),i=n(28559),a=n(96321),s=n(56867);let c=(0,o.forwardRef)(({max:e,min:t,value:n,position:c,label:l,dragging:u,onMouseDown:d,onKeyDownCapture:p,labelTransitionProps:f,labelAlwaysOn:m,thumbLabel:h,onFocus:g,onBlur:v,showLabelOnHover:b,isHovered:y,children:x=null,disabled:k},w)=>{let{getStyles:j}=(0,s.I)(),[C,S]=(0,o.useState)(!1),I=m||u||C||b&&y;return(0,r.jsxs)(i.x,{tabIndex:0,role:"slider","aria-label":h,"aria-valuemax":e,"aria-valuemin":t,"aria-valuenow":n,ref:w,__vars:{"--slider-thumb-offset":`${c}%`},...j("thumb",{focusable:!0}),mod:{dragging:u,disabled:k},onFocus:()=>{S(!0),"function"==typeof g&&g()},onBlur:()=>{S(!1),"function"==typeof v&&v()},onTouchStart:d,onMouseDown:d,onKeyDownCapture:p,onClick:e=>e.stopPropagation(),children:[x,(0,r.jsx)(a.u,{mounted:null!=l&&!!I,transition:"fade",duration:0,...f,children:e=>(0,r.jsx)("div",{...j("label",{style:e}),children:l})})]})});c.displayName="@mantine/core/SliderThumb"},77970:function(e,t,n){"use strict";n.d(t,{f:function(){return l}});var r=n(52322),o=n(2784),i=n(28559),a=n(56867),s=n(49514);function c({marks:e,min:t,max:n,disabled:c,value:l,offset:u,inverted:d}){let{getStyles:p}=(0,a.I)();if(!e)return null;let f=e.map((e,a)=>(0,o.createElement)(i.x,{...p("markWrapper"),__vars:{"--mark-offset":`${(0,s.b)({value:e.value,min:t,max:n})}%`},key:a},(0,r.jsx)(i.x,{...p("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:l,offset:u,inverted:d}),disabled:c}}),e.label&&(0,r.jsx)("div",{...p("markLabel"),children:e.label})));return(0,r.jsx)("div",{children:f})}function l({filled:e,children:t,offset:n,disabled:o,marksOffset:s,inverted:l,containerProps:u,...d}){let{getStyles:p}=(0,a.I)();return(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(i.x,{...p("trackContainer"),mod:{disabled:o},...u,children:(0,r.jsxs)(i.x,{...p("track"),mod:{inverted:l,disabled:o},children:[(0,r.jsx)(i.x,{mod:{inverted:l,disabled:o},__vars:{"--slider-bar-width":`calc(${e}% + var(--slider-size))`,"--slider-bar-offset":`calc(${n}% - var(--slider-size))`},...p("bar")}),t,(0,r.jsx)(c,{...d,offset:s,disabled:o,inverted:l})]})})})}c.displayName="@mantine/core/SliderMarks",l.displayName="@mantine/core/SliderTrack"},37748: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),s=Math.max((0!==a?Math.round(a/o)*o:0)+n,n);return void 0!==i?Number(s.toFixed(i)):s}n.d(t,{i:function(){return r}})},81515:function(e,t,n){"use strict";function r(e,t){return parseFloat(e.toFixed(t))}n.d(t,{J:function(){return r}})},49514: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}})},40148: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}})},65438:function(e,t,n){"use strict";n.d(t,{K:function(){return f}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(38483),s=n(46690),c=n(28559),l=n(82027),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}})),f=(0,l.d)((e,t)=>{let n=(0,a.w)("Stack",d,e),{classNames:o,className:i,style:l,styles:f,unstyled:m,vars:h,align:g,justify:v,gap:b,variant:y,...x}=n,k=(0,s.y)({name:"Stack",props:n,classes:u,className:i,style:l,classNames:o,styles:f,unstyled:m,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{ref:t,...k("root"),variant:y,...x})});f.classes=u,f.displayName="@mantine/core/Stack"},950:function(e,t,n){"use strict";n.d(t,{r:function(){return I}});var r=n(52322),o=n(66178),i=n(9341),a=n(2784),s=n(91482),c=n(11200),l=n(13588),u=n(38483),d=n(46690),p=n(97072),f=n(28559),m=n(82027),h=n(50569);let g=(0,a.createContext)(null),v=g.Provider,b=()=>(0,a.useContext)(g);var y=n(6941),x=n(62770);let k={},w=(0,m.d)((e,t)=>{let{value:n,defaultValue:o,onChange:a,size:s,wrapperProps:c,children:l,readOnly:d,...p}=(0,u.w)("SwitchGroup",k,e),[f,m]=(0,i.C)({value:n,defaultValue:o,finalValue:[],onChange:a});return(0,r.jsx)(v,{value:{value:f,onChange:e=>{let t=e.currentTarget.value;d||m(f.includes(t)?f.filter(e=>e!==t):[...f,t])},size:s},children:(0,r.jsx)(y.I.Wrapper,{size:s,ref:t,...c,...p,labelElement:"div",__staticSelector:"SwitchGroup",children:(0,r.jsx)(x.m,{role:"group",children:l})})})});w.classes=y.I.Wrapper.classes,w.displayName="@mantine/core/SwitchGroup";var j={root:"m_5f93f3bb",input:"m_926b4011",track:"m_9307d992",thumb:"m_93039a1d",trackLabel:"m_8277e082"};let C={labelPosition:"right"},S=(0,c.Z)((e,{radius:t,color:n,size:r})=>({root:{"--switch-radius":void 0===t?void 0:(0,s.H5)(t),"--switch-height":(0,s.ap)(r,"switch-height"),"--switch-width":(0,s.ap)(r,"switch-width"),"--switch-thumb-size":(0,s.ap)(r,"switch-thumb-size"),"--switch-label-font-size":(0,s.ap)(r,"switch-label-font-size"),"--switch-track-label-padding":(0,s.ap)(r,"switch-track-label-padding"),"--switch-color":n?(0,l.p)(n,e):void 0}})),I=(0,m.d)((e,t)=>{let n=(0,u.w)("Switch",C,e),{classNames:a,className:s,style:c,styles:l,unstyled:m,vars:g,color:v,label:y,offLabel:x,onLabel:k,id:w,size:I,radius:M,wrapperProps:T,children:E,thumbIcon:P,checked:R,defaultChecked:N,onChange:_,labelPosition:F,description:B,error:A,disabled:L,variant:D,rootRef:$,mod:z,...H}=n,O=b(),Z=I||O?.size,V=(0,d.y)({name:"Switch",props:n,classes:j,className:s,style:c,classNames:a,styles:l,unstyled:m,vars:g,varsResolver:S}),{styleProps:G,rest:W}=(0,p.c)(H),Y=(0,o.M)(w),q=O?{checked:O.value.includes(W.value),onChange:O.onChange}:{},[K,U]=(0,i.C)({value:q.checked??R,defaultValue:N,finalValue:!1});return(0,r.jsxs)(h.Z,{...V("root"),__staticSelector:"Switch",__stylesApiProps:n,id:Y,size:Z,labelPosition:F,label:y,description:B,error:A,disabled:L,bodyElement:"label",labelElement:"span",classNames:a,styles:l,unstyled:m,"data-checked":q.checked||void 0,variant:D,ref:$,mod:z,...G,...T,children:[(0,r.jsx)("input",{...W,disabled:L,checked:K,onChange:e=>{O?q.onChange?.(e):_?.(e),U(e.currentTarget.checked)},id:Y,ref:t,type:"checkbox",role:"switch",...V("input")}),(0,r.jsxs)(f.x,{"aria-hidden":"true",mod:{error:A,"label-position":F},...V("track"),children:[(0,r.jsx)(f.x,{component:"span",mod:"reduce-motion",...V("thumb"),children:P}),(0,r.jsx)("span",{...V("trackLabel"),children:K?k:x})]})]})});I.classes={...j,...h.J},I.displayName="@mantine/core/Switch",I.Group=w},96242:function(e,t,n){"use strict";n.d(t,{i:function(){return P}});var r=n(52322),o=n(58898);n(2784);var i=n(91482),a=n(11200),s=n(13588),c=n(38483),l=n(46690),u=n(28559),d=n(82027);let[p,f]=(0,n(89106).R)("Table component was not found in the tree");var m={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,c.w)(n,{},o),{classNames:s,className:l,style:d,styles:p,...m}=a,h=f();return(0,r.jsx)(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}(h,t),...h.getStyles(e,{className:l,classNames:s,style:d,styles:p,props:a}),...m})});return o.displayName=`@mantine/core/${n}`,o.classes=m,o}let g=h("th",{columnBorder:!0}),v=h("td",{columnBorder:!0}),b=h("tr",{rowBorder:!0,striped:!0,highlightOnHover:!0}),y=h("thead",{stickyHeader:!0}),x=h("tbody"),k=h("tfoot"),w=h("caption",{captionSide:!0});function j({data:e}){return(0,r.jsxs)(r.Fragment,{children:[e.caption&&(0,r.jsx)(w,{children:e.caption}),e.head&&(0,r.jsx)(y,{children:(0,r.jsx)(b,{children:e.head.map((e,t)=>(0,r.jsx)(g,{children:e},t))})}),e.body&&(0,r.jsx)(x,{children:e.body.map((e,t)=>(0,r.jsx)(b,{children:e.map((e,t)=>(0,r.jsx)(v,{children:e},t))},t))}),e.foot&&(0,r.jsx)(k,{children:(0,r.jsx)(b,{children:e.foot.map((e,t)=>(0,r.jsx)(g,{children:e},t))})})]})}j.displayName="@mantine/core/TableDataRenderer";var C=n(38405);let S={type:"scrollarea"},I=(0,a.Z)((e,{minWidth:t,type:n})=>({scrollContainer:{"--table-min-width":(0,o.h)(t),"--table-overflow":"native"===n?"auto":void 0}})),M=(0,d.d)((e,t)=>{let n=(0,c.w)("TableScrollContainer",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:p,children:f,minWidth:h,type:g,...v}=n,b=(0,l.y)({name:"TableScrollContainer",classes:m,props:n,className:i,style:a,classNames:o,styles:s,unstyled:d,vars:p,varsResolver:I,rootSelector:"scrollContainer"});return(0,r.jsx)(u.x,{component:"scrollarea"===g?C.x:"div",..."scrollarea"===g?{offsetScrollbars:"x"}:{},ref:t,...b("scrollContainer"),...v,children:(0,r.jsx)("div",{...b("scrollContainerInner"),children:f})})});M.classes=m,M.displayName="@mantine/core/TableScrollContainer";let T={withRowBorders:!0,verticalSpacing:7},E=(0,a.Z)((e,{layout:t,captionSide:n,horizontalSpacing:r,verticalSpacing:a,borderColor:c,stripedColor:l,highlightOnHoverColor:u,striped:d,highlightOnHover:p,stickyHeaderOffset:f,stickyHeader:m})=>({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":c?(0,s.p)(c,e):void 0,"--table-striped-color":d&&l?(0,s.p)(l,e):void 0,"--table-highlight-on-hover-color":p&&u?(0,s.p)(u,e):void 0,"--table-sticky-header-offset":m?(0,o.h)(f):void 0}})),P=(0,d.d)((e,t)=>{let n=(0,c.w)("Table",T,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:f,horizontalSpacing:h,verticalSpacing:g,captionSide:v,stripedColor:b,highlightOnHoverColor:y,striped:x,highlightOnHover:k,withColumnBorders:w,withRowBorders:C,withTableBorder:S,borderColor:I,layout:M,variant:P,data:R,children:N,stickyHeader:_,stickyHeaderOffset:F,mod:B,...A}=n,L=(0,l.y)({name:"Table",props:n,className:i,style:a,classes:m,classNames:o,styles:s,unstyled:d,rootSelector:"table",vars:f,varsResolver:E});return(0,r.jsx)(p,{value:{getStyles:L,stickyHeader:_,striped:!0===x?"odd":x||void 0,highlightOnHover:k,withColumnBorders:w,withRowBorders:C,captionSide:v||"bottom"},children:(0,r.jsx)(u.x,{component:"table",variant:P,ref:t,mod:[{"data-with-table-border":S},B],...L("table"),...A,children:N||!!R&&(0,r.jsx)(j,{data:R})})})});P.classes=m,P.displayName="@mantine/core/Table",P.Td=v,P.Th=g,P.Tr=b,P.Thead=y,P.Tbody=x,P.Tfoot=k,P.Caption=w,P.ScrollContainer=M,P.DataRenderer=j},8582:function(e,t,n){"use strict";n.d(t,{x:function(){return h}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(13588),s=n(51848),c=n(38483),l=n(46690),u=n(28559),d=n(33502),p={root:"m_b6d8b162"};let f={inherit:!1},m=(0,i.Z)((e,{variant:t,lineClamp:n,gradient:r,size:i,color:c})=>({root:{"--text-fz":(0,o.yv)(i),"--text-lh":(0,o.Dp)(i),"--text-gradient":"gradient"===t?(0,s.u)(r,e):void 0,"--text-line-clamp":"number"==typeof n?n.toString():void 0,"--text-color":c?(0,a.p)(c,e):void 0}})),h=(0,d.b)((e,t)=>{let n=(0,c.w)("Text",f,e),{lineClamp:o,truncate:i,inline:a,inherit:s,gradient:d,span:h,__staticSelector:g,vars:v,className:b,style:y,classNames:x,styles:k,unstyled:w,variant:j,mod:C,size:S,...I}=n,M=(0,l.y)({name:["Text",g],props:n,classes:p,className:b,style:y,classNames:x,styles:k,unstyled:w,vars:v,varsResolver:m});return(0,r.jsx)(u.x,{...M("root",{focusable:!0}),ref:t,component:h?"span":"p",variant:j,mod:[{"data-truncate":"start"===i?"start":"end"===i||i?"end":void 0,"data-line-clamp":"number"==typeof o,"data-inline":a,"data-inherit":s},C],size:S,...I})});h.classes=p,h.displayName="@mantine/core/Text"},74770:function(e,t,n){"use strict";n.d(t,{o:function(){return c}});var r=n(52322);n(2784);var o=n(38483),i=n(82027),a=n(73063);let s={},c=(0,i.d)((e,t)=>{let n=(0,o.w)("TextInput",s,e);return(0,r.jsx)(a.M,{component:"input",ref:t,...n,__staticSelector:"TextInput"})});c.classes=a.M.classes,c.displayName="@mantine/core/TextInput"},94120:function(e,t,n){"use strict";n.d(t,{D:function(){return m}});var r=n(52322);n(2784);var o=n(11200),i=n(38483),a=n(46690),s=n(28559),c=n(82027),l=n(58898);let u=["h1","h2","h3","h4","h5","h6"];var d={root:"m_8a5d1357"};let p={order:1},f=(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}}}),m=(0,c.d)((e,t)=>{let n=(0,i.w)("Title",p,e),{classNames:o,className:c,style:l,styles:u,unstyled:m,order:h,vars:g,size:v,variant:b,lineClamp:y,textWrap:x,mod:k,...w}=n,j=(0,a.y)({name:"Title",props:n,classes:d,className:c,style:l,classNames:o,styles:u,unstyled:m,vars:g,varsResolver:f});return[1,2,3,4,5,6].includes(h)?(0,r.jsx)(s.x,{...j("root"),component:`h${h}`,variant:b,ref:t,mod:[{order:h,"data-line-clamp":"number"==typeof y},k],size:v,...w}):null});m.classes=d,m.displayName="@mantine/core/Title"},893:function(e,t,n){"use strict";n.d(t,{u:function(){return Z}});var r=n(52322),o=n(2784),i=n(40489),a=n(70837),s=n(98399),c=n(97263),l=n(91482),u=n(11200),d=n(13588),p=n(38483),f=n(46690),m=n(28559),h=n(82027),g=n(89027),v=n(71916),b=n(62086),y=n(71517),x=n(96321);let k={duration:100,transition:"fade"};var w=n(68755),j=n(6178),C=n(63607),S=n(75580),I=n(10712),M={tooltip:"m_1b3c8819",arrow:"m_f898399f"};let T={refProp:"ref",withinPortal:!0,offset:10,position:"right",zIndex:(0,c.w)("popover")},E=(0,u.Z)((e,{radius:t,color:n})=>({tooltip:{"--tooltip-radius":void 0===t?void 0:(0,l.H5)(t),"--tooltip-bg":n?(0,d.p)(n,e):void 0,"--tooltip-color":n?"var(--mantine-color-white)":void 0}})),P=(0,h.d)((e,t)=>{let n=(0,p.w)("TooltipFloating",T,e),{children:i,refProp:c,withinPortal:l,style:u,className:d,classNames:h,styles:g,unstyled:v,radius:b,color:x,label:k,offset:P,position:R,multiline:N,zIndex:_,disabled:F,variant:B,vars:A,portalProps:L,...D}=n,$=(0,w.rZ)(),z=(0,f.y)({name:"TooltipFloating",props:n,classes:M,className:d,style:u,classNames:h,styles:g,unstyled:v,rootSelector:"tooltip",vars:A,varsResolver:E}),{handleMouseMove:H,x:O,y:Z,opened:V,boundaryRef:G,floating:W,setOpened:Y}=function({offset:e,position:t}){let[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(),{x:a,y:s,elements:c,refs:l,update:u,placement:d}=(0,C.YF)({placement:t,middleware:[(0,S.uY)({crossAxis:!0,padding:5,rootBoundary:"document"})]}),p=d.includes("right")?e:t.includes("left")?-1*e:0,f=d.includes("bottom")?e:t.includes("top")?-1*e:0,m=(0,o.useCallback)(({clientX:e,clientY:t})=>{l.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:e,y:t,left:e+p,top:t+f,right:e,bottom:t})})},[c.reference]);return(0,o.useEffect)(()=>{if(l.floating.current){let e=i.current;e.addEventListener("mousemove",m);let t=(0,I.Kx)(l.floating.current);return t.forEach(e=>{e.addEventListener("scroll",u)}),()=>{e.removeEventListener("mousemove",m),t.forEach(e=>{e.removeEventListener("scroll",u)})}}},[c.reference,l.floating.current,u,m,n]),{handleMouseMove:m,x:a,y:s,opened:n,setOpened:r,boundaryRef:i,floating:l.setFloating}}({offset:P,position:R});if(!(0,s.k)(i))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,a.Yx)(G,i.ref,t);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y.q,{...L,withinPortal:l,children:(0,r.jsx)(m.x,{...D,...z("tooltip",{style:{...(0,j.c)(u,$),zIndex:_,display:!F&&V?"block":"none",top:(Z&&Math.round(Z))??"",left:(O&&Math.round(O))??""}}),variant:B,ref:W,mod:{multiline:N},children:k})}),(0,o.cloneElement)(i,{...i.props,[c]:q,onMouseEnter:e=>{i.props.onMouseEnter?.(e),H(e),Y(!0)},onMouseLeave:e=>{i.props.onMouseLeave?.(e),Y(!1)}})]})});P.classes=M,P.displayName="@mantine/core/TooltipFloating";let R=(0,o.createContext)(!1),N=R.Provider,_=()=>(0,o.useContext)(R),F={openDelay:0,closeDelay:0};function B(e){let{openDelay:t,closeDelay:n,children:o}=(0,p.w)("TooltipGroup",F,e);return(0,r.jsx)(N,{value:!0,children:(0,r.jsx)(C.e0,{delay:{open:t,close:n},children:o})})}B.displayName="@mantine/core/TooltipGroup";var A=n(84061),L=n(92416),D=n(66178),$=n(71978),z=n(52630);let H={position:"top",refProp:"ref",withinPortal:!0,inline:!1,arrowSize:4,arrowOffset:5,arrowRadius:0,arrowPosition:"side",offset:5,transitionProps:{duration:100,transition:"fade"},events:{hover:!0,focus:!1,touch:!1},zIndex:(0,c.w)("popover"),positionDependencies:[]},O=(0,u.Z)((e,{radius:t,color:n})=>({tooltip:{"--tooltip-radius":void 0===t?void 0:(0,l.H5)(t),"--tooltip-bg":n?(0,d.p)(n,e):void 0,"--tooltip-color":n?"var(--mantine-color-white)":void 0}})),Z=(0,h.d)((e,t)=>{var n;let c=(0,p.w)("Tooltip",H,e),{children:l,position:u,refProp:d,label:h,openDelay:w,closeDelay:j,onPositionChange:I,opened:T,withinPortal:E,radius:P,color:R,classNames:N,styles:F,unstyled:B,style:Z,className:V,withArrow:G,arrowSize:W,arrowOffset:Y,arrowRadius:q,arrowPosition:K,offset:U,transitionProps:X,multiline:J,events:Q,zIndex:ee,disabled:et,positionDependencies:en,onClick:er,onMouseEnter:eo,onMouseLeave:ei,inline:ea,variant:es,keepMounted:ec,vars:el,portalProps:eu,mod:ed,floatingStrategy:ep,...ef}=(0,p.w)("Tooltip",H,c),{dir:em}=(0,g.gm)(),eh=(0,o.useRef)(null),eg=function(e){let[t,n]=(0,o.useState)(!1),r="boolean"==typeof e.opened?e.opened:t,i=_(),a=(0,D.M)(),{delay:s,currentId:c,setCurrentId:l}=(0,C.tj)(),u=(0,o.useCallback)(e=>{n(e),e&&l(a)},[l,a]),{x:d,y:p,context:f,refs:m,update:h,placement:g,middlewareData:{arrow:{x:v,y:b}={}}}=(0,C.YF)({strategy:e.strategy,placement:e.position,open:r,onOpenChange:u,middleware:[(0,A.cv)(e.offset),(0,S.uY)({padding:8}),(0,S.RR)(),(0,L.x7)({element:e.arrowRef,padding:e.arrowOffset}),...e.inline?[(0,S.Qo)()]:[]]}),{getReferenceProps:y,getFloatingProps:x}=(0,C.NI)([(0,C.XI)(f,{enabled:e.events?.hover,delay:i?s:{open:e.openDelay,close:e.closeDelay},mouseOnly:!e.events?.touch}),(0,C.KK)(f,{enabled:e.events?.focus,visibleOnly:!0}),(0,C.qs)(f,{role:"tooltip"}),(0,C.bQ)(f,{enabled:void 0===e.opened}),(0,C.Qu)(f,{id:a})]);(0,z.L)({opened:r,position:e.position,positionDependencies:e.positionDependencies,floating:{refs:m,update:h}}),(0,$.l)(()=>{e.onPositionChange?.(g)},[g]);let k=r&&c&&c!==a;return{x:d,y:p,arrowX:v,arrowY:b,reference:m.setReference,floating:m.setFloating,getFloatingProps:x,getReferenceProps:y,isGroupPhase:k,opened:r,placement:g}}({position:(0,v._)(em,u),closeDelay:j,openDelay:w,onPositionChange:I,opened:T,events:Q,arrowRef:eh,arrowOffset:Y,offset:"number"==typeof U?U+(G?W/2:0):U,positionDependencies:[...en,l],inline:ea,strategy:ep}),ev=(0,f.y)({name:"Tooltip",props:c,classes:M,className:V,style:Z,classNames:N,styles:F,unstyled:B,rootSelector:"tooltip",vars:el,varsResolver:O});if(!(0,s.k)(l))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 eb=(0,a.Yx)(eg.reference,l.ref,t),ey=(n={duration:100,transition:"fade"},{...k,...n,...X});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y.q,{...eu,withinPortal:E,children:(0,r.jsx)(x.u,{...ey,keepMounted:ec,mounted:!et&&!!eg.opened,duration:eg.isGroupPhase?10:ey.duration,children:e=>(0,r.jsxs)(m.x,{...ef,variant:es,mod:[{multiline:J},ed],...eg.getFloatingProps({ref:eg.floating,className:ev("tooltip").className,style:{...ev("tooltip").style,...e,zIndex:ee,top:eg.y??0,left:eg.x??0}}),children:[h,(0,r.jsx)(b.Y,{ref:eh,arrowX:eg.arrowX,arrowY:eg.arrowY,visible:G,position:eg.placement,arrowSize:W,arrowOffset:Y,arrowRadius:q,arrowPosition:K,...ev("arrow")})]})})}),(0,o.cloneElement)(l,eg.getReferenceProps({onClick:er,onMouseEnter:eo,onMouseLeave:ei,onMouseMove:c.onMouseMove,onPointerDown:c.onPointerDown,onPointerEnter:c.onPointerEnter,[d]:eb,className:(0,i.Z)(V,l.props.className),...l.props}))]})});Z.classes=M,Z.displayName="@mantine/core/Tooltip",Z.Floating=P,Z.Group=B},96321:function(e,t,n){"use strict";n.d(t,{u:function(){return d}});var r=n(52322),o=n(82245);let i={entering:"in",entered:"in",exiting:"out",exited:"out","pre-exiting":"out","pre-entering":"out"};var a=n(2784),s=n(28316),c=n(98045),l=n(71978),u=n(68755);function d({keepMounted:e,transition:t="fade",duration:n=250,exitDuration:d=n,mounted:p,children:f,timingFunction:m="ease",onExit:h,onEntered:g,onEnter:v,onExited:b}){let{transitionDuration:y,transitionStatus:x,transitionTimingFunction:k}=function({duration:e,exitDuration:t,timingFunction:n,mounted:r,onEnter:o,onExit:i,onEntered:d,onExited:p}){let f=(0,u.rZ)(),m=(0,c.J)(),h=!!f.respectReducedMotion&&m,[g,v]=(0,a.useState)(h?0:e),[b,y]=(0,a.useState)(r?"entered":"exited"),x=(0,a.useRef)(-1),k=(0,a.useRef)(-1),w=n=>{let r=n?o:i,a=n?d:p;window.clearTimeout(x.current);let c=h?0:n?e:t;v(c),0===c?("function"==typeof r&&r(),"function"==typeof a&&a(),y(n?"entered":"exited")):k.current=requestAnimationFrame(()=>{s.flushSync(()=>{y(n?"pre-entering":"pre-exiting")}),k.current=requestAnimationFrame(()=>{"function"==typeof r&&r(),y(n?"entering":"exiting"),x.current=window.setTimeout(()=>{"function"==typeof a&&a(),y(n?"entered":"exited")},c)})})};return(0,l.l)(()=>{w(r)},[r]),(0,a.useEffect)(()=>()=>{window.clearTimeout(x.current),cancelAnimationFrame(k.current)},[]),{transitionDuration:g,transitionStatus:b,transitionTimingFunction:n||"ease"}}({mounted:p,exitDuration:d,duration:n,timingFunction:m,onExit:h,onEntered:g,onEnter:v,onExited:b});return 0===y?p?(0,r.jsx)(r.Fragment,{children:f({})}):e?f({display:"none"}):null:"exited"===x?e?f({display:"none"}):null:(0,r.jsx)(r.Fragment,{children:f(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:x,timingFunction:k}))})}d.displayName="@mantine/core/Transition"},82245:function(e,t,n){"use strict";n.d(t,{p:function(){return i}});var r=n(58898);n(2784),n(52322);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"},"fade-up":{in:{opacity:1,transform:"translateY(0)"},out:{opacity:0,transform:`translateY(${(0,r.h)(30)}`},transitionProperty:"opacity, transform"},"fade-down":{in:{opacity:1,transform:"translateY(0)"},out:{opacity:0,transform:`translateY(${(0,r.h)(-30)}`},transitionProperty:"opacity, transform"},"fade-left":{in:{opacity:1,transform:"translateX(0)"},out:{opacity:0,transform:`translateX(${(0,r.h)(30)}`},transitionProperty:"opacity, transform"},"fade-right":{in:{opacity:1,transform:"translateX(0)"},out:{opacity:0,transform:`translateX(${(0,r.h)(-30)}`},transitionProperty:"opacity, transform"},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"}}}},63409:function(e,t,n){"use strict";n.d(t,{k:function(){return u}});var r=n(52322);n(2784);var o=n(38483),i=n(46690),a=n(28559),s=n(33502),c={root:"m_87cf2631"};let l={__staticSelector:"UnstyledButton"},u=(0,s.b)((e,t)=>{let n=(0,o.w)("UnstyledButton",l,e),{className:s,component:u="button",__staticSelector:d,unstyled:p,classNames:f,styles:m,style:h,...g}=n,v=(0,i.y)({name:d,props:n,classes:c,className:s,style:h,classNames:f,styles:m,unstyled:p});return(0,r.jsx)(a.x,{...v("root",{focusable:!0}),component:u,ref:t,type:"button"===u?"button":void 0,...g})});u.classes=c,u.displayName="@mantine/core/UnstyledButton"},1767:function(e,t,n){"use strict";n.d(t,{T:function(){return u}});var r=n(52322);n(2784);var o=n(38483),i=n(46690),a=n(28559),s=n(82027),c={root:"m_515a97f8"};let l={},u=(0,s.d)((e,t)=>{let n=(0,o.w)("VisuallyHidden",l,e),{classNames:s,className:u,style:d,styles:p,unstyled:f,vars:m,...h}=n,g=(0,i.y)({name:"VisuallyHidden",classes:c,props:n,className:u,style:d,classNames:s,styles:p,unstyled:f});return(0,r.jsx)(a.x,{component:"span",ref:t,...g("root"),...h})});u.classes=c,u.displayName="@mantine/core/VisuallyHidden"},28559:function(e,t,n){"use strict";n.d(t,{x:function(){return b}});var r=n(52322),o=n(2784),i=n(40489),a=n(11306),s=n(9437),c=n(82087),l=n(75461),u=n(68755);function d(e){return e.startsWith("data-")?e:`data-${e}`}function p(e,t){return Array.isArray(e)?[...e].reduce((e,n)=>({...e,...p(n,t)}),{}):"function"==typeof e?e(t):null==e?{}:e}var f=n(97072),m=n(58272),h=n(53515),g=n(12063);let v=(0,o.forwardRef)(({component:e,style:t,__vars:n,className:o,variant:a,mod:v,size:b,hiddenFrom:y,visibleFrom:x,lightHidden:k,darkHidden:w,renderRoot:j,__size:C,...S},I)=>{let M=(0,u.rZ)(),{styleProps:T,rest:E}=(0,f.c)(S),P=(0,l.dv)(),R=P?.()?.(T.sx),N=(0,g.m)(),_=(0,h.n)({styleProps:T,theme:M,data:m.p}),F={ref:I,style:function({theme:e,style:t,vars:n,styleProps:r}){let o=p(t,e),i=p(n,e);return{...o,...i,...r}}({theme:M,style:t,vars:n,styleProps:_.inlineStyles}),className:(0,i.Z)(o,R,{[N]:_.hasResponsiveStyles,"mantine-light-hidden":k,"mantine-dark-hidden":w,[`mantine-hidden-from-${y}`]:y,[`mantine-visible-from-${x}`]:x}),"data-variant":a,"data-size":(0,c.s)(b)?void 0:b||void 0,size:C,...function e(t){return t?"string"==typeof t?{[d(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[d(n)]=t[n]),e},{}):null}(v),...E};return(0,r.jsxs)(r.Fragment,{children:[_.hasResponsiveStyles&&(0,r.jsx)(s.f,{selector:`.${N}`,styles:_.styles,media:_.media}),"function"==typeof j?j(F):(0,r.jsx)(e||"div",{...F})]})});v.displayName="@mantine/core/Box";let b=(0,a.F)(v)},6178: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}}})},97072:function(e,t,n){"use strict";n.d(t,{c:function(){return o}});var r=n(40580);function o(e){let{m:t,mx:n,my:o,mt:i,mb:a,ml:s,mr:c,me:l,ms:u,p:d,px:p,py:f,pt:m,pb:h,pl:g,pr:v,pe:b,ps:y,bd:x,bg:k,c:w,opacity:j,ff:C,fz:S,fw:I,lts:M,ta:T,lh:E,fs:P,tt:R,td:N,w:_,miw:F,maw:B,h:A,mih:L,mah:D,bgsz:$,bgp:z,bgr:H,bga:O,pos:Z,top:V,left:G,bottom:W,right:Y,inset:q,display:K,flex:U,hiddenFrom:X,visibleFrom:J,lightHidden:Q,darkHidden:ee,sx:et,...en}=e;return{styleProps:(0,r.L)({m:t,mx:n,my:o,mt:i,mb:a,ml:s,mr:c,me:l,ms:u,p:d,px:p,py:f,pt:m,pb:h,pl:g,pr:v,pe:b,ps:y,bd:x,bg:k,c:w,opacity:j,ff:C,fz:S,fw:I,lts:M,ta:T,lh:E,fs:P,tt:R,td:N,w:_,miw:F,maw:B,h:A,mih:L,mah:D,bgsz:$,bgp:z,bgr:H,bga:O,pos:Z,top:V,left:G,bottom:W,right:Y,inset:q,display:K,flex:U,hiddenFrom:X,visibleFrom:J,lightHidden:Q,darkHidden:ee,sx:et}),rest:en}}n(2784),n(52322)},53515:function(e,t,n){"use strict";n.d(t,{n:function(){return p}});var r=n(98446);n(2784),n(52322);var o=n(58898),i=n(46403);function a(e,t){let n=(0,i.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 s={text:"var(--mantine-font-family)",mono:"var(--mantine-font-family-monospace)",monospace:"var(--mantine-font-family-monospace)",heading:"var(--mantine-font-family-headings)",headings:"var(--mantine-font-family-headings)"},c=["h1","h2","h3","h4","h5","h6"],l=["h1","h2","h3","h4","h5","h6"],u={color:a,textColor:function(e,t){let n=(0,i.E)({color:e,theme:t});return n.isThemeColor&&void 0===n.shade?`var(--mantine-color-${n.color}-text)`:a(e,t)},fontSize:function(e,t){return"string"==typeof e&&e in t.fontSizes?`var(--mantine-font-size-${e})`:"string"==typeof e&&c.includes(e)?`var(--mantine-${e}-font-size)`:"number"==typeof e||"string"==typeof e?(0,o.h)(e):e},spacing:function(e,t){if("number"==typeof e)return(0,o.h)(e);if("string"==typeof e){let n=e.replace("-","");if(!(n in t.spacing))return(0,o.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,o.h)(e):e},lineHeight:function(e,t){return"string"==typeof e&&e in t.lineHeights?`var(--mantine-line-height-${e})`:"string"==typeof e&&l.includes(e)?`var(--mantine-${e}-line-height)`:e},fontFamily:function(e){return"string"==typeof e&&e in s?s[e]:e},border:function(e,t){if("number"==typeof e)return(0,o.h)(e);if("string"==typeof e){let[n,r,...i]=e.split(" ").filter(e=>""!==e.trim()),s=`${(0,o.h)(n)}`;return r&&(s+=` ${r}`),i.length>0&&(s+=` ${a(i.join(" "),t)}`),s.trim()}return e}};function d(e){return e.replace("(min-width: ","").replace("em)","")}function p({styleProps:e,data:t,theme:n}){return function({media:e,...t}){let n=Object.keys(e).sort((e,t)=>Number(d(e))-Number(d(t))).map(t=>({query:t,styles:e[t]}));return{...t,media:n}}((0,r.X)(e).reduce((o,i)=>{var a,s;if("hiddenFrom"===i||"visibleFrom"===i||"sx"===i)return o;let c=t[i],l=Array.isArray(c.property)?c.property:[c.property],d="object"==typeof(s=e[i])&&null!==s?"base"in s?s.base:void 0:s;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 l.forEach(e=>{o.inlineStyles[e]=u[c.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 l.forEach(t=>{d&&(o.styles[t]=u[c.type](d,n)),p.forEach(r=>{var a;let s=`(min-width: ${n.breakpoints[r]})`;o.media[s]={...o.media[s],[t]:u[c.type]("object"==typeof(a=e[i])&&null!==a&&r in a?a[r]:a,n)}})}),o},{hasResponsiveStyles:!1,styles:{},inlineStyles:{},media:{}}))}},58272: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"},ms:{type:"spacing",property:"marginInlineStart"},me:{type:"spacing",property:"marginInlineEnd"},mx:{type:"spacing",property:"marginInline"},my:{type:"spacing",property:"marginBlock"},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"},ps:{type:"spacing",property:"paddingInlineStart"},pe:{type:"spacing",property:"paddingInlineEnd"},px:{type:"spacing",property:"paddingInline"},py:{type:"spacing",property:"paddingBlock"},bd:{type:"border",property:"border"},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"}}},12063:function(e,t,n){"use strict";n.d(t,{m:function(){return o}});var r=n(2784);function o(){let e=(0,r.useId)().replace(/:/g,"");return`__m__-${e}`}},89027:function(e,t,n){"use strict";n.d(t,{_9:function(){return c},gm:function(){return s}});var r=n(52322),o=n(2784),i=n(64261);let a=(0,o.createContext)({dir:"ltr",toggleDirection:()=>{},setDirection:()=>{}});function s(){return(0,o.useContext)(a)}function c({children:e,initialDirection:t="ltr",detectDirection:n=!0}){let[s,c]=(0,o.useState)(t),l=e=>{c(e),document.documentElement.setAttribute("dir",e)};return(0,i.Y)(()=>{if(n){let e=document.documentElement.getAttribute("dir");("rtl"===e||"ltr"===e)&&l(e)}},[]),(0,r.jsx)(a.Provider,{value:{dir:s,toggleDirection:()=>l("ltr"===s?"rtl":"ltr"),setDirection:l},children:e})}},9437:function(e,t,n){"use strict";n.d(t,{f:function(){return s}});var r=n(52322);n(2784);var o=n(75461),i=n(98446);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 s(e){let t=(0,o.R7)();return(0,r.jsx)("style",{"data-mantine-styles":"inline",nonce:t?.(),dangerouslySetInnerHTML:{__html:function({selector:e,styles:t,media:n,container:r}){let o=t?a(t):"",i=Array.isArray(n)?n.map(t=>`@media${t.query}{${e}{${a(t.styles)}}}`):[],s=Array.isArray(r)?r.map(t=>`@container ${t.query}{${e}{${a(t.styles)}}}`):[];return`${o?`${e}{${o}}`:""}${i.join("")}${s.join("")}`.trim()}(e)}})}},75461:function(e,t,n){"use strict";n.d(t,{DE:function(){return u},Nu:function(){return l},R7:function(){return c},Sm:function(){return a},XD:function(){return o},dv:function(){return d},sZ:function(){return p},uK:function(){return s},wB:function(){return i}});var r=n(2784);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 s(){return i().classNamesPrefix}function c(){return i().getStyleNonce}function l(){return i().withStaticClasses}function u(){return i().headless}function d(){return i().stylesTransform?.sx}function p(){return i().stylesTransform?.styles}},53379:function(e,t,n){"use strict";n.d(t,{m:function(){return d}});var r=n(98446),o=n(58898);n(2784),n(52322);var i=n(87722),a=n(39568),s=n(20754);function c({theme:e,color:t,colorScheme:n,name:r=t,withColorValues:o=!0}){if(!e.colors[t])return{};if("light"===n){let n=(0,i.j)(e,"light"),a={[`--mantine-color-${r}-text`]:`var(--mantine-color-${r}-filled)`,[`--mantine-color-${r}-filled`]:`var(--mantine-color-${r}-${n})`,[`--mantine-color-${r}-filled-hover`]:`var(--mantine-color-${r}-${9===n?8:n+1})`,[`--mantine-color-${r}-light`]:(0,s.F)(e.colors[t][n],.1),[`--mantine-color-${r}-light-hover`]:(0,s.F)(e.colors[t][n],.12),[`--mantine-color-${r}-light-color`]:`var(--mantine-color-${r}-${n})`,[`--mantine-color-${r}-outline`]:`var(--mantine-color-${r}-${n})`,[`--mantine-color-${r}-outline-hover`]:(0,s.F)(e.colors[t][n],.05)};return o?{[`--mantine-color-${r}-0`]:e.colors[t][0],[`--mantine-color-${r}-1`]:e.colors[t][1],[`--mantine-color-${r}-2`]:e.colors[t][2],[`--mantine-color-${r}-3`]:e.colors[t][3],[`--mantine-color-${r}-4`]:e.colors[t][4],[`--mantine-color-${r}-5`]:e.colors[t][5],[`--mantine-color-${r}-6`]:e.colors[t][6],[`--mantine-color-${r}-7`]:e.colors[t][7],[`--mantine-color-${r}-8`]:e.colors[t][8],[`--mantine-color-${r}-9`]:e.colors[t][9],...a}:a}let a=(0,i.j)(e,"dark"),c={[`--mantine-color-${r}-text`]:`var(--mantine-color-${r}-4)`,[`--mantine-color-${r}-filled`]:`var(--mantine-color-${r}-${a})`,[`--mantine-color-${r}-filled-hover`]:`var(--mantine-color-${r}-${9===a?8:a+1})`,[`--mantine-color-${r}-light`]:(0,s.F)(e.colors[t][Math.max(0,a-2)],.15),[`--mantine-color-${r}-light-hover`]:(0,s.F)(e.colors[t][Math.max(0,a-2)],.2),[`--mantine-color-${r}-light-color`]:`var(--mantine-color-${r}-${Math.max(a-5,0)})`,[`--mantine-color-${r}-outline`]:`var(--mantine-color-${r}-${Math.max(a-4,0)})`,[`--mantine-color-${r}-outline-hover`]:(0,s.F)(e.colors[t][Math.max(a-4,0)],.05)};return o?{[`--mantine-color-${r}-0`]:e.colors[t][0],[`--mantine-color-${r}-1`]:e.colors[t][1],[`--mantine-color-${r}-2`]:e.colors[t][2],[`--mantine-color-${r}-3`]:e.colors[t][3],[`--mantine-color-${r}-4`]:e.colors[t][4],[`--mantine-color-${r}-5`]:e.colors[t][5],[`--mantine-color-${r}-6`]:e.colors[t][6],[`--mantine-color-${r}-7`]:e.colors[t][7],[`--mantine-color-${r}-8`]:e.colors[t][8],[`--mantine-color-${r}-9`]:e.colors[t][9],...c}:c}var l=n(9065);function u(e,t,n){(0,r.X)(t).forEach(r=>Object.assign(e,{[`--mantine-${n}-${r}`]:t[r]}))}let d=e=>{let t=(0,i.j)(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:(0,o.h)(e.defaultRadius),s={variables:{"--mantine-scale":e.scale.toString(),"--mantine-cursor-type":e.cursorType,"--mantine-color-scheme":"light dark","--mantine-webkit-font-smoothing":e.fontSmoothing?"antialiased":"unset","--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":n,"--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,a.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}-${t})`,"--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)","--mantine-color-dimmed":"var(--mantine-color-gray-6)"},dark:{"--mantine-primary-color-contrast":(0,a.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)","--mantine-color-dimmed":"var(--mantine-color-dark-2)"}};u(s.variables,e.breakpoints,"breakpoint"),u(s.variables,e.spacing,"spacing"),u(s.variables,e.fontSizes,"font-size"),u(s.variables,e.lineHeights,"line-height"),u(s.variables,e.shadows,"shadow"),u(s.variables,e.radius,"radius"),e.colors[e.primaryColor].forEach((t,n)=>{s.variables[`--mantine-primary-color-${n}`]=`var(--mantine-color-${e.primaryColor}-${n})`}),(0,r.X)(e.colors).forEach(t=>{let n=e.colors[t];if((0,l.y)(n)){Object.assign(s.light,c({theme:e,name:n.name,color:n.light,colorScheme:"light",withColorValues:!0})),Object.assign(s.dark,c({theme:e,name:n.name,color:n.dark,colorScheme:"dark",withColorValues:!0}));return}n.forEach((e,n)=>{s.variables[`--mantine-color-${t}-${n}`]=e}),Object.assign(s.light,c({theme:e,color:t,colorScheme:"light",withColorValues:!1})),Object.assign(s.dark,c({theme:e,color:t,colorScheme:"dark",withColorValues:!1}))});let d=e.headings.sizes;return(0,r.X)(d).forEach(t=>{s.variables[`--mantine-${t}-font-size`]=d[t].fontSize,s.variables[`--mantine-${t}-line-height`]=d[t].lineHeight,s.variables[`--mantine-${t}-font-weight`]=d[t].fontWeight||e.headings.fontWeight}),s}},9065:function(e,t,n){"use strict";function r(e){var t;let n=Array.isArray(t=Array.from({length:10}).map((t,n)=>`var(--mantine-color-${e.name}-${n})`))?t:Array(10).fill(t);return Object.defineProperty(n,"mantine-virtual-color",{enumerable:!1,writable:!1,configurable:!1,value:!0}),Object.defineProperty(n,"dark",{enumerable:!1,writable:!1,configurable:!1,value:e.dark}),Object.defineProperty(n,"light",{enumerable:!1,writable:!1,configurable:!1,value:e.light}),Object.defineProperty(n,"name",{enumerable:!1,writable:!1,configurable:!1,value:e.name}),n}function o(e){return!!e&&"object"==typeof e&&"mantine-virtual-color"in e}n.d(t,{y:function(){return o},R:function(){return r}}),n(2784),n(52322)},15759:function(e,t,n){"use strict";n.d(t,{M:function(){return k}});var r=n(52322);function o(e){return"auto"===e||"dark"===e||"light"===e}var i=n(75461),a=n(98446),s=n(65744),c=n(58898),l=n(2784),u=n(68755);function d(){let e=(0,u.rZ)(),t=(0,i.R7)(),n=(0,a.X)(e.breakpoints).reduce((t,n)=>{let r=e.breakpoints[n].includes("px"),o=(0,s.px)(e.breakpoints[n]),i=r?`${o-.1}px`:(0,c.em)(o-.1),a=r?`${o}px`:(0,c.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(0,r.jsx)("style",{"data-mantine-styles":"classes",nonce:t?.(),dangerouslySetInnerHTML:{__html:n}})}function p(e){return Object.entries(e).map(([e,t])=>`${e}: ${t};`).join("")}function f(e,t){return(Array.isArray(e)?e:[e]).reduce((e,t)=>`${t}{${e}}`,t)}var m=n(51324),h=n(53379),g=n(87744);let v=(0,h.m)(g.t);function b({cssVariablesSelector:e,deduplicateCssVariables:t}){let n=(0,u.rZ)(),o=(0,i.R7)(),s=function({theme:e,generator:t}){let n=(0,h.m)(e),r=t?.(e);return r?(0,m.R)(n,r):n}({theme:n,generator:(0,i.Sm)()}),c=":root"===e&&t,l=function(e,t){let n=p(e.variables),r=n?f(t,n):"",o=p(e.dark),i=o?f(`${t}[data-mantine-color-scheme="dark"]`,o):"",a=p(e.light),s=a?f(`${t}[data-mantine-color-scheme="light"]`,a):"";return`${r}${i}${s}`}(c?function(e){let t={variables:{},light:{},dark:{}};return(0,a.X)(e.variables).forEach(n=>{v.variables[n]!==e.variables[n]&&(t.variables[n]=e.variables[n])}),(0,a.X)(e.light).forEach(n=>{v.light[n]!==e.light[n]&&(t.light[n]=e.light[n])}),(0,a.X)(e.dark).forEach(n=>{v.dark[n]!==e.dark[n]&&(t.dark[n]=e.dark[n])}),t}(s):s,e);return l?(0,r.jsx)("style",{"data-mantine-styles":!0,nonce:o?.(),dangerouslySetInnerHTML:{__html:`${l}${c?"":` + ${e}[data-mantine-color-scheme="dark"] { --mantine-color-scheme: dark; } + ${e}[data-mantine-color-scheme="light"] { --mantine-color-scheme: light; } +`}`}}):null}b.displayName="@mantine/CssVariables";var y=n(64261);function x(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,withStaticClasses:a=!0,withGlobalClasses:s=!0,deduplicateCssVariables:c=!0,withCssVariables:p=!0,cssVariablesSelector:f=":root",classNamesPrefix:m="mantine",colorSchemeManager:h=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:g="light",getRootElement:v=()=>document.documentElement,cssVariablesResolver:k,forceColorScheme:w,stylesTransform:j}){let{colorScheme:C,setColorScheme:S,clearColorScheme:I}=function({manager:e,defaultColorScheme:t,getRootElement:n,forceColorScheme:r}){let o=(0,l.useRef)(),[i,a]=(0,l.useState)(()=>e.get(t)),s=r||i,c=(0,l.useCallback)(t=>{r||(x(t,n),a(t),e.set(t))},[e.set,s,r]),u=(0,l.useCallback)(()=>{a(t),x(t,n),e.clear()},[e.clear,t]);return(0,l.useEffect)(()=>(e.subscribe(c),e.unsubscribe),[e.subscribe,e.unsubscribe]),(0,y.Y)(()=>{x(e.get(t),n)},[]),(0,l.useEffect)(()=>{if(r)return x(r,n),()=>{};void 0===r&&x(i,n),o.current=window.matchMedia("(prefers-color-scheme: dark)");let e=e=>{"auto"===i&&x(e.matches?"dark":"light",n)};return o.current?.addEventListener("change",e),()=>o.current?.removeEventListener("change",e)},[i,r]),{colorScheme:s,setColorScheme:c,clearColorScheme:u}}({defaultColorScheme:g,forceColorScheme:w,manager:h,getRootElement:v});return!function({respectReducedMotion:e,getRootElement:t}){(0,y.Y)(()=>{e&&t()?.setAttribute("data-respect-reduced-motion","true")},[e])}({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:v}),(0,r.jsx)(i.XD.Provider,{value:{colorScheme:C,setColorScheme:S,clearColorScheme:I,getRootElement:v,classNamesPrefix:m,getStyleNonce:n,cssVariablesResolver:k,cssVariablesSelector:f,withStaticClasses:a,stylesTransform:j},children:(0,r.jsxs)(u.M2,{theme:e,children:[p&&(0,r.jsx)(b,{cssVariablesSelector:f,deduplicateCssVariables:c}),s&&(0,r.jsx)(d,{}),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"},68755:function(e,t,n){"use strict";n.d(t,{M2:function(){return p},rZ:function(){return d}});var r=n(52322),o=n(2784),i=n(87744),a=n(51324);function s(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&&(!s(e.primaryShade.dark)||!s(e.primaryShade.light))||"number"==typeof e.primaryShade&&!s(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 l=(0,o.createContext)(null),u=()=>(0,o.useContext)(l)||i.t;function d(){let e=(0,o.useContext)(l);if(!e)throw Error("@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app");return e}function p({theme:e,children:t,inherit:n=!0}){let s=u(),d=(0,o.useMemo)(()=>(function(e,t){if(!t)return c(e),e;let n=(0,a.R)(e,t);return t.fontFamily&&!t.headings?.fontFamily&&(n.headings.fontFamily=t.fontFamily),c(n),n})(n?s:i.t,e),[e,s,n]);return(0,r.jsx)(l.Provider,{value:d,children:t})}p.displayName="@mantine/core/MantineThemeProvider"},8943:function(e,t,n){"use strict";n.d(t,{_:function(){return o}});var r=n(65401);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),s=1-t,c=e=>Math.round(e*s);return`rgba(${c(n)}, ${c(o)}, ${c(i)}, ${a})`}},9197:function(e,t,n){"use strict";n.d(t,{B:function(){return c}});var r=n(58898);n(2784),n(52322);var o=n(8943),i=n(51848),a=n(46403),s=n(20754);let c=({color:e,theme:t,variant:n,gradient:c,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,s.m)(n,.1),hover:(0,s.m)(n,.12),color:`var(--mantine-color-${u.color}-${Math.min(u.shade,6)})`,border:`${(0,r.h)(1)} solid transparent`}}return{background:(0,s.m)(e,.1),hover:(0,s.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,s.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,s.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,s.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,s.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)(c,t),hover:(0,i.u)(c,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)`}:{}}},90006:function(e,t,n){"use strict";function r(e,t){return"boolean"==typeof e?e:t.autoContrast}n.d(t,{o:function(){return r}})},39568:function(e,t,n){"use strict";n.d(t,{R:function(){return i},a:function(){return a}});var r=n(87722),o=n(46403);function i({color:e,theme:t,autoContrast:n}){return("boolean"==typeof n?n:t.autoContrast)&&(0,o.E)({color:e||t.primaryColor,theme:t}).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})}},51848:function(e,t,n){"use strict";n.d(t,{u:function(){return o}});var r=n(13588);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%)`}},87722: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}})},13588:function(e,t,n){"use strict";n.d(t,{p:function(){return o}});var r=n(46403);function o(e,t){let n=(0,r.E)({color:e||t.primaryColor,theme:t});return n.variable?`var(${n.variable})`:e}},37360:function(e,t,n){"use strict";n.d(t,{e:function(){return i}});var r=n(65401);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);return .2126*o(t/255)+.7152*o(n/255)+.0722*o(i/255)}(e)>t}},46403:function(e,t,n){"use strict";n.d(t,{E:function(){return i}});var r=n(87722),o=n(37360);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("."),s=a?Number(a):void 0,c=i in t.colors;if(c){let e=void 0!==s?t.colors[i][s]:t.colors[i][(0,r.j)(t,n||"light")];return{color:i,value:e,shade:s,isThemeColor:c,isLight:(0,o.e)(e,t.luminanceThreshold),variable:a?`--mantine-color-${i}-${s}`:`--mantine-color-${i}-filled`}}return{color:e,value:e,isThemeColor:c,isLight:(0,o.e)(e,t.luminanceThreshold),shade:s,variable:void 0}}},20754:function(e,t,n){"use strict";n.d(t,{F:function(){return i},m:function(){return o}});var r=n(65401);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})`}let i=o},65401: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,s=parseInt(o[3],10)/100,c=o[5]?parseFloat(o[5]):void 0,l=(1-Math.abs(2*s-1))*a,u=i/60,d=l*(1-Math.abs(u%2-1)),p=s-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:c||1}}(e):{r:0,g:0,b:0,a:1}}n.d(t,{c:function(){return r}})},60231:function(e,t,n){"use strict";function r(e){return e}n.d(t,{j:function(){return r}})},87744:function(e,t,n){"use strict";n.d(t,{t:function(){return a}});var r=n(58898);n(2784),n(52322);var o=n(9197);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:{}}},68893:function(e,t,n){"use strict";n.d(t,{l:function(){return i}});var r=n(67588),o=n(58092);function i(e,t={getInitialValueInEffect:!0}){let n=(0,r.t)(e,t),{colorScheme:i}=(0,o.X)();return"auto"===i?n:i}},58092:function(e,t,n){"use strict";n.d(t,{X:function(){return s}});var r=n(2784),o=n(67588),i=n(75461);function a(e){let t=document.createElement("style");return t.setAttribute("data-mantine-styles","inline"),t.innerHTML="*, *::before, *::after {transition: none !important;}",t.setAttribute("data-mantine-disable-transition","true"),e&&t.setAttribute("nonce",e),document.head.appendChild(t),()=>document.querySelectorAll("[data-mantine-disable-transition]").forEach(e=>e.remove())}function s({keepTransitions:e}={}){let t=(0,r.useRef)(),n=(0,r.useRef)(),s=(0,r.useContext)(i.XD),c=(0,i.R7)(),l=(0,r.useRef)(c?.());if(!s)throw Error("[@mantine/core] MantineProvider was not found in tree");let u=r=>{s.setColorScheme(r),t.current=e?()=>{}:a(l.current),window.clearTimeout(n.current),n.current=window.setTimeout(()=>{t.current?.()},10)},d=(0,o.t)("light",{getInitialValueInEffect:!1}),p="auto"===s.colorScheme?d:s.colorScheme,f=(0,r.useCallback)(()=>u("light"===p?"dark":"light"),[u,p]);return(0,r.useEffect)(()=>()=>{t.current?.(),window.clearTimeout(n.current)},[]),{colorScheme:s.colorScheme,setColorScheme:u,clearColorScheme:()=>{s.clearColorScheme(),t.current=e?()=>{}:a(l.current),window.clearTimeout(n.current),n.current=window.setTimeout(()=>{t.current?.()},10)},toggleColorScheme:f}}},38483:function(e,t,n){"use strict";n.d(t,{w:function(){return i}});var r=n(40580);n(2784),n(52322);var o=n(68755);function i(e,t,n){let i=(0,o.rZ)(),a=i.components[e]?.defaultProps,s="function"==typeof a?a(i):a;return{...t,...s,...(0,r.L)(n)}}},11306:function(e,t,n){"use strict";function r(e){return e}n.d(t,{F:function(){return r}})},82027:function(e,t,n){"use strict";n.d(t,{d:function(){return i},y:function(){return o}});var r=n(2784);function o(e){return e}function i(e){let t=(0,r.forwardRef)(e);return t.extend=o,t}},33502:function(e,t,n){"use strict";n.d(t,{b:function(){return i}});var r=n(2784),o=n(82027);function i(e){let t=(0,r.forwardRef)(e);return t.extend=o.y,t}},11200:function(e,t,n){"use strict";function r(e){return e}n.d(t,{Z:function(){return r}})},51477:function(e,t,n){"use strict";n.d(t,{h:function(){return a}}),n(2784),n(52322);var r=n(68755),o=n(54834),i=n(80495);function a({classNames:e,styles:t,props:n,stylesCtx:a}){let s=(0,r.rZ)();return{resolvedClassNames:(0,o.m)({theme:s,classNames:e,props:n,stylesCtx:a||void 0}),resolvedStyles:(0,i.i)({theme:s,styles:t,props:n,stylesCtx:a||void 0})}}},79289:function(e,t,n){"use strict";n.d(t,{C:function(){return o},_:function(){return i}});var r=n(40489);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)}},54834:function(e,t,n){"use strict";n.d(t,{m:function(){return i}});var r=n(40489);let o={};function i({theme:e,classNames:t,props:n,stylesCtx:i}){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}((Array.isArray(t)?t:[t]).map(t=>"function"==typeof t?t(e,n,i):t||o))}},80495:function(e,t,n){"use strict";function r({theme:e,styles:t,props:n,stylesCtx:r}){return(Array.isArray(t)?t:[t]).reduce((t,o)=>"function"==typeof o?{...t,...o(e,n,r)}:{...t,...o},{})}n.d(t,{i:function(){return r}})},46690:function(e,t,n){"use strict";n.d(t,{y:function(){return p}}),n(2784),n(52322);var r=n(75461),o=n(68755),i=n(40489),a=n(79289),s=n(54834);function c({selector:e,stylesCtx:t,theme:n,classNames:r,props:o}){return(0,s.m)({theme:n,classNames:r,props:o,stylesCtx:t})[e]}var l=n(80495);function u({style:e,theme:t}){return Array.isArray(e)?[...e].reduce((e,n)=>({...e,...u({style:n,theme:t})}),{}):"function"==typeof e?e(t):null==e?{}:e}var d=n(40580);function p({name:e,classes:t,props:n,stylesCtx:p,className:f,style:m,rootSelector:h="root",unstyled:g,classNames:v,styles:b,vars:y,varsResolver:x}){let k=(0,o.rZ)(),w=(0,r.uK)(),j=(0,r.Nu)(),C=(0,r.DE)(),S=(Array.isArray(e)?e:[e]).filter(e=>e),{withStylesTransform:I,getTransformedStyles:M}=function({props:e,stylesCtx:t,themeName:n}){let i=(0,o.rZ)(),a=r.sZ()?.();return{getTransformedStyles:r=>a?[...r.map(n=>a(n,{props:e,theme:i,ctx:t})),...n.map(n=>a(i.components[n]?.styles,{props:e,theme:i,ctx:t}))].filter(Boolean):[],withStylesTransform:!!a}}({props:n,stylesCtx:p,themeName:S});return(e,r)=>({className:function({theme:e,options:t,themeName:n,selector:r,classNamesPrefix:o,classNames:l,classes:u,unstyled:d,className:p,rootSelector:f,props:m,stylesCtx:h,withStaticClasses:g,headless:v,transformedStyles:b}){return(0,i.Z)((0,a._)({theme:e,options:t,unstyled:d||v}),function({themeName:e,theme:t,selector:n,props:r,stylesCtx:o}){return e.map(e=>s.m({theme:t,classNames:t.components[e]?.classNames,props:r,stylesCtx:o})?.[n])}({theme:e,themeName:n,selector:r,props:m,stylesCtx:h}),function({options:e,classes:t,selector:n,unstyled:r}){return e?.variant&&!r?t[`${n}--${e.variant}`]:void 0}({options:t,classes:u,selector:r,unstyled:d}),c({selector:r,stylesCtx:h,theme:e,classNames:l,props:m}),c({selector:r,stylesCtx:h,theme:e,classNames:b,props:m}),function({selector:e,stylesCtx:t,options:n,props:r,theme:o}){return(0,s.m)({theme:o,classNames:n?.classNames,props:n?.props||r,stylesCtx:t})[e]}({selector:r,stylesCtx:h,options:t,props:m,theme:e}),function({rootSelector:e,selector:t,className:n}){return e===t?n:void 0}({rootSelector:f,selector:r,className:p}),function({selector:e,classes:t,unstyled:n}){return n?void 0:t[e]}({selector:r,classes:u,unstyled:d||v}),g&&!v&&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:S,selector:e,classNamesPrefix:w,classNames:v,classes:t,unstyled:g,className:f,rootSelector:h,props:n,stylesCtx:p,withStaticClasses:j,headless:C,transformedStyles:M([r?.styles,b])}),style:function({theme:e,themeName:t,selector:n,options:r,props:o,stylesCtx:i,rootSelector:a,styles:s,style:c,vars:p,varsResolver:f,headless:m,withStylesTransform:h}){return{...!h&&function({theme:e,themeName:t,props:n,stylesCtx:r,selector:o}){return t.map(t=>(0,l.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}),...!h&&(0,l.i)({theme:e,styles:s,props:o,stylesCtx:i})[n],...!h&&(0,l.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,headless:s}){return[s?{}: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,d.L)(t[n])}}),e),{})?.[i]}({theme:e,props:o,stylesCtx:i,vars:p,varsResolver:f,selector:n,themeName:t,headless:m}),...a===n?u({style:c,theme:e}):null,...u({style:r?.style,theme:e})}}({theme:k,themeName:S,selector:e,options:r,props:n,stylesCtx:p,rootSelector:h,styles:b,style:m,vars:y,varsResolver:x,headless:C,withStylesTransform:I})})}},98498:function(e,t,n){"use strict";function r(e,t){return n=>{e?.(n),t?.(n)}}n.d(t,{x:function(){return r}})},75336:function(e,t,n){"use strict";n.d(t,{V:function(){return i}});var r=n(52322),o=n(2784);function i(e=null){let t=(0,o.createContext)(e);return[({children:e,value:n})=>(0,r.jsx)(t.Provider,{value:n,children:e}),()=>(0,o.useContext)(t)]}},89106:function(e,t,n){"use strict";n.d(t,{R:function(){return i}});var r=n(52322),o=n(2784);function i(e){let t=(0,o.createContext)(null);return[({children:e,value:n})=>(0,r.jsx)(t.Provider,{value:n,children:e}),()=>{let n=(0,o.useContext)(t);if(null===n)throw Error(e);return n}]}},38288:function(e,t,n){"use strict";n.d(t,{R:function(){return o}});var r=n(73491);function o({parentSelector:e,siblingSelector:t,onKeyDown:n,loop:o=!0,activateOnFocus:i=!1,dir:a="rtl",orientation:s}){return c=>{n?.(c);let l=Array.from(r.p(c.currentTarget,e)?.querySelectorAll(t)||[]).filter(t=>{var n;return n=c.currentTarget,(0,r.p)(n,e)===(0,r.p)(t,e)}),u=l.findIndex(e=>c.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),f="rtl"===a?p:d,m="rtl"===a?d:p;switch(c.key){case"ArrowRight":"horizontal"===s&&(c.stopPropagation(),c.preventDefault(),l[f].focus(),i&&l[f].click());break;case"ArrowLeft":"horizontal"===s&&(c.stopPropagation(),c.preventDefault(),l[m].focus(),i&&l[m].click());break;case"ArrowUp":"vertical"===s&&(c.stopPropagation(),c.preventDefault(),l[p].focus(),i&&l[p].click());break;case"ArrowDown":"vertical"===s&&(c.stopPropagation(),c.preventDefault(),l[d].focus(),i&&l[d].click());break;case"Home":c.stopPropagation(),c.preventDefault(),l[0].disabled||l[0].focus();break;case"End":{c.stopPropagation(),c.preventDefault();let e=l.length-1;l[e].disabled||l[e].focus()}}}}},51324: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}}})},40580: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}})},73491: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}})},97263: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]}},66596:function(e,t,n){"use strict";n.d(t,{d:function(){return o}});var r=n(34406);function o(){return void 0!==r&&r.env?"production":"development"}},91482:function(e,t,n){"use strict";n.d(t,{Dp:function(){return l},H5:function(){return s},Xj:function(){return u},ap:function(){return i},bG:function(){return a},yv:function(){return c}});var r=n(82087),o=n(58898);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 s(e){return void 0===e?"var(--mantine-radius-default)":i(e,"mantine-radius")}function c(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)}},98399:function(e,t,n){"use strict";n.d(t,{k:function(){return o}});var r=n(2784);function o(e){return!Array.isArray(e)&&null!==e&&"object"==typeof e&&e.type!==r.Fragment}},82087: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}})},98446:function(e,t,n){"use strict";function r(e){return Object.keys(e)}n.d(t,{X:function(){return r}})},65744: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}})},58898:function(e,t,n){"use strict";function r(e){return"0rem"===e?"0rem":`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||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(e=>n(e)).join(",");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")},29021:function(e,t,n){"use strict";n.d(t,{Nl:function(){return u},S2:function(){return l}});var r,o=n(52322),i=n(2784),a=n(2107);n(74251),n(82668);var s=i.createContext("undefined"!=typeof HTMLElement?(0,a.Z)({key:"css"}):null);s.Provider;let c=(0,i.createContext)(null);function l(){let e=(0,i.useContext)(c);if(null===e)throw Error("Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree");return e}let u=(r=({children:e,cache:t},n)=>(0,o.jsx)(c.Provider,{value:t||n,children:e}),(0,i.forwardRef)(function(e,t){return r(e,(0,i.useContext)(s),t)}))},7966:function(e,t,n){"use strict";n.d(t,{W:function(){return o}});var r=n(2784);function o(e){let t=(0,r.useRef)(e);return(0,r.useEffect)(()=>{t.current=e}),(0,r.useMemo)(()=>(...e)=>t.current?.(...e),[])}},33303:function(e,t,n){"use strict";n.d(t,{O:function(){return i}});var r=n(2784);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;n.every(e=>!!e&&!t.composedPath().includes(e))&&!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}},78574:function(e,t,n){"use strict";n.d(t,{V:function(){return o}});var r=n(2784);function o({timeout:e=2e3}={}){let[t,n]=(0,r.useState)(null),[o,i]=(0,r.useState)(!1),[a,s]=(0,r.useState)(null),c=t=>{window.clearTimeout(a),s(window.setTimeout(()=>i(!1),e)),i(t)};return{copy:e=>{"clipboard"in navigator?navigator.clipboard.writeText(e).then(()=>c(!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}}},67588:function(e,t,n){"use strict";n.d(t,{t:function(){return o}});var r=n(27780);function o(e,t){return(0,r.a)("(prefers-color-scheme: dark)","dark"===e,t)?"dark":"light"}},64006:function(e,t,n){"use strict";n.d(t,{y:function(){return i}});var r=n(2784),o=n(7966);function i(e,t){let n=(0,o.W)(e),i=(0,r.useRef)(0);return(0,r.useEffect)(()=>()=>window.clearTimeout(i.current),[]),(0,r.useCallback)((...e)=>{window.clearTimeout(i.current),i.current=window.setTimeout(()=>n(...e),t)},[n,t])}},71978:function(e,t,n){"use strict";n.d(t,{l:function(){return o}});var r=n(2784);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)}},26565:function(e,t,n){"use strict";n.d(t,{u:function(){return i}});var r=n(2784),o=n(71978);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}},59114:function(e,t,n){"use strict";n.d(t,{N:function(){return i}});var r=n(2784);let o=e=>(e+1)%1e6;function i(){let[,e]=(0,r.useReducer)(o,0);return e}},34192: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:s}=e,{altKey:c,ctrlKey:l,metaKey:u,shiftKey:d,key:p}=t;if(n!==c)return!1;if(i){if(!l&&!u)return!1}else if(r!==l||o!==u)return!1;return a===d&&!!s&&(p.toLowerCase()===s.toLowerCase()||t.code.replace("Key","").toLowerCase()===s.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}})},78297:function(e,t,n){"use strict";n.d(t,{A:function(){return i}});var r=n(2784),o=n(34192);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])}},66178:function(e,t,n){"use strict";n.d(t,{M:function(){return s}});var r=n(2784),o=n(64261),i=n(73533);let a=r["useId".toString()]||(()=>void 0);function s(e){let t=function(){let e=a();return e?`mantine-${e.replace(/:/g,"")}`:""}(),[n,s]=(0,r.useState)(t);return((0,o.Y)(()=>{s((0,i.k)())},[]),"string"==typeof e)?e:"undefined"==typeof window?t:n}},64261:function(e,t,n){"use strict";n.d(t,{Y:function(){return o}});var r=n(2784);let o="undefined"!=typeof document?r.useLayoutEffect:r.useEffect},97654:function(e,t,n){"use strict";n.d(t,{I:function(){return s}});var r=n(2784),o=n(65695);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 s(e){return(function(e,t){let n="localStorage"===e?"mantine-local-storage":"mantine-session-storage",{getItem:s,setItem:c,removeItem:l}=a(e);return function({key:a,defaultValue:u,getInitialValueInEffect:d=!0,deserialize:p=i,serialize:f=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 m=(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=s(a);return null!==r?p(r):u},[a,u]),[h,g]=(0,r.useState)(m(d)),v=(0,r.useCallback)(e=>{e instanceof Function?g(t=>{let r=e(t);return c(a,f(r)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e(t)}})),r}):(c(a,f(e)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e}})),g(e))},[a]),b=(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&&g(p(t.newValue??void 0))}),(0,o.s)(n,e=>{e.detail.key===a&&g(e.detail.value)}),(0,r.useEffect)(()=>{void 0!==u&&void 0===h&&v(u)},[u,h,v]),(0,r.useEffect)(()=>{let e=m();void 0!==e&&v(e)},[]),[void 0===h?u:h,v,b]}})("localStorage","use-local-storage")(e)}!function(e){let{getItem:t}=a(e)}("localStorage")},27780:function(e,t,n){"use strict";n.d(t,{a:function(){return o}});var r=n(2784);function o(e,t,{getInitialValueInEffect:n}={getInitialValueInEffect:!0}){let[o,i]=(0,r.useState)(n?t:!!("undefined"!=typeof window&&"matchMedia"in window)&&window.matchMedia(e).matches),a=(0,r.useRef)();return(0,r.useEffect)(()=>{if("matchMedia"in window)return a.current=window.matchMedia(e),i(a.current.matches),function(e,t){try{return e.addEventListener("change",t),()=>e.removeEventListener("change",t)}catch(n){return e.addListener(t),()=>e.removeListener(t)}}(a.current,e=>i(e.matches))},[e]),o}},70837:function(e,t,n){"use strict";n.d(t,{Yx:function(){return a},kR:function(){return o},lq:function(){return i}});var r=n(2784);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)}},51438:function(e,t,n){"use strict";n.d(t,{E:function(){return i},r:function(){return a}});var r=n(2784),o=n(82692);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),s=(0,r.useRef)(!1),c=(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(c.current),c.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",h),document.addEventListener("mouseup",f),document.addEventListener("touchmove",v),document.addEventListener("touchend",f)},d=()=>{document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",f),document.removeEventListener("touchmove",v),document.removeEventListener("touchend",f)},p=()=>{!s.current&&a.current&&(s.current=!0,"function"==typeof t?.onScrubStart&&t.onScrubStart(),u(!0),l())},f=()=>{s.current&&a.current&&(s.current=!1,u(!1),d(),setTimeout(()=>{"function"==typeof t?.onScrubEnd&&t.onScrubEnd()},0))},m=e=>{p(),e.preventDefault(),h(e)},h=e=>r({x:e.clientX,y:e.clientY}),g=e=>{e.cancelable&&e.preventDefault(),p(),v(e)},v=e=>{e.cancelable&&e.preventDefault(),r({x:e.changedTouches[0].clientX,y:e.changedTouches[0].clientY})};return i.current?.addEventListener("mousedown",m),i.current?.addEventListener("touchstart",g,{passive:!1}),()=>{i.current&&(i.current.removeEventListener("mousedown",m),i.current.removeEventListener("touchstart",g))}},[n,e]),{ref:i,active:l}}},96339:function(e,t,n){"use strict";n.d(t,{I:function(){return o}});var r=n(2784);function o(e,t,n){let o=(0,r.useRef)(),i=(0,r.useRef)(null);return(0,r.useEffect)(()=>{let r="function"==typeof n?n():n;return(r||i.current)&&(o.current=new MutationObserver(e),o.current.observe(r||i.current,t)),()=>{o.current?.disconnect()}},[e,t]),i}},98045:function(e,t,n){"use strict";n.d(t,{J:function(){return o}});var r=n(27780);function o(e,t){return(0,r.a)("(prefers-reduced-motion: reduce)",e,t)}},8246:function(e,t,n){"use strict";n.d(t,{K:function(){return o}});var r=n(2784);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}}},9341:function(e,t,n){"use strict";n.d(t,{C:function(){return o}});var r=n(2784);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]}},65695:function(e,t,n){"use strict";n.d(t,{s:function(){return o}});var r=n(2784);function o(e,t,n){(0,r.useEffect)(()=>(window.addEventListener(e,t,n),()=>window.removeEventListener(e,t,n)),[e,t])}},82692: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}})},73533:function(e,t,n){"use strict";function r(){return`mantine-${Math.random().toString(36).slice(2,11)}`}n.d(t,{k:function(){return r}})},75751: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}})},2807:function(e,t,n){"use strict";n.d(t,{qk:function(){return l},Ro:function(){return i}});var r,o=n(64261);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}))}}]),s=a("openModal"),c=a("closeModal"),l={open:s,close:c,closeAll:a("closeAllModals"),openConfirmModal:a("openConfirmModal"),openContextModal:e=>a("openContextModal")(e)}},60048:function(e,t,n){"use strict";n.d(t,{N9:function(){return l},Ps:function(){return i},yK:function(){return c},zn:function(){return a}});var r=n(73533),o=n(86769);let i=(0,o.M)({notifications:[],queue:[],limit:5}),a=(e=i)=>(0,o.o)(e);function s(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 c(e,t=i){return s(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 s(t,t=>e.id&&t.some(t=>t.id===e.id)?t:[...t,{...e,id:n}]),n},hide:c,update:function(e,t=i){return s(t,t=>t.map(t=>t.id===e.id?{...t,...e}:t)),e.id},clean:function(e=i){s(e,()=>[])},cleanQueue:function(e=i){s(e,t=>t.slice(0,e.getState().limit))},updateState:s}},72278:function(e,t,n){"use strict";n.d(t,{$:function(){return O}});var r=n(52322),o=n(97263),i=n(82027),a=n(38483),s=n(9341);function c(e){return void 0!==e.group&&Array.isArray(e.actions)}var l=n(91349),u=n(52286),d=n(63409),p=n(28559);let[f,m]=(0,n(89106).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 g={dimmedSections:!0,highlightQuery:!1},v=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,id:c,description:f,label:h,leftSection:v,rightSection:b,children:y,dimmedSections:x,highlightQuery:k,highlightColor:w,closeSpotlightOnTrigger:j,onClick:C,onMouseDown:S,keywords:I,vars:M,...T}=(0,a.w)("SpotlightAction",g,e),E=m(),P={classNames:i,styles:s},R=k&&"string"==typeof h?(0,r.jsx)(u.y,{component:"span",highlight:E.query,color:w,...E.getStyles("actionLabel",P),children:h}):(0,r.jsx)("span",{...E.getStyles("actionLabel",P),children:h});return(0,r.jsx)(d.k,{ref:t,"data-action":!0,...E.getStyles("action",{className:n,style:o,...P}),...T,onMouseDown:e=>{e.preventDefault(),S?.(e)},onClick:e=>{C?.(e),(j??E.closeOnActionTrigger)&&l.j5.close(E.store)},tabIndex:-1,children:y||(0,r.jsxs)(r.Fragment,{children:[v&&(0,r.jsx)(p.x,{component:"span",mod:{position:"left",dimmed:x},...E.getStyles("actionSection",P),children:v}),(0,r.jsxs)("span",{...E.getStyles("actionBody",P),children:[R,(0,r.jsx)("span",{...E.getStyles("actionDescription",P),children:f})]}),b&&(0,r.jsx)(p.x,{component:"span",mod:{position:"right",dimmed:x},...E.getStyles("actionSection",P),children:b})]})})});v.classes=h,v.displayName="@mantine/spotlight/SpotlightAction";let b={},y=(0,i.d)((e,t)=>{let{className:n,style:o,styles:i,classNames:s,label:c,children:l,...u}=(0,a.w)("SpotlightActionsGroup",b,e),d=m();return(0,r.jsx)(p.x,{...d.getStyles("actionsGroup",{className:n,style:o,classNames:s,styles:i}),ref:t,...u,__vars:{"--spotlight-label":`'${c}'`},children:l})});y.classes=h,y.displayName="@mantine/core/SpotlightActionsGroup";var x=n(2784),k=n(38405);let w={},j=(0,i.d)((e,t)=>{let{className:n,style:o,id:i,children:s,vars:c,classNames:u,styles:d,...p}=(0,a.w)("SpotlightActionsList",w,e),f=m(),h=`mantine-${(0,x.useId)().replace(/:/g,"")}`,g=i||h;return(0,x.useEffect)(()=>(l.j5.setListId(g,f.store),()=>l.j5.setListId("",f.store)),[]),(0,r.jsx)(k.x.Autosize,{...f.getStyles("actionsList",{className:n,style:o,classNames:u,styles:d}),ref:t,type:"scroll",scrollbarSize:"var(--spotlight-actions-list-padding)",offsetScrollbars:"y",id:g,...p,children:s})});j.classes=h,j.displayName="@mantine/spotlight/SpotlightActionsList";let C={},S=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,...c}=(0,a.w)("SpotlightEmpty",C,e),l=m();return(0,r.jsx)(p.x,{ref:t,...l.getStyles("empty",{classNames:i,styles:s,className:n,style:o}),...c})});S.classes=h,S.displayName="@mantine/spotlight/SpotlightEmpty";let I={},M=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,...c}=(0,a.w)("SpotlightFooter",I,e),l=m();return(0,r.jsx)(p.x,{ref:t,...l.getStyles("footer",{className:n,classNames:i,style:o,styles:s}),...c})});M.classes=h,M.displayName="@mantine/spotlight/SpotlightFooter";var T=n(68755),E=n(46690),P=n(78222),R=n(54834),N=n(80495),_=n(58898),F=n(78297),B=n(71978);let A={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",A,e),{classNames:o,className:i,style:s,styles:c,unstyled:u,vars:d,store:p,children:m,query:g,onQueryChange:v,transitionProps:b,clearQueryOnClose:y,shortcut:x,tagsToIgnore:k,triggerOnContentEditable:w,disabled:j,onSpotlightOpen:C,onSpotlightClose:S,forceOpened:I,closeOnActionTrigger:M,maxHeight:L,scrollable:D,...$}=n,z=(0,T.rZ)(),{opened:H,query:O}=(0,l.QP)(p),Z=e=>{v?.(e),l.j5.setQuery(e,p)},V=(0,E.y)({name:"Spotlight",classes:h,props:n,className:i,style:s,classNames:o,styles:c,unstyled:u});return((0,F.A)(function(e,t){if(!e)return[];let n=()=>l.j5.open(t);return Array.isArray(e)?e.map(e=>[e,n]):[[e,n]]}(x,p),k,w),(0,B.l)(()=>{H?C?.():S?.()},[H]),j)?null:(0,r.jsx)(f,{value:{getStyles:V,query:g||O,setQuery:Z,store:p,closeOnActionTrigger:M},children:(0,r.jsx)(P.u,{ref:t,...$,withCloseButton:!1,opened:H||!!I,padding:0,onClose:()=>l.j5.close(p),className:i,style:s,classNames:(0,R.m)({theme:z,classNames:[h,o],props:n,stylesCtx:void 0}),styles:(0,N.i)({theme:z,styles:c,props:n,stylesCtx:void 0}),transitionProps:{...b,onExited:()=>{y&&Z(""),l.j5.clearSpotlightState({clearQuery:y},p),b?.onExited?.()}},__vars:{"--spotlight-max-height":D?(0,_.h)(L):void 0},__staticSelector:"Spotlight","data-scrollable":D||void 0,children:m})})});L.classes=h,L.displayName="@mantine/spotlight/SpotlightRoot";var D=n(6941);let $={size:"lg"},z=(0,i.d)((e,t)=>{let{classNames:n,styles:o,onKeyDown:i,onChange:s,vars:c,value:u,...d}=(0,a.w)("SpotlightSearch",$,e),p=m(),f=p.getStyles("search"),[h,g]=(0,x.useState)(!1);return(0,r.jsx)(D.I,{ref:t,classNames:[{input:f.className},n],styles:[{input:f.style},o],...d,value:u??p.query,onChange:e=>{p.setQuery(e.currentTarget.value),s?.(e)},onKeyDown:e=>{i?.(e),h||("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:()=>g(!0),onCompositionEnd:()=>g(!1)})});z.classes=h,z.displayName="@mantine/spotlight/SpotlightSearch";let H={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=[[],[]];return t.reduce((e,t)=>"actions"in t?[...e,...t.actions.map(e=>({...e,group:t.group}))]:[...e,t],[]).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},O=(0,i.d)((e,t)=>{let{searchProps:n,filter:o,query:i,onQueryChange:l,actions:u,nothingFound:d,highlightQuery:p,limit:f,...m}=(0,a.w)("Spotlight",H,e),[h,g]=(0,s.C)({value:i,defaultValue:"",finalValue:"",onChange:l}),b=(function e(t,n){let r=[];if(!Array.isArray(t))return[];for(let o=0;o=n)break;c(i)&&r.push({group:i.group,actions:e(i.actions,n-r.length)}),c(i)||r.push(i)}return r})(o(h,u),f).map(e=>{if(c(e)){let t=e.actions.map(({id:e,...t})=>(0,r.jsx)(v,{highlightQuery:p,...t},e));return(0,r.jsx)(y,{label:e.group,children:t},e.group)}return(0,r.jsx)(v,{highlightQuery:p,...e},e.id)});return(0,r.jsxs)(L,{...m,query:h,onQueryChange:g,ref:t,children:[(0,r.jsx)(z,{...n}),(0,r.jsxs)(j,{children:[b,0===b.length&&d&&(0,r.jsx)(S,{children:d})]})]})});O.classes=h,O.displayName="@mantine/spotlight/Spotlight",O.Search=z,O.ActionsList=j,O.Action=v,O.Empty=S,O.ActionsGroup=y,O.Footer=M,O.Root=L,O.open=l.US.open,O.close=l.US.close,O.toggle=l.US.toggle},91349:function(e,t,n){"use strict";n.d(t,{Gv:function(){return m},QP:function(){return a},US:function(){return g},j5:function(){return f},x9:function(){return h}});var r=n(82692),o=n(86769);let i=()=>(0,o.M)({opened:!1,empty:!1,selected:-1,listId:"",query:"",registeredActions:new Set}),a=e=>(0,o.o)(e);function s(e,t){let n=t.getState();t.setState({...n,...e(t.getState())})}function c(e){s(()=>({opened:!0,selected:-1}),e)}function l(e){s(()=>({opened:!1}),e)}function u(e){s(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]")??[],s=-1===e?a.length-1:e===a.length?0:e,c=(0,r.u)(s,0,a.length-1);return i?.removeAttribute("data-selected"),a[c]?.scrollIntoView({block:"nearest"}),a[c]?.setAttribute("data-selected","true"),d(c,t),c}let f={open:c,close:l,toggle:u,updateState:s,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){s(()=>({query:e}),t),Promise.resolve().then(()=>{p(0,t),s(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 m(){let e=i();return[e,{open:()=>c(e),close:()=>l(e),toggle:()=>u(e)}]}let[h,g]=m(),{open:v,close:b,toggle:y}=g},86769:function(e,t,n){"use strict";n.d(t,{M:function(){return o},o:function(){return i}});var r=n(2784);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())}},25777:function(e,t,n){"use strict";n.d(t,{B:function(){return V}});var r=n(52322),o=n(28559),i=n(58898);function a({withPadding:e=!0,centered:t,maxWidth:n,minHeight:a,children:s,dimmed:c,striped:l}){return(0,r.jsx)(o.x,{className:"m_a3c6e060",mod:{"with-padding":e,centered:t,dimmed:c,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},children:(0,r.jsx)("div",{className:"m_ad8eb9d6",children:s})})}var s=n(22651),c=n(44964),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(0,r.jsx)(r.Fragment,{children:n&&(0,r.jsx)(c.Q,{code:n,className:l.code,getFileIcon:s.g,withExpandButton:!0,defaultExpanded:t})})}var d=n(40489);function p({className:e,...t}){return(0,r.jsx)("div",{className:(0,d.Z)("m_761fa02a",e),...t})}function f({code:e,children:t,withPadding:n,centered:o,defaultExpanded:i=!0,maxWidth:s,minHeight:c,dimmed:l,striped:d}){return(0,r.jsxs)(p,{children:[(0,r.jsx)(a,{withPadding:n,centered:o,maxWidth:s,minHeight:c,dimmed:l,striped:d,children:t}),(0,r.jsx)(u,{code:e,defaultExpanded:i})]})}var m=n(2784),h=n(65438),g=n(8582),v={columns:"m_df4e856a",controls:"m_de00ac9",header:"m_c4d78f60"};function b({children:e,withPadding:t,centered:n,maxWidth:o,minHeight:i,title:s,description:c,controls:l,dimmed:u,striped:d}){return(0,r.jsxs)("div",{className:v.columns,children:[(0,r.jsx)(a,{withPadding:t,maxWidth:o,minHeight:i,centered:n,dimmed:u,striped:d,children:e}),(0,r.jsxs)("div",{className:v.controls,children:[s&&(0,r.jsxs)("div",{className:v.header,children:[(0,r.jsx)(g.x,{fw:500,fz:"sm",mb:5,children:s}),c&&(0,r.jsx)(g.x,{c:"dimmed",fz:11,lh:1.45,children:c})]}),l]})]})}var y=n(950),x=n(75751);function k(e){return(0,x.j)(e.replace(/([a-z])([A-Z])/g,"$1 $2").toLowerCase())}var w=n(6941),j=n(84385);function C(e){return e.map(e=>"string"==typeof e?{label:(0,x.j)(e),value:e}:{value:e.value,label:(0,x.j)(e.label)})}var S=n(87744),I=n(27009),M=n(40284),T=n(93010),E=n(50205),P=n(63409),R=n(37574),N=n(74770);function _(){return(0,r.jsxs)("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)},children:[(0,r.jsx)("path",{fill:"#FF5178",d:"M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"}),(0,r.jsx)("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"}),(0,r.jsx)("path",{fill:"#FFD23B",d:"M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"}),(0,r.jsx)("path",{fill:"#89C247",d:"M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"}),(0,r.jsx)("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"}),(0,r.jsx)("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"}),(0,r.jsx)("path",{fill:"#3EC3FF",d:"M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"}),(0,r.jsx)("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"}),(0,r.jsx)("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"}),(0,r.jsx)("path",{fill:"#622876",d:"M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"}),(0,r.jsx)("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"}),(0,r.jsx)("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 F={swatch:"m_5e1a038c",check:"m_f9decbb8",colorControl:"m_2f5f7bca"},B=n(12189),A=n(73822);let L=[{value:0,label:"xs"},{value:25,label:"sm"},{value:50,label:"md"},{value:75,label:"lg"},{value:100,label:"xl"}];function D(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 $({code:e,controls:t,state:n}){return"function"==typeof e?e(D(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}}","")}return 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}`}).trim().replace("\n\n","\n")}(D(t,n),e)}let z={boolean:function({value:e,onChange:t,prop:n,...o}){return(0,r.jsx)(y.r,{checked:e,onChange:e=>t(e.currentTarget.checked),label:k(n),...o})},segmented:function({data:e,value:t,onChange:n,prop:o,transformLabel:i=!0,...a}){return(0,r.jsx)(w.I.Wrapper,{labelElement:"div",label:k(o),...a,children:(0,r.jsx)(j.s,{data:i?C(e):e,value:t,onChange:n,fullWidth:!0,transitionDuration:150})})},color:function({value:e,onChange:t,prop:n,...o}){let[i,a]=(0,m.useState)("#fff"),s=e=>{a(e),t(e)},c=Object.keys(S.t.colors).filter(e=>"dark"!==e).map(n=>(0,r.jsx)(I.b,{color:`var(--mantine-color-${n}-filled)`,component:"button",onClick:()=>t(n),radius:"sm",className:F.swatch,"aria-label":n,children:e===n&&(0,r.jsx)(M.n,{className:F.check})},n));return(0,r.jsx)(w.I.Wrapper,{labelElement:"div",label:k(n),...o,children:(0,r.jsxs)(T.Z,{gap:2,mt:2,wrap:"wrap",children:[c,(0,r.jsxs)(E.J,{radius:"md",position:"bottom-end",shadow:"md",children:[(0,r.jsx)(E.J.Target,{children:(0,r.jsx)(P.k,{className:F.colorControl,"aria-label":"Pick color",children:(0,r.jsx)(_,{})})}),(0,r.jsxs)(E.J.Dropdown,{p:8,children:[(0,r.jsx)(R.z,{value:i,onChange:s,format:"rgba"}),(0,r.jsx)(N.o,{value:i,onChange:e=>s(e.currentTarget.value),placeholder:"Enter color",radius:"md",size:"xs",mt:"xs"})]})]})]})})},string:function({value:e,onChange:t,prop:n,...o}){return(0,r.jsx)(N.o,{value:e,onChange:e=>t(e.currentTarget.value),label:k(n),placeholder:"Enter prop value",...o})},select:function({value:e,onChange:t,prop:n,data:o,...i}){return(0,r.jsx)(B.p,{value:e,onChange:e=>t(e.currentTarget.value),label:k(n),data:C(o),...i})},size:function({value:e,onChange:t,prop:n,...o}){let i=L.find(t=>t.label===e).value;return(0,r.jsx)(w.I.Wrapper,{labelElement:"div",label:k(n),...o,children:(0,r.jsx)(A.i,{value:i,onChange:e=>t(L.find(t=>t.value===e).label),label:e=>L.find(t=>t.value===e).label,step:25,marks:L,styles:{markLabel:{display:"none"}},thumbLabel:"Size"})})},number:function({value:e,onChange:t,prop:n,step:o,min:i,max:a,...s}){return(0,r.jsx)(w.I.Wrapper,{labelElement:"div",label:k(n),...s,children:(0,r.jsx)(A.i,{value:e,onChange:t,step:o,min:i,max:a,thumbLabel:"Size"})})}};function H({code:e,controls:t,children:n,centered:o,maxWidth:i,minHeight:a,withPadding:s,dimmed:c,striped:l}){let d=t.reduce((e,t)=>(e[t.prop]=t.initialValue,e),{}),[f,g]=(0,m.useState)(d),v=(e,t)=>g(n=>({...n,[e]:t})),y=t.map(e=>{let t=z[e.type],{initialValue:n,libraryValue:o,...i}=e;return(0,r.jsx)(t,{value:f[e.prop],onChange:t=>v(e.prop,t),...i},e.prop)});return(0,r.jsxs)(p,{children:[(0,r.jsx)(b,{controls:(0,r.jsx)(h.K,{className:"m_b14e0e0b",gap:"sm",children:y}),centered:o,withPadding:s,maxWidth:i,minHeight:a,dimmed:c,striped:l,children:(0,m.cloneElement)(n,f)}),(0,r.jsx)(u,{code:function({code:e,controls:t,state:n}){if("string"==typeof e||"function"==typeof e)return[{fileName:"Demo.tsx",language:"tsx",code:$({code:e,controls:t,state:n})}];if(Array.isArray(e))return e.map(e=>({fileName:e.fileName||"Demo.tsx",language:e.language||"tsx",code:$({code:e.code,controls:t,state:n})}));throw Error("Unexpected code format in configurator")}({code:e,controls:t,state:f})})]})}function O(e){return e?`.${e} { + outline: 2px solid #fe0d45; + outline-offset: -2px; +} +`:"/*\n * Hover over selectors to apply outline styles\n *\n */"}function Z({data:e,code:t,withPadding:n,maxWidth:o,centered:i,children:a,dimmed:s,striped:c}){let[l,d]=(0,m.useState)(null),f=Object.keys(e.selectors),h=f.map(t=>(0,r.jsxs)(P.k,{className:"m_22105db1",onMouseEnter:()=>d(t),onMouseLeave:()=>d(null),children:[(0,r.jsx)(g.x,{mb:2,children:t}),(0,r.jsx)(g.x,{fz:11,c:"dimmed",children:e.selectors[t]})]},t)),v=l?` classNames={{ ${l}: classes.${l} }}`:"";return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:O(l)}}),(0,r.jsxs)(p,{children:[(0,r.jsx)(b,{withPadding:n,maxWidth:o,centered:i,controls:h,dimmed:s,striped:c,title:"Component Styles API",description:"Hover over selectors to highlight corresponding elements",children:(0,m.cloneElement)(a,{classNames:f.reduce((e,t)=>(e[t]=t,e),{})})}),(0,r.jsx)(u,{code:[{fileName:"Demo.module.css",language:"scss",code:O(l)},{fileName:"Demo.tsx",language:"tsx",code:t.replace("{{props}}",v)}]})]})]})}function V({data:e}){let{component:t}=e;switch(e.type){case"code":return(0,r.jsx)(f,{...e,children:(0,r.jsx)(t,{})});case"configurator":return(0,r.jsx)(H,{...e,children:(0,r.jsx)(t,{})});case"styles-api":return(0,r.jsx)(Z,{...e,children:(0,r.jsx)(t,{})});default:return null}}},60934:function(e,t,n){"use strict";n.d(t,{L:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsxs)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 48 48",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],...n,children:[(0,r.jsx)("path",{fill:"#0277BD",d:"M41 5H7l3 34 14 4 14-4 3-34z"}),(0,r.jsx)("path",{fill:"#039BE5",d:"M24 8v31.9l11.2-3.2L37.7 8z"}),(0,r.jsx)("path",{fill:"#FFF",d:"M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"}),(0,r.jsx)("path",{fill:"#EEE",d:"M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"})]})}},51878:function(e,t,n){"use strict";n.d(t,{D:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsx)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 256 199",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],...n,children:(0,r.jsx)("path",{fill:"currentColor",d:"M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"})})}},13444:function(e,t,n){"use strict";n.d(t,{E:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsx)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],fill:"currentColor",...n,children:(0,r.jsx)("path",{fillRule:"evenodd",d:"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"})})}},82106:function(e,t,n){"use strict";n.d(t,{_:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsxs)(o.x,{component:"svg",...n,preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",xmlns:"http://www.w3.org/2000/svg",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],children:[(0,r.jsx)("path",{d:"M0 256V0h256v256z",fill:"#C12127"}),(0,r.jsx)("path",{d:"M48 48h160v160h-32V80h-48v128H48z",fill:"#FFF"})]})}},55709:function(e,t,n){"use strict";n.d(t,{s:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsxs)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",preserveAspectRatio:"xMidYMid",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],...n,children:[(0,r.jsx)("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"}),(0,r.jsx)("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"})]})}},60142:function(e,t,n){"use strict";n.d(t,{K:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsxs)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 48 48",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],...n,children:[(0,r.jsx)("path",{fill:"#1976d2",d:"M6 6h36v36H6z"}),(0,r.jsx)("path",{fill:"#fff",d:"M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"})]})}},22651:function(e,t,n){"use strict";n.d(t,{g:function(){return a}});var r=n(52322),o=n(60934),i=n(60142);function a(e){return e.endsWith(".ts")||e.endsWith(".tsx")?(0,r.jsx)(i.K,{size:18}):e.endsWith(".css")||e.endsWith(".scss")?(0,r.jsx)(o.L,{size:18}):null}},48158:function(e,t,n){"use strict";n.d(t,{D:function(){return d}});var r=n(52322),o=n(58898),i=n(68755),a=n(46403);function s({color:e,inverted:t}){let n=(0,i.rZ)(),r=(0,a.E)({color:e||"blue",theme:n}),o=r.isThemeColor?n.colors[r.color][5]:e;return{background:t?n.white:o,color:t?o:n.white}}function c({size:e,color:t,variant:n,inverted:i,style:a,...c}){let l=s({color:t,inverted:i});return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 163 163",style:{width:(0,o.h)(e),height:(0,o.h)(e),...a},...c,children:[(0,r.jsx)("path",{fill:l.background,d:"M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"}),(0,r.jsx)("path",{fill:l.color,d:"M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.145 6.145 0 00-1.616 1.786 6.21 6.21 0 00-.694 4.693 6.21 6.21 0 001.028 2.186 6.151 6.151 0 006.457 2.319 6.154 6.154 0 002.177-1.035 50.083 50.083 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.165 49.165 0 004.071-19.69 49.167 49.167 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.112 50.112 0 00-7.952-7.397 6.15 6.15 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"}),(0,r.jsx)("path",{fill:l.color,fillRule:"evenodd",d:"M56.236 79.391a9.342 9.342 0 01.632-3.608 9.262 9.262 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.145 9.145 0 012.995 2.063 9.262 9.262 0 011.967 3.077 9.339 9.339 0 01-2.125 10.003 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.3 9.3 0 01-2.755-6.395z",clipRule:"evenodd"})]})}var l=n(40489);function u({size:e,color:t,variant:n,inverted:i,style:a,className:c,...u}){let d=s({color:t,inverted:i});return(0,r.jsx)("svg",{...u,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 623 163",style:{height:(0,o.h)(e),...a},className:(0,l.Z)("m_2075ec07",{m_36ceca49:"ui.mantine.dev"===n},c),children:(0,r.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,r.jsx)("path",{style:{fill:"ui.mantine.dev"===n?"var(--mantine-logo-fill)":void 0},fill:d.background,fillRule:"nonzero",d:"M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"}),(0,r.jsxs)("g",{fill:d.color,style:{fill:"ui.mantine.dev"===n?"var(--mantine-logo-color)":void 0},children:[(0,r.jsx)("path",{fillRule:"nonzero",d:"M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"}),(0,r.jsx)("path",{d:"M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"})]}),(0,r.jsx)("path",{fill:"currentColor",fillRule:"nonzero",d:"M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"})]})})}function d({type:e,...t}){return"mark"===e?(0,r.jsx)(c,{...t}):(0,r.jsx)(u,{...t})}},10962:function(e,t,n){"use strict";n.d(t,{$:function(){return r}});let r={docsLink:"https://mantine.dev",uiLink:"https://ui.mantine.dev/",discordLink:"https://discord.gg/wbH82zuWMN",twitterLink:"https://twitter.com/mantinedev",npmLink:"https://www.npmjs.com/org/mantine",discordColor:"#5865f2",twitterColor:"#1C8CD8",gitHubLinks:{mantine:"https://github.com/mantinedev/mantine",mantineUi:"https://github.com/mantinedev/ui.mantine.dev",discussions:"https://github.com/mantinedev/mantine/discussions",organization:"https://github.com/mantinedev",releases:"https://github.com/mantinedev/mantine/releases"}}},80508:function(e,t,n){"use strict";n.d(t,{P:function(){return g}});var r=n(52322),o=n(82027),i=n(38483),a=n(46690),s=n(28559),c=n(87385),l=n(893),u=n(54813),d=n(38405),p=n(90336),f=n(70980),m=n(98483);let h={copyLabel:"Copy code",copiedLabel:"Copied",language:"tsx",withCopyButton:!0},g=(0,o.d)((e,t)=>{let n=(0,i.w)("CodeHighlight",h,e),{classNames:o,className:g,style:v,styles:b,unstyled:y,vars:x,children:k,code:w,copiedLabel:j,copyLabel:C,language:S,withCopyButton:I,highlightOnClient:M,...T}=n,E=(0,a.y)({name:"CodeHighlight",props:n,classes:m.Z,className:g,style:v,classNames:o,styles:b,unstyled:y}),P=(0,f.Y)()(w.trim(),S||"tsx");return(0,r.jsxs)(s.x,{...E("root"),ref:t,...T,dir:"ltr",children:[I&&(0,r.jsx)(c.q,{value:w.trim(),children:({copied:e,copy:t})=>(0,r.jsx)(l.u,{label:e?j:C,fz:"sm",position:"left",children:(0,r.jsx)(u.A,{onClick:t,variant:"none",...E("copy"),children:(0,r.jsx)(p.T,{copied:e})})})}),(0,r.jsx)(d.x,{type:"hover",dir:"ltr",offsetScrollbars:!1,children:P.highlighted?(0,r.jsx)("div",{"data-mantine-code":S||"tsx",dangerouslySetInnerHTML:{__html:P.code}}):(0,r.jsx)("pre",{...E("pre"),children:(0,r.jsx)("code",{"data-mantine-code":S||"tsx",...E("code"),children:w.trim()})})})]})});g.displayName="@mantine/core/CodeHighlight",g.classes=m.Z},44964:function(e,t,n){"use strict";n.d(t,{Q:function(){return C}});var r=n(52322),o=n(2784),i=n(58898),a=n(11200),s=n(82027),c=n(38483),l=n(46690),u=n(63409),d=n(28559),p=n(38405),f=n(893),m=n(54813),h=n(87385),g=n(9341),v=n(90336);function b({expanded:e,style:t,...n}){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,i.h)(18),height:(0,i.h)(18),...t},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...n,children:e?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("path",{d:"M12 13v-8l-3 3m6 0l-3 -3"}),(0,r.jsx)("path",{d:"M9 17l1 0"}),(0,r.jsx)("path",{d:"M14 17l1 0"}),(0,r.jsx)("path",{d:"M19 17l1 0"}),(0,r.jsx)("path",{d:"M4 17l1 0"})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("path",{d:"M12 11v8l3 -3m-6 0l3 3"}),(0,r.jsx)("path",{d:"M9 7l1 0"}),(0,r.jsx)("path",{d:"M14 7l1 0"}),(0,r.jsx)("path",{d:"M19 7l1 0"}),(0,r.jsx)("path",{d:"M4 7l1 0"})]})})}function y({fileIcon:e,fileName:t,getFileIcon:n,className:o,style:i}){return e?(0,r.jsx)("span",{className:o,style:i,children:e}):n&&t?(0,r.jsx)("span",{className:o,style:i,children:n(t)}):null}var x=n(70980),k=n(98483);let w={withHeader:!0,copyLabel:"Copy code",copiedLabel:"Copied",maxCollapsedHeight:(0,i.h)("8rem"),expandCodeLabel:"Expand code",collapseCodeLabel:"Collapse code"},j=(0,a.Z)((e,{maxCollapsedHeight:t})=>({root:{"--ch-max-collapsed-height":(0,i.h)(t)}})),C=(0,s.d)((e,t)=>{let n=(0,c.w)("CodeHighlightTabs",w,e),{classNames:i,className:a,style:s,styles:C,unstyled:S,vars:I,children:M,code:T,defaultActiveTab:E,activeTab:P,onTabChange:R,withHeader:N,copiedLabel:_,copyLabel:F,getFileIcon:B,maxCollapsedHeight:A,expanded:L,defaultExpanded:D,onExpandedChange:$,expandCodeLabel:z,collapseCodeLabel:H,withExpandButton:O,mod:Z,...V}=n,G=(0,l.y)({name:"CodeHighlightTabs",props:n,classes:k.Z,className:a,style:s,classNames:i,styles:C,unstyled:S,vars:I,varsResolver:j}),[W,Y]=(0,g.C)({defaultValue:E,value:P,finalValue:0,onChange:R}),[q,K]=(0,g.C)({defaultValue:D,value:L,finalValue:!0,onChange:$}),U=Array.isArray(T)?T:[T],X=U[W],J=(0,x.Y)()(X.code.trim(),X.language||"tsx"),Q=U.map((e,t)=>(0,o.createElement)(u.k,{...G("file"),key:e.fileName,mod:{active:t===W},onClick:()=>Y(t)},(0,r.jsx)(y,{fileIcon:e.icon,getFileIcon:B,fileName:e.fileName,...G("fileIcon")},"file-icon"),(0,r.jsx)("span",{children:e.fileName},"file-name")));return(0,r.jsxs)(d.x,{...G("root"),mod:[{collapsed:!q},Z],ref:t,...V,dir:"ltr",children:[N&&(0,r.jsxs)("div",{...G("header"),children:[(0,r.jsx)(p.x,{type:"never",dir:"ltr",offsetScrollbars:!1,children:(0,r.jsx)("div",{...G("files"),children:Q})}),(0,r.jsxs)("div",{...G("controls"),children:[O&&(0,r.jsx)(f.u,{label:q?H:z,fz:"sm",position:"left",children:(0,r.jsx)(m.A,{onClick:()=>K(!q),variant:"none","aria-label":q?H:z,...G("control"),children:(0,r.jsx)(b,{expanded:q})})}),(0,r.jsx)(h.q,{value:X.code.trim(),children:({copied:e,copy:t})=>(0,r.jsx)(f.u,{label:e?_:F,fz:"sm",position:"left",children:(0,r.jsx)(m.A,{onClick:t,variant:"none",...G("control"),"aria-label":e?_:F,children:(0,r.jsx)(v.T,{copied:e})})})})]})]}),(0,r.jsx)(p.x,{type:"auto",dir:"ltr",offsetScrollbars:!1,children:(0,r.jsx)(d.x,{...G("codeWrapper"),mod:{expanded:q},children:J.highlighted?(0,r.jsx)("div",{"data-mantine-code":X.language||"tsx",dangerouslySetInnerHTML:{__html:J.code}}):(0,r.jsx)("pre",{...G("pre"),children:(0,r.jsx)("code",{"data-mantine-code":X.language||"tsx",...G("code"),children:J.code})})})}),(0,r.jsx)(u.k,{...G("showCodeButton"),mod:{hidden:q},onClick:()=>K(!0),children:z})]})});C.displayName="@mantine/core/CodeHighlightTabs",C.classes=k.Z},90336:function(e,t,n){"use strict";n.d(t,{T:function(){return i}});var r=n(52322),o=n(58898);function i({copied:e,style:t,...n}){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,o.h)(18),height:(0,o.h)(18),...t},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...n,children:e?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("path",{d:"M5 12l5 5l10 -10"})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("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"}),(0,r.jsx)("path",{d:"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"})]})})}i.displayName="@mantine/code-highlight/CopyIcon"},98483:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={code:"m_5d0899e8",pre:"m_348cdb48",header:"m_4543bbc8",controls:"m_23f2bd31",copy:"m_5d089b70",control:"m_6c83b382",file:"m_5d09e177",files:"m_44324ddc",codeWrapper:"m_e42c0d8b",showCodeButton:"m_d9142897",root:"m_5d0f6cdd",fileIcon:"m_19e0fe90"}},70980:function(e,t,n){"use strict";n.d(t,{U:function(){return u},Y:function(){return d}});var r=n(52322),o=n(2784),i=n(68893);let a={colors:{"activityBar.activeBorder":"#fd8c73","activityBar.background":"#ffffff","activityBar.border":"#d0d7de","activityBar.foreground":"#1f2328","activityBar.inactiveForeground":"#656d76","activityBarBadge.background":"#0969da","activityBarBadge.foreground":"#ffffff","badge.background":"#0969da","badge.foreground":"#ffffff","breadcrumb.activeSelectionForeground":"#656d76","breadcrumb.focusForeground":"#1f2328","breadcrumb.foreground":"#656d76","breadcrumbPicker.background":"#ffffff","button.background":"#1f883d","button.foreground":"#ffffff","button.hoverBackground":"#1a7f37","button.secondaryBackground":"#ebecf0","button.secondaryForeground":"#24292f","button.secondaryHoverBackground":"#f3f4f6","checkbox.background":"#f6f8fa","checkbox.border":"#d0d7de","debugConsole.errorForeground":"#cf222e","debugConsole.infoForeground":"#57606a","debugConsole.sourceForeground":"#9a6700","debugConsole.warningForeground":"#7d4e00","debugConsoleInputIcon.foreground":"#6639ba","debugIcon.breakpointForeground":"#cf222e","debugTokenExpression.boolean":"#116329","debugTokenExpression.error":"#a40e26","debugTokenExpression.name":"#0550ae","debugTokenExpression.number":"#116329","debugTokenExpression.string":"#0a3069","debugTokenExpression.value":"#0a3069","debugToolBar.background":"#ffffff",descriptionForeground:"#656d76","diffEditor.insertedLineBackground":"#aceebb4d","diffEditor.insertedTextBackground":"#6fdd8b80","diffEditor.removedLineBackground":"#ffcecb4d","diffEditor.removedTextBackground":"#ff818266","dropdown.background":"#ffffff","dropdown.border":"#d0d7de","dropdown.foreground":"#1f2328","dropdown.listBackground":"#ffffff","editor.background":"#ffffff","editor.findMatchBackground":"#bf8700","editor.findMatchHighlightBackground":"#fae17d80","editor.focusedStackFrameHighlightBackground":"#4ac26b66","editor.foldBackground":"#6e77811a","editor.foreground":"#1f2328","editor.lineHighlightBackground":"#eaeef280","editor.linkedEditingBackground":"#0969da12","editor.selectionHighlightBackground":"#4ac26b40","editor.stackFrameHighlightBackground":"#d4a72c66","editor.wordHighlightBackground":"#eaeef280","editor.wordHighlightBorder":"#afb8c199","editor.wordHighlightStrongBackground":"#afb8c14d","editor.wordHighlightStrongBorder":"#afb8c199","editorBracketHighlight.foreground1":"#0969da","editorBracketHighlight.foreground2":"#1a7f37","editorBracketHighlight.foreground3":"#9a6700","editorBracketHighlight.foreground4":"#cf222e","editorBracketHighlight.foreground5":"#bf3989","editorBracketHighlight.foreground6":"#8250df","editorBracketHighlight.unexpectedBracket.foreground":"#656d76","editorBracketMatch.background":"#4ac26b40","editorBracketMatch.border":"#4ac26b99","editorCursor.foreground":"#0969da","editorGroup.border":"#d0d7de","editorGroupHeader.tabsBackground":"#f6f8fa","editorGroupHeader.tabsBorder":"#d0d7de","editorGutter.addedBackground":"#4ac26b66","editorGutter.deletedBackground":"#ff818266","editorGutter.modifiedBackground":"#d4a72c66","editorIndentGuide.activeBackground":"#1f23283d","editorIndentGuide.background":"#1f23281f","editorInlayHint.background":"#afb8c133","editorInlayHint.foreground":"#656d76","editorInlayHint.paramBackground":"#afb8c133","editorInlayHint.paramForeground":"#656d76","editorInlayHint.typeBackground":"#afb8c133","editorInlayHint.typeForeground":"#656d76","editorLineNumber.activeForeground":"#1f2328","editorLineNumber.foreground":"#8c959f","editorOverviewRuler.border":"#ffffff","editorWhitespace.foreground":"#afb8c1","editorWidget.background":"#ffffff",errorForeground:"#cf222e",focusBorder:"#0969da",foreground:"#1f2328","gitDecoration.addedResourceForeground":"#1a7f37","gitDecoration.conflictingResourceForeground":"#bc4c00","gitDecoration.deletedResourceForeground":"#cf222e","gitDecoration.ignoredResourceForeground":"#6e7781","gitDecoration.modifiedResourceForeground":"#9a6700","gitDecoration.submoduleResourceForeground":"#656d76","gitDecoration.untrackedResourceForeground":"#1a7f37","icon.foreground":"#656d76","input.background":"#ffffff","input.border":"#d0d7de","input.foreground":"#1f2328","input.placeholderForeground":"#6e7781","keybindingLabel.foreground":"#1f2328","list.activeSelectionBackground":"#afb8c133","list.activeSelectionForeground":"#1f2328","list.focusBackground":"#ddf4ff","list.focusForeground":"#1f2328","list.highlightForeground":"#0969da","list.hoverBackground":"#eaeef280","list.hoverForeground":"#1f2328","list.inactiveFocusBackground":"#ddf4ff","list.inactiveSelectionBackground":"#afb8c133","list.inactiveSelectionForeground":"#1f2328","minimapSlider.activeBackground":"#8c959f47","minimapSlider.background":"#8c959f33","minimapSlider.hoverBackground":"#8c959f3d","notificationCenterHeader.background":"#f6f8fa","notificationCenterHeader.foreground":"#656d76","notifications.background":"#ffffff","notifications.border":"#d0d7de","notifications.foreground":"#1f2328","notificationsErrorIcon.foreground":"#cf222e","notificationsInfoIcon.foreground":"#0969da","notificationsWarningIcon.foreground":"#9a6700","panel.background":"#f6f8fa","panel.border":"#d0d7de","panelInput.border":"#d0d7de","panelTitle.activeBorder":"#fd8c73","panelTitle.activeForeground":"#1f2328","panelTitle.inactiveForeground":"#656d76","pickerGroup.border":"#d0d7de","pickerGroup.foreground":"#656d76","progressBar.background":"#0969da","quickInput.background":"#ffffff","quickInput.foreground":"#1f2328","scrollbar.shadow":"#6e778133","scrollbarSlider.activeBackground":"#8c959f47","scrollbarSlider.background":"#8c959f33","scrollbarSlider.hoverBackground":"#8c959f3d","settings.headerForeground":"#1f2328","settings.modifiedItemIndicator":"#d4a72c66","sideBar.background":"#f6f8fa","sideBar.border":"#d0d7de","sideBar.foreground":"#1f2328","sideBarSectionHeader.background":"#f6f8fa","sideBarSectionHeader.border":"#d0d7de","sideBarSectionHeader.foreground":"#1f2328","sideBarTitle.foreground":"#1f2328","statusBar.background":"#ffffff","statusBar.border":"#d0d7de","statusBar.debuggingBackground":"#cf222e","statusBar.debuggingForeground":"#ffffff","statusBar.focusBorder":"#0969da80","statusBar.foreground":"#656d76","statusBar.noFolderBackground":"#ffffff","statusBarItem.activeBackground":"#1f23281f","statusBarItem.focusBorder":"#0969da","statusBarItem.hoverBackground":"#1f232814","statusBarItem.prominentBackground":"#afb8c133","statusBarItem.remoteBackground":"#eaeef2","statusBarItem.remoteForeground":"#1f2328","symbolIcon.arrayForeground":"#953800","symbolIcon.booleanForeground":"#0550ae","symbolIcon.classForeground":"#953800","symbolIcon.colorForeground":"#0a3069","symbolIcon.constantForeground":"#116329","symbolIcon.constructorForeground":"#3e1f79","symbolIcon.enumeratorForeground":"#953800","symbolIcon.enumeratorMemberForeground":"#0550ae","symbolIcon.eventForeground":"#57606a","symbolIcon.fieldForeground":"#953800","symbolIcon.fileForeground":"#7d4e00","symbolIcon.folderForeground":"#7d4e00","symbolIcon.functionForeground":"#6639ba","symbolIcon.interfaceForeground":"#953800","symbolIcon.keyForeground":"#0550ae","symbolIcon.keywordForeground":"#a40e26","symbolIcon.methodForeground":"#6639ba","symbolIcon.moduleForeground":"#a40e26","symbolIcon.namespaceForeground":"#a40e26","symbolIcon.nullForeground":"#0550ae","symbolIcon.numberForeground":"#116329","symbolIcon.objectForeground":"#953800","symbolIcon.operatorForeground":"#0a3069","symbolIcon.packageForeground":"#953800","symbolIcon.propertyForeground":"#953800","symbolIcon.referenceForeground":"#0550ae","symbolIcon.snippetForeground":"#0550ae","symbolIcon.stringForeground":"#0a3069","symbolIcon.structForeground":"#953800","symbolIcon.textForeground":"#0a3069","symbolIcon.typeParameterForeground":"#0a3069","symbolIcon.unitForeground":"#0550ae","symbolIcon.variableForeground":"#953800","tab.activeBackground":"#ffffff","tab.activeBorder":"#ffffff","tab.activeBorderTop":"#fd8c73","tab.activeForeground":"#1f2328","tab.border":"#d0d7de","tab.hoverBackground":"#ffffff","tab.inactiveBackground":"#f6f8fa","tab.inactiveForeground":"#656d76","tab.unfocusedActiveBorder":"#ffffff","tab.unfocusedActiveBorderTop":"#d0d7de","tab.unfocusedHoverBackground":"#eaeef280","terminal.ansiBlack":"#24292f","terminal.ansiBlue":"#0969da","terminal.ansiBrightBlack":"#57606a","terminal.ansiBrightBlue":"#218bff","terminal.ansiBrightCyan":"#3192aa","terminal.ansiBrightGreen":"#1a7f37","terminal.ansiBrightMagenta":"#a475f9","terminal.ansiBrightRed":"#a40e26","terminal.ansiBrightWhite":"#8c959f","terminal.ansiBrightYellow":"#633c01","terminal.ansiCyan":"#1b7c83","terminal.ansiGreen":"#116329","terminal.ansiMagenta":"#8250df","terminal.ansiRed":"#cf222e","terminal.ansiWhite":"#6e7781","terminal.ansiYellow":"#4d2d00","terminal.foreground":"#1f2328","textBlockQuote.background":"#f6f8fa","textBlockQuote.border":"#d0d7de","textCodeBlock.background":"#afb8c133","textLink.activeForeground":"#0969da","textLink.foreground":"#0969da","textPreformat.foreground":"#656d76","textSeparator.foreground":"#d8dee4","titleBar.activeBackground":"#ffffff","titleBar.activeForeground":"#656d76","titleBar.border":"#d0d7de","titleBar.inactiveBackground":"#f6f8fa","titleBar.inactiveForeground":"#656d76","tree.indentGuidesStroke":"#d8dee4","welcomePage.buttonBackground":"#f6f8fa","welcomePage.buttonHoverBackground":"#f3f4f6"},displayName:"GitHub Light Default",semanticHighlighting:!0,tokenColors:[{scope:["comment","punctuation.definition.comment","string.comment"],settings:{foreground:"#6e7781"}},{scope:["constant.other.placeholder","constant.character"],settings:{foreground:"#cf222e"}},{scope:["constant","entity.name.constant","variable.other.constant","variable.other.enummember","variable.language","entity"],settings:{foreground:"#0550ae"}},{scope:["entity.name","meta.export.default","meta.definition.variable"],settings:{foreground:"#953800"}},{scope:["variable.parameter.function","meta.jsx.children","meta.block","meta.tag.attributes","entity.name.constant","meta.object.member","meta.embedded.expression"],settings:{foreground:"#1f2328"}},{scope:"entity.name.function",settings:{foreground:"#8250df"}},{scope:["entity.name.tag","support.class.component"],settings:{foreground:"#116329"}},{scope:"keyword",settings:{foreground:"#cf222e"}},{scope:["storage","storage.type"],settings:{foreground:"#cf222e"}},{scope:["storage.modifier.package","storage.modifier.import","storage.type.java"],settings:{foreground:"#1f2328"}},{scope:["string","string punctuation.section.embedded source"],settings:{foreground:"#0a3069"}},{scope:"support",settings:{foreground:"#0550ae"}},{scope:"meta.property-name",settings:{foreground:"#0550ae"}},{scope:"variable",settings:{foreground:"#953800"}},{scope:"variable.other",settings:{foreground:"#1f2328"}},{scope:"invalid.broken",settings:{fontStyle:"italic",foreground:"#82071e"}},{scope:"invalid.deprecated",settings:{fontStyle:"italic",foreground:"#82071e"}},{scope:"invalid.illegal",settings:{fontStyle:"italic",foreground:"#82071e"}},{scope:"invalid.unimplemented",settings:{fontStyle:"italic",foreground:"#82071e"}},{scope:"carriage-return",settings:{background:"#cf222e",content:"^M",fontStyle:"italic underline",foreground:"#f6f8fa"}},{scope:"message.error",settings:{foreground:"#82071e"}},{scope:"string variable",settings:{foreground:"#0550ae"}},{scope:["source.regexp","string.regexp"],settings:{foreground:"#0a3069"}},{scope:["string.regexp.character-class","string.regexp constant.character.escape","string.regexp source.ruby.embedded","string.regexp string.regexp.arbitrary-repitition"],settings:{foreground:"#0a3069"}},{scope:"string.regexp constant.character.escape",settings:{fontStyle:"bold",foreground:"#116329"}},{scope:"support.constant",settings:{foreground:"#0550ae"}},{scope:"support.variable",settings:{foreground:"#0550ae"}},{scope:"support.type.property-name.json",settings:{foreground:"#116329"}},{scope:"meta.module-reference",settings:{foreground:"#0550ae"}},{scope:"punctuation.definition.list.begin.markdown",settings:{foreground:"#953800"}},{scope:["markup.heading","markup.heading entity.name"],settings:{fontStyle:"bold",foreground:"#0550ae"}},{scope:"markup.quote",settings:{foreground:"#116329"}},{scope:"markup.italic",settings:{fontStyle:"italic",foreground:"#1f2328"}},{scope:"markup.bold",settings:{fontStyle:"bold",foreground:"#1f2328"}},{scope:["markup.underline"],settings:{fontStyle:"underline"}},{scope:["markup.strikethrough"],settings:{fontStyle:"strikethrough"}},{scope:"markup.inline.raw",settings:{foreground:"#0550ae"}},{scope:["markup.deleted","meta.diff.header.from-file","punctuation.definition.deleted"],settings:{background:"#ffebe9",foreground:"#82071e"}},{scope:["punctuation.section.embedded"],settings:{foreground:"#cf222e"}},{scope:["markup.inserted","meta.diff.header.to-file","punctuation.definition.inserted"],settings:{background:"#dafbe1",foreground:"#116329"}},{scope:["markup.changed","punctuation.definition.changed"],settings:{background:"#ffd8b5",foreground:"#953800"}},{scope:["markup.ignored","markup.untracked"],settings:{background:"#0550ae",foreground:"#eaeef2"}},{scope:"meta.diff.range",settings:{fontStyle:"bold",foreground:"#8250df"}},{scope:"meta.diff.header",settings:{foreground:"#0550ae"}},{scope:"meta.separator",settings:{fontStyle:"bold",foreground:"#0550ae"}},{scope:"meta.output",settings:{foreground:"#0550ae"}},{scope:["brackethighlighter.tag","brackethighlighter.curly","brackethighlighter.round","brackethighlighter.square","brackethighlighter.angle","brackethighlighter.quote"],settings:{foreground:"#57606a"}},{scope:"brackethighlighter.unmatched",settings:{foreground:"#82071e"}},{scope:["constant.other.reference.link","string.other.link"],settings:{foreground:"#0a3069"}}],type:"light"},s={colors:{"activityBar.activeBorder":"#f78166","activityBar.background":"#0d1117","activityBar.border":"#30363d","activityBar.foreground":"#e6edf3","activityBar.inactiveForeground":"#7d8590","activityBarBadge.background":"#1f6feb","activityBarBadge.foreground":"#ffffff","badge.background":"#1f6feb","badge.foreground":"#ffffff","breadcrumb.activeSelectionForeground":"#7d8590","breadcrumb.focusForeground":"#e6edf3","breadcrumb.foreground":"#7d8590","breadcrumbPicker.background":"#161b22","button.background":"#238636","button.foreground":"#ffffff","button.hoverBackground":"#2ea043","button.secondaryBackground":"#282e33","button.secondaryForeground":"#c9d1d9","button.secondaryHoverBackground":"#30363d","checkbox.background":"#161b22","checkbox.border":"#30363d","debugConsole.errorForeground":"#ffa198","debugConsole.infoForeground":"#8b949e","debugConsole.sourceForeground":"#e3b341","debugConsole.warningForeground":"#d29922","debugConsoleInputIcon.foreground":"#bc8cff","debugIcon.breakpointForeground":"#f85149","debugTokenExpression.boolean":"#56d364","debugTokenExpression.error":"#ffa198","debugTokenExpression.name":"#79c0ff","debugTokenExpression.number":"#56d364","debugTokenExpression.string":"#a5d6ff","debugTokenExpression.value":"#a5d6ff","debugToolBar.background":"#161b22",descriptionForeground:"#7d8590","diffEditor.insertedLineBackground":"#23863626","diffEditor.insertedTextBackground":"#3fb9504d","diffEditor.removedLineBackground":"#da363326","diffEditor.removedTextBackground":"#ff7b724d","dropdown.background":"#161b22","dropdown.border":"#30363d","dropdown.foreground":"#e6edf3","dropdown.listBackground":"#161b22","editor.background":"#0d1117","editor.findMatchBackground":"#9e6a03","editor.findMatchHighlightBackground":"#f2cc6080","editor.focusedStackFrameHighlightBackground":"#2ea04366","editor.foldBackground":"#6e76811a","editor.foreground":"#e6edf3","editor.lineHighlightBackground":"#6e76811a","editor.linkedEditingBackground":"#2f81f712","editor.selectionHighlightBackground":"#3fb95040","editor.stackFrameHighlightBackground":"#bb800966","editor.wordHighlightBackground":"#6e768180","editor.wordHighlightBorder":"#6e768199","editor.wordHighlightStrongBackground":"#6e76814d","editor.wordHighlightStrongBorder":"#6e768199","editorBracketHighlight.foreground1":"#79c0ff","editorBracketHighlight.foreground2":"#56d364","editorBracketHighlight.foreground3":"#e3b341","editorBracketHighlight.foreground4":"#ffa198","editorBracketHighlight.foreground5":"#ff9bce","editorBracketHighlight.foreground6":"#d2a8ff","editorBracketHighlight.unexpectedBracket.foreground":"#7d8590","editorBracketMatch.background":"#3fb95040","editorBracketMatch.border":"#3fb95099","editorCursor.foreground":"#2f81f7","editorGroup.border":"#30363d","editorGroupHeader.tabsBackground":"#010409","editorGroupHeader.tabsBorder":"#30363d","editorGutter.addedBackground":"#2ea04366","editorGutter.deletedBackground":"#f8514966","editorGutter.modifiedBackground":"#bb800966","editorIndentGuide.activeBackground":"#e6edf33d","editorIndentGuide.background":"#e6edf31f","editorInlayHint.background":"#8b949e33","editorInlayHint.foreground":"#7d8590","editorInlayHint.paramBackground":"#8b949e33","editorInlayHint.paramForeground":"#7d8590","editorInlayHint.typeBackground":"#8b949e33","editorInlayHint.typeForeground":"#7d8590","editorLineNumber.activeForeground":"#e6edf3","editorLineNumber.foreground":"#6e7681","editorOverviewRuler.border":"#010409","editorWhitespace.foreground":"#484f58","editorWidget.background":"#161b22",errorForeground:"#f85149",focusBorder:"#1f6feb",foreground:"#e6edf3","gitDecoration.addedResourceForeground":"#3fb950","gitDecoration.conflictingResourceForeground":"#db6d28","gitDecoration.deletedResourceForeground":"#f85149","gitDecoration.ignoredResourceForeground":"#6e7681","gitDecoration.modifiedResourceForeground":"#d29922","gitDecoration.submoduleResourceForeground":"#7d8590","gitDecoration.untrackedResourceForeground":"#3fb950","icon.foreground":"#7d8590","input.background":"#0d1117","input.border":"#30363d","input.foreground":"#e6edf3","input.placeholderForeground":"#6e7681","keybindingLabel.foreground":"#e6edf3","list.activeSelectionBackground":"#6e768166","list.activeSelectionForeground":"#e6edf3","list.focusBackground":"#388bfd26","list.focusForeground":"#e6edf3","list.highlightForeground":"#2f81f7","list.hoverBackground":"#6e76811a","list.hoverForeground":"#e6edf3","list.inactiveFocusBackground":"#388bfd26","list.inactiveSelectionBackground":"#6e768166","list.inactiveSelectionForeground":"#e6edf3","minimapSlider.activeBackground":"#8b949e47","minimapSlider.background":"#8b949e33","minimapSlider.hoverBackground":"#8b949e3d","notificationCenterHeader.background":"#161b22","notificationCenterHeader.foreground":"#7d8590","notifications.background":"#161b22","notifications.border":"#30363d","notifications.foreground":"#e6edf3","notificationsErrorIcon.foreground":"#f85149","notificationsInfoIcon.foreground":"#2f81f7","notificationsWarningIcon.foreground":"#d29922","panel.background":"#010409","panel.border":"#30363d","panelInput.border":"#30363d","panelTitle.activeBorder":"#f78166","panelTitle.activeForeground":"#e6edf3","panelTitle.inactiveForeground":"#7d8590","peekViewEditor.background":"#6e76811a","peekViewEditor.matchHighlightBackground":"#bb800966","peekViewResult.background":"#0d1117","peekViewResult.matchHighlightBackground":"#bb800966","pickerGroup.border":"#30363d","pickerGroup.foreground":"#7d8590","progressBar.background":"#1f6feb","quickInput.background":"#161b22","quickInput.foreground":"#e6edf3","scrollbar.shadow":"#484f5833","scrollbarSlider.activeBackground":"#8b949e47","scrollbarSlider.background":"#8b949e33","scrollbarSlider.hoverBackground":"#8b949e3d","settings.headerForeground":"#e6edf3","settings.modifiedItemIndicator":"#bb800966","sideBar.background":"#010409","sideBar.border":"#30363d","sideBar.foreground":"#e6edf3","sideBarSectionHeader.background":"#010409","sideBarSectionHeader.border":"#30363d","sideBarSectionHeader.foreground":"#e6edf3","sideBarTitle.foreground":"#e6edf3","statusBar.background":"#0d1117","statusBar.border":"#30363d","statusBar.debuggingBackground":"#da3633","statusBar.debuggingForeground":"#ffffff","statusBar.focusBorder":"#1f6feb80","statusBar.foreground":"#7d8590","statusBar.noFolderBackground":"#0d1117","statusBarItem.activeBackground":"#e6edf31f","statusBarItem.focusBorder":"#1f6feb","statusBarItem.hoverBackground":"#e6edf314","statusBarItem.prominentBackground":"#6e768166","statusBarItem.remoteBackground":"#30363d","statusBarItem.remoteForeground":"#e6edf3","symbolIcon.arrayForeground":"#f0883e","symbolIcon.booleanForeground":"#58a6ff","symbolIcon.classForeground":"#f0883e","symbolIcon.colorForeground":"#79c0ff","symbolIcon.constantForeground":["#aff5b4","#7ee787","#56d364","#3fb950","#2ea043","#238636","#196c2e","#0f5323","#033a16","#04260f"],"symbolIcon.constructorForeground":"#d2a8ff","symbolIcon.enumeratorForeground":"#f0883e","symbolIcon.enumeratorMemberForeground":"#58a6ff","symbolIcon.eventForeground":"#6e7681","symbolIcon.fieldForeground":"#f0883e","symbolIcon.fileForeground":"#d29922","symbolIcon.folderForeground":"#d29922","symbolIcon.functionForeground":"#bc8cff","symbolIcon.interfaceForeground":"#f0883e","symbolIcon.keyForeground":"#58a6ff","symbolIcon.keywordForeground":"#ff7b72","symbolIcon.methodForeground":"#bc8cff","symbolIcon.moduleForeground":"#ff7b72","symbolIcon.namespaceForeground":"#ff7b72","symbolIcon.nullForeground":"#58a6ff","symbolIcon.numberForeground":"#3fb950","symbolIcon.objectForeground":"#f0883e","symbolIcon.operatorForeground":"#79c0ff","symbolIcon.packageForeground":"#f0883e","symbolIcon.propertyForeground":"#f0883e","symbolIcon.referenceForeground":"#58a6ff","symbolIcon.snippetForeground":"#58a6ff","symbolIcon.stringForeground":"#79c0ff","symbolIcon.structForeground":"#f0883e","symbolIcon.textForeground":"#79c0ff","symbolIcon.typeParameterForeground":"#79c0ff","symbolIcon.unitForeground":"#58a6ff","symbolIcon.variableForeground":"#f0883e","tab.activeBackground":"#0d1117","tab.activeBorder":"#0d1117","tab.activeBorderTop":"#f78166","tab.activeForeground":"#e6edf3","tab.border":"#30363d","tab.hoverBackground":"#0d1117","tab.inactiveBackground":"#010409","tab.inactiveForeground":"#7d8590","tab.unfocusedActiveBorder":"#0d1117","tab.unfocusedActiveBorderTop":"#30363d","tab.unfocusedHoverBackground":"#6e76811a","terminal.ansiBlack":"#484f58","terminal.ansiBlue":"#58a6ff","terminal.ansiBrightBlack":"#6e7681","terminal.ansiBrightBlue":"#79c0ff","terminal.ansiBrightCyan":"#56d4dd","terminal.ansiBrightGreen":"#56d364","terminal.ansiBrightMagenta":"#d2a8ff","terminal.ansiBrightRed":"#ffa198","terminal.ansiBrightWhite":"#ffffff","terminal.ansiBrightYellow":"#e3b341","terminal.ansiCyan":"#39c5cf","terminal.ansiGreen":"#3fb950","terminal.ansiMagenta":"#bc8cff","terminal.ansiRed":"#ff7b72","terminal.ansiWhite":"#b1bac4","terminal.ansiYellow":"#d29922","terminal.foreground":"#e6edf3","textBlockQuote.background":"#010409","textBlockQuote.border":"#30363d","textCodeBlock.background":"#6e768166","textLink.activeForeground":"#2f81f7","textLink.foreground":"#2f81f7","textPreformat.foreground":"#7d8590","textSeparator.foreground":"#21262d","titleBar.activeBackground":"#0d1117","titleBar.activeForeground":"#7d8590","titleBar.border":"#30363d","titleBar.inactiveBackground":"#010409","titleBar.inactiveForeground":"#7d8590","tree.indentGuidesStroke":"#21262d","welcomePage.buttonBackground":"#21262d","welcomePage.buttonHoverBackground":"#30363d"},displayName:"GitHub Dark Default",semanticHighlighting:!0,tokenColors:[{scope:["comment","punctuation.definition.comment","string.comment"],settings:{foreground:"#8b949e"}},{scope:["constant.other.placeholder","constant.character"],settings:{foreground:"#ff7b72"}},{scope:["constant","entity.name.constant","variable.other.constant","variable.other.enummember","variable.language","entity"],settings:{foreground:"#79c0ff"}},{scope:["entity.name","meta.export.default","meta.definition.variable"],settings:{foreground:"#ffa657"}},{scope:["variable.parameter.function","meta.jsx.children","meta.block","meta.tag.attributes","entity.name.constant","meta.object.member","meta.embedded.expression"],settings:{foreground:"#e6edf3"}},{scope:"entity.name.function",settings:{foreground:"#d2a8ff"}},{scope:["entity.name.tag","support.class.component"],settings:{foreground:"#7ee787"}},{scope:"keyword",settings:{foreground:"#ff7b72"}},{scope:["storage","storage.type"],settings:{foreground:"#ff7b72"}},{scope:["storage.modifier.package","storage.modifier.import","storage.type.java"],settings:{foreground:"#e6edf3"}},{scope:["string","string punctuation.section.embedded source"],settings:{foreground:"#a5d6ff"}},{scope:"support",settings:{foreground:"#79c0ff"}},{scope:"meta.property-name",settings:{foreground:"#79c0ff"}},{scope:"variable",settings:{foreground:"#ffa657"}},{scope:"variable.other",settings:{foreground:"#e6edf3"}},{scope:"invalid.broken",settings:{fontStyle:"italic",foreground:"#ffa198"}},{scope:"invalid.deprecated",settings:{fontStyle:"italic",foreground:"#ffa198"}},{scope:"invalid.illegal",settings:{fontStyle:"italic",foreground:"#ffa198"}},{scope:"invalid.unimplemented",settings:{fontStyle:"italic",foreground:"#ffa198"}},{scope:"carriage-return",settings:{background:"#ff7b72",content:"^M",fontStyle:"italic underline",foreground:"#f0f6fc"}},{scope:"message.error",settings:{foreground:"#ffa198"}},{scope:"string variable",settings:{foreground:"#79c0ff"}},{scope:["source.regexp","string.regexp"],settings:{foreground:"#a5d6ff"}},{scope:["string.regexp.character-class","string.regexp constant.character.escape","string.regexp source.ruby.embedded","string.regexp string.regexp.arbitrary-repitition"],settings:{foreground:"#a5d6ff"}},{scope:"string.regexp constant.character.escape",settings:{fontStyle:"bold",foreground:"#7ee787"}},{scope:"support.constant",settings:{foreground:"#79c0ff"}},{scope:"support.variable",settings:{foreground:"#79c0ff"}},{scope:"support.type.property-name.json",settings:{foreground:"#7ee787"}},{scope:"meta.module-reference",settings:{foreground:"#79c0ff"}},{scope:"punctuation.definition.list.begin.markdown",settings:{foreground:"#ffa657"}},{scope:["markup.heading","markup.heading entity.name"],settings:{fontStyle:"bold",foreground:"#79c0ff"}},{scope:"markup.quote",settings:{foreground:"#7ee787"}},{scope:"markup.italic",settings:{fontStyle:"italic",foreground:"#e6edf3"}},{scope:"markup.bold",settings:{fontStyle:"bold",foreground:"#e6edf3"}},{scope:["markup.underline"],settings:{fontStyle:"underline"}},{scope:["markup.strikethrough"],settings:{fontStyle:"strikethrough"}},{scope:"markup.inline.raw",settings:{foreground:"#79c0ff"}},{scope:["markup.deleted","meta.diff.header.from-file","punctuation.definition.deleted"],settings:{background:"#490202",foreground:"#ffa198"}},{scope:["punctuation.section.embedded"],settings:{foreground:"#ff7b72"}},{scope:["markup.inserted","meta.diff.header.to-file","punctuation.definition.inserted"],settings:{background:"#04260f",foreground:"#7ee787"}},{scope:["markup.changed","punctuation.definition.changed"],settings:{background:"#5a1e02",foreground:"#ffa657"}},{scope:["markup.ignored","markup.untracked"],settings:{background:"#79c0ff",foreground:"#161b22"}},{scope:"meta.diff.range",settings:{fontStyle:"bold",foreground:"#d2a8ff"}},{scope:"meta.diff.header",settings:{foreground:"#79c0ff"}},{scope:"meta.separator",settings:{fontStyle:"bold",foreground:"#79c0ff"}},{scope:"meta.output",settings:{foreground:"#79c0ff"}},{scope:["brackethighlighter.tag","brackethighlighter.curly","brackethighlighter.round","brackethighlighter.square","brackethighlighter.angle","brackethighlighter.quote"],settings:{foreground:"#8b949e"}},{scope:"brackethighlighter.unmatched",settings:{foreground:"#ffa198"}},{scope:["constant.other.reference.link","string.other.link"],settings:{foreground:"#a5d6ff"}}],type:"dark"};var c=n(98483);let l=(0,o.createContext)(null);function u({children:e,loadShiki:t}){let[n,u]=(0,o.useState)(null),d=(0,i.l)("light");(0,o.useEffect)(()=>{t().then(e=>u(e))},[t]);let p=(0,o.useCallback)((e,t="tsx")=>n?{code:n.codeToHtml(e,{lang:t,theme:"light"===d?a:s}).replaceAll('tabindex="0"',"").replace("",``).replaceAll('class="shiki "',`class="${c.Z.pre}"`).replaceAll('style="background-color:#ffffff;color:#1f2328"',"").replaceAll('style="background-color:#0d1117;color:#e6edf3',""),highlighted:!0}:{code:e,highlighted:!1},[n,d]);return(0,r.jsx)(l.Provider,{value:p,children:e})}function d(){return(0,o.useContext)(l)||(e=>({code:e,highlighted:!1}))}}},function(e){var t=function(t){return e(e.s=t)};e.O(0,[49774,40179],function(){return t(86570),t(69442)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/_app-4f568f007ce8ec68.js b/_next/static/chunks/pages/_app-4f568f007ce8ec68.js deleted file mode 100644 index 4b081c12752..00000000000 --- a/_next/static/chunks/pages/_app-4f568f007ce8ec68.js +++ /dev/null @@ -1,88 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[92888],{2107:function(e,t,n){"use strict";n.d(t,{Z:function(){return V}});var r=function(){function e(e){var t=this;this._insertTag=function(e){var n;n=0===t.tags.length?t.insertionPoint?t.insertionPoint.nextSibling:t.prepend?t.container.firstChild:t.before:t.tags[t.tags.length-1].nextSibling,t.container.insertBefore(e,n),t.tags.push(e)},this.isSpeedy=void 0===e.speedy||e.speedy,this.tags=[],this.ctr=0,this.nonce=e.nonce,this.key=e.key,this.container=e.container,this.prepend=e.prepend,this.insertionPoint=e.insertionPoint,this.before=null}var t=e.prototype;return t.hydrate=function(e){e.forEach(this._insertTag)},t.insert=function(e){if(this.ctr%(this.isSpeedy?65e3:1)==0){var t;this._insertTag(((t=document.createElement("style")).setAttribute("data-emotion",this.key),void 0!==this.nonce&&t.setAttribute("nonce",this.nonce),t.appendChild(document.createTextNode("")),t.setAttribute("data-s",""),t))}var n=this.tags[this.tags.length-1];if(this.isSpeedy){var r=function(e){if(e.sheet)return e.sheet;for(var t=0;t0?h[k]+" "+w:s(w,/&\f/g,h[k])).trim())&&(d[x++]=j);return y(e,t,n,0===i?P:l,d,p,f)}function A(e,t,n,r){return y(e,t,n,R,u(e,0,r),u(e,r+1,-1),r)}var L=function(e,t,n){for(var r=0,o=0;r=o,o=w(),38===r&&12===o&&(t[n]=1),!j(o);)k();return u(b,e,g)},D=function(e,t){var n=-1,r=44;do switch(j(r)){case 0:38===r&&12===w()&&(t[n]=1),e[n]+=L(g-1,t,n);break;case 2:e[n]+=S(r);break;case 4:if(44===r){e[++n]=58===w()?"&\f":"",t[n]=e[n].length;break}default:e[n]+=i(r)}while(r=k());return e},$=function(e,t){var n;return n=D(C(e),t),b="",n},z=new WeakMap,H=function(e){if("rule"===e.type&&e.parent&&!(e.length<1)){for(var t=e.value,n=e.parent,r=e.column===n.column&&e.line===n.line;"rule"!==n.type;)if(!(n=n.parent))return;if((1!==e.props.length||58===t.charCodeAt(0)||z.get(n))&&!r){z.set(e,!0);for(var o=[],i=$(t,o),a=n.props,s=0,c=0;s-1&&!e.return)switch(e.type){case R:e.return=function e(t,n){switch(45^l(t,0)?(((n<<2^l(t,0))<<2^l(t,1))<<2^l(t,2))<<2^l(t,3):0){case 5103:return T+"print-"+t+t;case 5737:case 4201:case 3177:case 3433:case 1641:case 4457:case 2921:case 5572:case 6356:case 5844:case 3191:case 6645:case 3005:case 6391:case 5879:case 5623:case 6135:case 4599:case 4855:case 4215:case 6389:case 5109:case 5365:case 5621:case 3829:return T+t+t;case 5349:case 4246:case 4810:case 6968:case 2756:return T+t+M+t+I+t+t;case 6828:case 4268:return T+t+I+t+t;case 6165:return T+t+I+"flex-"+t+t;case 5187:return T+t+s(t,/(\w+).+(:[^]+)/,T+"box-$1$2"+I+"flex-$1$2")+t;case 5443:return T+t+I+"flex-item-"+s(t,/flex-|-self/,"")+t;case 4675:return T+t+I+"flex-line-pack"+s(t,/align-content|flex-|-self/,"")+t;case 5548:return T+t+I+s(t,"shrink","negative")+t;case 5292:return T+t+I+s(t,"basis","preferred-size")+t;case 6060:return T+"box-"+s(t,"-grow","")+T+t+I+s(t,"grow","positive")+t;case 4554:return T+s(t,/([^-])(transform)/g,"$1"+T+"$2")+t;case 6187:return s(s(s(t,/(zoom-|grab)/,T+"$1"),/(image-set)/,T+"$1"),t,"")+t;case 5495:case 3959:return s(t,/(image-set\([^]*)/,T+"$1$`$1");case 4968:return s(s(t,/(.+:)(flex-)?(.*)/,T+"box-pack:$3"+I+"flex-pack:$3"),/s.+-b[^;]+/,"justify")+T+t+t;case 4095:case 3583:case 4068:case 2532:return s(t,/(.+)-inline(.+)/,T+"$1$2")+t;case 8116:case 7059:case 5753:case 5535:case 5445:case 5701:case 4933:case 4677:case 5533:case 5789:case 5021:case 4765:if(d(t)-1-n>6)switch(l(t,n+1)){case 109:if(45!==l(t,n+4))break;case 102:return s(t,/(.+:)(.+)-([^]+)/,"$1"+T+"$2-$3$1"+M+(108==l(t,n+3)?"$3":"$2-$3"))+t;case 115:return~c(t,"stretch")?e(s(t,"stretch","fill-available"),n)+t:t}break;case 4949:if(115!==l(t,n+1))break;case 6444:switch(l(t,d(t)-3-(~c(t,"!important")&&10))){case 107:return s(t,":",":"+T)+t;case 101:return s(t,/(.+:)([^;!]+)(;|!.+)?/,"$1"+T+(45===l(t,14)?"inline-":"")+"box$3$1"+T+"$2$3$1"+I+"$2box$3")+t}break;case 5936:switch(l(t,n+11)){case 114:return T+t+I+s(t,/[svh]\w+-[tblr]{2}/,"tb")+t;case 108:return T+t+I+s(t,/[svh]\w+-[tblr]{2}/,"tb-rl")+t;case 45:return T+t+I+s(t,/[svh]\w+-[tblr]{2}/,"lr")+t}return T+t+I+t+t}return t}(e.value,e.length);break;case N:return _([x(e,{value:s(e.value,"@","@"+T)})],r);case P:if(e.length){var o,i;return o=e.props,i=function(t){var n;switch(n=t,(n=/(::plac\w+|:read-\w+)/.exec(n))?n[0]:n){case":read-only":case":read-write":return _([x(e,{props:[s(t,/:(read-\w+)/,":"+M+"$1")]})],r);case"::placeholder":return _([x(e,{props:[s(t,/:(plac\w+)/,":"+T+"input-$1")]}),x(e,{props:[s(t,/:(plac\w+)/,":"+M+"$1")]}),x(e,{props:[s(t,/:(plac\w+)/,I+"input-$1")]})],r)}return""},o.map(i).join("")}}}],V=function(e){var t,n,o,a,h,x,I=e.key;if("css"===I){var M=document.querySelectorAll("style[data-emotion]:not([data-s])");Array.prototype.forEach.call(M,function(e){-1!==e.getAttribute("data-emotion").indexOf(" ")&&(document.head.appendChild(e),e.setAttribute("data-s",""))})}var T=e.stylisPlugins||Z,P={},R=[];a=e.container||document.head,Array.prototype.forEach.call(document.querySelectorAll('style[data-emotion^="'+I+' "]'),function(e){for(var t=e.getAttribute("data-emotion").split(" "),n=1;n2||j(v)>3?"":" "}(F);break;case 92:G+=function(e,t){for(var n;--t&&k()&&!(v<48)&&!(v>102)&&(!(v>57)||!(v<65))&&(!(v>70)||!(v<97)););return n=g+(t<6&&32==w()&&32==k()),u(b,e,n)}(g-1,7);continue;case 47:switch(w()){case 42:case 47:p(y(M=function(e,t){for(;k();)if(e+v===57)break;else if(e+v===84&&47===w())break;return"/*"+u(b,t,g-1)+"*"+i(47===e?e:k())}(k(),g),n,r,E,i(v),u(M,2,-2),0),I);break;default:G+="/"}break;case 123*L:C[T++]=d(G)*$;case 125*L:case 59:case 0:switch(z){case 0:case 125:D=0;case 59+P:-1==$&&(G=s(G,/\f/g,"")),_>0&&d(G)-R&&p(_>32?A(G+";",o,r,R-1):A(s(G," ","")+";",o,r,R-2),I);break;case 59:G+=";";default:if(p(V=B(G,n,r,T,P,a,C,H,O=[],Z=[],R),h),123===z){if(0===P)e(G,n,V,V,O,h,R,C,Z);else switch(99===N&&110===l(G,3)?100:N){case 100:case 108:case 109:case 115:e(t,V,V,o&&p(B(t,V,V,0,0,a,C,H,a,O=[],R),Z),a,Z,R,C,o?O:Z);break;default:e(G,V,V,V,[""],Z,0,C,Z)}}}T=P=_=0,L=$=1,H=G="",R=x;break;case 58:R=1+d(G),_=F;default:if(L<1){if(123==z)--L;else if(125==z&&0==L++&&125==(v=g>0?l(b,--g):0,m--,10===v&&(m=1,f--),v))continue}switch(G+=i(z),z*L){case 38:$=P>0?1:(G+="\f",-1);break;case 44:C[T++]=(d(G)-1)*$,$=1;break;case 64:45===w()&&(G+=S(k())),N=w(),P=R=d(H=G+=function(e){for(;!j(w());)k();return u(b,e,g)}(g)),z++;break;case 45:45===F&&2==d(G)&&(L=0)}}return h}("",null,null,null,[""],t=C(t=e),0,[0],t),b="",n),N)};h=function(e,t,n,r){x=n,L(e?e+"{"+t.styles+"}":t.styles),r&&(D.inserted[t.name]=!0)};var D={key:I,sheet:new r({key:I,container:a,nonce:e.nonce,speedy:e.speedy,prepend:e.prepend,insertionPoint:e.insertionPoint}),nonce:e.nonce,inserted:P,registered:{},insert:h};return D.sheet.hydrate(R),D}},74251:function(e,t,n){"use strict";n.d(t,{O:function(){return h}});var r,o,i,a={animationIterationCount:1,aspectRatio:1,borderImageOutset:1,borderImageSlice:1,borderImageWidth:1,boxFlex:1,boxFlexGroup:1,boxOrdinalGroup:1,columnCount:1,columns:1,flex:1,flexGrow:1,flexPositive:1,flexShrink:1,flexNegative:1,flexOrder:1,gridRow:1,gridRowEnd:1,gridRowSpan:1,gridRowStart:1,gridColumn:1,gridColumnEnd:1,gridColumnSpan:1,gridColumnStart:1,msGridRow:1,msGridRowSpan:1,msGridColumn:1,msGridColumnSpan:1,fontWeight:1,lineHeight:1,opacity:1,order:1,orphans:1,tabSize:1,widows:1,zIndex:1,zoom:1,WebkitLineClamp:1,fillOpacity:1,floodOpacity:1,stopOpacity:1,strokeDasharray:1,strokeDashoffset:1,strokeMiterlimit:1,strokeOpacity:1,strokeWidth:1},s=/[A-Z]|^ms/g,c=/_EMO_([^_]+?)_([^]*?)_EMO_/g,l=function(e){return 45===e.charCodeAt(1)},u=function(e){return null!=e&&"boolean"!=typeof e},d=(r=function(e){return l(e)?e:e.replace(s,"-$&").toLowerCase()},o=Object.create(null),function(e){return void 0===o[e]&&(o[e]=r(e)),o[e]}),p=function(e,t){switch(e){case"animation":case"animationName":if("string"==typeof t)return t.replace(c,function(e,t,n){return i={name:t,styles:n,next:i},t})}return 1===a[e]||l(e)||"number"!=typeof t||0===t?t:t+"px"};function f(e,t,n){if(null==n)return"";if(void 0!==n.__emotion_styles)return n;switch(typeof n){case"boolean":return"";case"object":if(1===n.anim)return i={name:n.name,styles:n.styles,next:i},n.name;if(void 0!==n.styles){var r=n.next;if(void 0!==r)for(;void 0!==r;)i={name:r.name,styles:r.styles,next:i},r=r.next;return n.styles+";"}return function(e,t,n){var r="";if(Array.isArray(n))for(var o=0;o=4;++r,o-=4)t=(65535&(t=255&e.charCodeAt(r)|(255&e.charCodeAt(++r))<<8|(255&e.charCodeAt(++r))<<16|(255&e.charCodeAt(++r))<<24))*1540483477+((t>>>16)*59797<<16),t^=t>>>24,n=(65535&t)*1540483477+((t>>>16)*59797<<16)^(65535&n)*1540483477+((n>>>16)*59797<<16);switch(o){case 3:n^=(255&e.charCodeAt(r+2))<<16;case 2:n^=(255&e.charCodeAt(r+1))<<8;case 1:n^=255&e.charCodeAt(r),n=(65535&n)*1540483477+((n>>>16)*59797<<16)}return n^=n>>>13,(((n=(65535&n)*1540483477+((n>>>16)*59797<<16))^n>>>15)>>>0).toString(36)}(a)+l,styles:a,next:i}}},82668:function(e,t,n){"use strict";var r,o=n(2784);(r||(r=n.t(o,2))).useInsertionEffect&&(r||(r=n.t(o,2))).useInsertionEffect||o.useLayoutEffect},86570:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return n(64270)}])},28550:function(e,t,n){"use strict";n.d(t,{U:function(){return s}});var r=n(52322),o=n(40489),i=n(5874),a=n.n(i);function s(e){let{className:t,...n}=e;return(0,r.jsx)("div",{className:(0,o.Z)(a().section,t),...n})}},69351:function(e,t,n){"use strict";n.d(t,{T:function(){return p}});var r=n(52322),o=n(39097),i=n.n(o),a=n(40489),s=n(79289),c=n(1767),l=n(48158),u=n(41601),d=n.n(u);function p(e){return(0,r.jsxs)(i(),{href:"/",className:(0,a.Z)(d().logo,s.C.auto),"aria-label":"Mantine",children:[(0,r.jsx)(c.T,{children:"Welcome to Mantine, React components library that you always wished for"}),(0,r.jsx)(l.D,{size:30,...e})]})}},89793:function(e,t,n){"use strict";n.d(t,{g:function(){return s}});var r=n(52322),o=n(96242),i=n(58898),a=n(28550);function s(e){let{data:t,head:n}=e,s=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)}),c=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:[c&&(0,r.jsx)(o.i.Thead,{children:(0,r.jsx)(o.i.Tr,{children:c})}),(0,r.jsx)(o.i.Tbody,{children:s})]})})})})}},52905:function(e,t,n){"use strict";n.d(t,{yp:function(){return c},gw:function(){return eN.g},Ec:function(){return B},NV:function(){return $},Cu:function(){return eJ},an:function(){return b}});var r=n(52322),o=n(40489),i=n(80508),a=n(49603),s=n.n(a);function c(e){let{className:t,...n}=e;return(0,r.jsx)(i.P,{className:(0,o.Z)(s().code,t),...n})}function l(e){let{children:t}=e;return(0,r.jsx)(c,{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 u=n(9705),d=n(94120),p=n(79289),f=n(63409),m=n(78574);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 g=n(77689),v=n.n(g);function b(e){let{id:t,children:n,order:i=2,...a}=e,{copied:s,copy:c,reset:l}=(0,m.V)();return 1===i?(0,r.jsx)(d.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":i,className:v().offset}),(0,r.jsxs)(d.D,{order:i,className:v().title,...a,children:[(0,r.jsx)("a",{className:(0,o.Z)(v().link,p.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:()=>c("".concat(window.location.origin).concat(window.location.pathname,"#").concat(t)),onMouseLeave:l,title:s?"✓ Copied to clipboard":"Copy link",children:s?(0,r.jsx)(u.Z,{className:v().copyIcon}):(0,r.jsx)(h,{className:v().copyIcon})})]})]})}let y=e=>t=>(0,r.jsx)(b,{order:e,...t}),x={div:"HTMLDivElement",button:"HTMLButtonElement",input:"HTMLInputElement",textarea:"HTMLTextAreaElement",select:"HTMLSelectElement",a:"HTMLAnchorElement"};function k(e){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(b,{id:"get-element-ref",children:"Get element ref"}),(0,r.jsx)(c,{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 w=n(55709),j=n(48671),C=n(68755),S=n(94856),I=n(20754),M=n(73057),T=n.n(M);function E(e){let{className:t,...n}=e,i=(0,C.rZ)();return(0,r.jsx)(S.V,{className:(0,o.Z)(T().root,t),icon:(0,r.jsx)(j.Z,{className:T().icon}),radius:"md",__vars:{"--docs-bq-code-bg-light":(0,I.m)(i.colors.blue[6],.2),"--docs-bq-code-bg-dark":(0,I.m)(i.colors.blue[4],.2)},...n})}var P=n(39097),R=n.n(P),N=n(71873),_=n(23233),F=n.n(_);function B(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)(N.e,{className:F().link,href:t,...n}):(0,r.jsx)(N.e,{className:F().link,component:R(),href:o,...n})}var A=n(45909),L=n(32481),D=n.n(L);function $(e){let{className:t,...n}=e;return(0,r.jsx)("p",{className:(0,o.Z)(D().paragraph,t),...n})}function z(e){let{className:t,...n}=e;return(0,r.jsx)("ul",{className:(0,o.Z)(D().ul,t),...n})}function H(e){let{className:t,...n}=e;return(0,r.jsx)("li",{className:(0,o.Z)(D().li,t),...n})}function O(e){return(0,r.jsx)(A.E,{...e})}function Z(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)(O,{children:e.component})," is a"," ",(0,r.jsx)(B,{href:"/guides/polymorphic/",children:"polymorphic component"})," – its default root element is ",(0,r.jsx)(O,{children:e.defaultElement}),", but it can be changed to any other element or component with ",(0,r.jsx)(O,{children:"component"})," prop:"]}),(0,r.jsx)(c,{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)(O,{children:"component"})," prop, for example, Next.js"," ",(0,r.jsx)(O,{children:"Link"}),":"]}),(0,r.jsx)(c,{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)(E,{icon:(0,r.jsx)(w.s,{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)(O,{children:[e.component,"Props"]})," does not extend"," ",(0,r.jsxs)(O,{children:["React.ComponentPropsWithoutRef","'<'","div","'>'"]})," ","although ",(0,r.jsx)(O,{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)(O,{children:"component"})," prop), then your component props interface should extend HTML element props, for example:"," "]}),(0,r.jsx)(c,{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)(O,{children:"createPolymorphicComponent"})," function described in"," ",(0,r.jsx)(B,{href:"/guides/polymorphic/",children:"this guide"}),"."]})]})]})}let V=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}"),G=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}"),W=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 Y(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)(O,{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)(c,{code:V(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)(O,{children:"ref"})," prop:"]}),(0,r.jsx)(c,{code:G(t),language:"tsx"}),(0,r.jsxs)($,{children:["Use ",(0,r.jsx)(O,{children:"forwardRef"})," function to forward ref to root element:"]}),(0,r.jsx)(c,{code:W(t),language:"tsx"})]})}function q(e){let{component:t,element:n}=e;return(0,r.jsxs)($,{children:[(0,r.jsx)(O,{children:t})," component supports ",(0,r.jsx)(B,{href:"/core/input",children:"Input"})," ","and ",(0,r.jsx)(B,{href:"/core/input",children:"Input.Wrapper"})," components features and all"," ",(0,r.jsx)(O,{children:n})," element props. ",(0,r.jsx)(O,{children:t})," documentation does not include all features supported by the component – see"," ",(0,r.jsx)(B,{href:"/core/input",children:"Input"})," documentation to learn about all available features."]})}let K=(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"),U=(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'),X=(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 J(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)(O,{children:e.component})," is used without ",(0,r.jsx)(O,{children:"label"})," prop, it will not be announced properly by screen reader:"]}),(0,r.jsx)(c,{code:K(e.component,t),language:"tsx"}),(0,r.jsxs)($,{children:["Set ",(0,r.jsx)(O,{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)(c,{code:U(e.component,t),language:"tsx"}),(0,r.jsxs)($,{children:["If ",(0,r.jsx)(O,{children:"label"})," prop is set, input will be accessible it is not required to set"," ",(0,r.jsx)(O,{children:"aria-label"}),":"]}),(0,r.jsx)(c,{code:X(e.component,t),language:"tsx"})]})}function Q(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)(O,{children:t})," uses"," ",(0,r.jsx)(B,{href:"https://caniuse.com/flexbox-gap",children:"flexbox gap"})," to add spacing between children. In older browsers, ",(0,r.jsx)(O,{children:t})," children may not have spacing. You can install PostCSS"," ",(0,r.jsx)(B,{href:"https://github.com/gavinmcfarland/flex-gap-polyfill",children:"flex-gap-polyfill"})," ","to add support for older browsers."]})]})}function ee(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)(O,{children:"variant"})," prop is set to ",(0,r.jsx)(O,{children:"gradient"}),", you can control gradient with ",(0,r.jsx)(O,{children:"gradient"})," prop, it accepts an object with"," ",(0,r.jsx)(O,{children:"from"}),", ",(0,r.jsx)(O,{children:"to"})," and ",(0,r.jsx)(O,{children:"deg"})," properties. If the",(0,r.jsx)(O,{children:"gradient"})," prop is not set, ",(0,r.jsx)(O,{children:t})," will use"," ",(0,r.jsx)(O,{children:"theme.defaultGradient"})," which can be configured on the"," ",(0,r.jsx)(B,{href:"/theming/theme-object",children:"theme object"}),". ",(0,r.jsx)(O,{children:"gradient"})," ","prop is ignored when ",(0,r.jsx)(O,{children:"variant"})," is not ",(0,r.jsx)(O,{children:"gradient"}),"."]}),(0,r.jsxs)($,{children:["Note that ",(0,r.jsx)(O,{children:'variant="gradient"'})," supports only linear gradients with two colors. If you need a more complex gradient, then use"," ",(0,r.jsx)(B,{href:"/styles/styles-api",children:"Styles API"})," to modify"," ",(0,r.jsx)(O,{children:t})," styles."]})]})}function et(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)(O,{children:t})," supports"," ",(0,r.jsx)(B,{href:"/styles/styles-api/",children:"Styles API"}),", you can add styles to any inner element of the component with",(0,r.jsx)(O,{children:"classNames"})," prop. Follow"," ",(0,r.jsx)(B,{href:"/styles/styles-api/",children:"Styles API"})," documentation to learn more."]})]})}var en=n(79797),er=n(90982),eo=n(96242),ei=n(8582),ea=n(17115),es=n(40586);let ec=[{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:"next",name:"next-tailwind-template",link:"https://github.com/hasib-rashid/next-app-tailwind-template",description:"Next.js app router + Mantine + Tailwind template"},{type:"next",name:"next-bun-template",link:"https://github.com/KennethAduan/kenstack-bun-nextjs-mantine/",description:"Next.js app router + Mantine + Bun 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"},{type:"vite",name:"dashboard-template",link:"https://github.com/auronvila/mantine-template",description:"Vite + Redux + i18next + auth + Mantine dashboard template"},{type:"vite",name:"supabase-template",link:"https://github.com/LanVukusic/mantine-supabase-template",description:"Vite + Supabase + Mantine template"}],el=[{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 eu=n(42975),ed=n.n(eu);function ep(e){let{type:t,name:n,community:o=!1}=e,i=o?ec:el,a=(n?i.filter(e=>n.includes(e.name)):t?i.filter(e=>e.type===t):i).map(e=>{let t=es.mZ[e.type];return(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Td,{className:ed().iconCell,w:70,children:(0,r.jsx)("div",{className:ed().icon,"data-type":e.type,children:(0,r.jsx)(t,{})})}),(0,r.jsxs)(eo.i.Td,{children:[(0,r.jsx)(ei.x,{fz:"sm",fw:500,children:e.name}),(0,r.jsx)(ei.x,{fz:"xs",children:e.description})]}),(0,r.jsx)(eo.i.Td,{w:146,children:(0,r.jsx)(ea.z,{component:"a",href:e.link,target:"_blank",size:"xs",variant:"default",rightSection:(0,r.jsx)(en.Z,{stroke:1.5,className:ed().externalLinkIcon}),children:"Use template"})})]},e.name)});return(0,r.jsx)(eo.i,{highlightOnHover:!0,verticalSpacing:"sm",layout:"fixed",children:(0,r.jsxs)(eo.i.Tbody,{children:[o&&(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Td,{className:ed().iconCell,w:70,children:(0,r.jsx)("div",{className:ed().icon,"data-type":"empty",children:(0,r.jsx)(er.Z,{stroke:1.5,size:40})})}),(0,r.jsxs)(eo.i.Td,{children:[(0,r.jsx)(ei.x,{fz:"sm",fw:500,children:"Your template here"}),(0,r.jsx)(ei.x,{fz:"xs",children:"Create a template with your stack and share it with the community"})]}),(0,r.jsx)(eo.i.Td,{w:146,children:(0,r.jsx)(ea.z,{component:R(),href:"/submit-template/",size:"xs",children:"Submit template"})})]}),a]})})}function ef(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)(B,{href:"/styles/postcss-preset",children:"PostCSS setup"}),","," ",(0,r.jsx)(B,{href:"/theming/color-schemes",children:"ColorSchemeScript"})," and other essential features. Some templates also include additional features like"," ",(0,r.jsx)(B,{href:"/guides/jest",children:"Jest"}),","," ",(0,r.jsx)(B,{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)(B,{href:"/templates-usage",children:"this page"}),"."]}),(0,r.jsx)(ep,{type:t})]})}function em(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)(O,{children:t})," is an ",(0,r.jsx)("b",{children:"opinionated"})," component built on top of"," ",(0,r.jsx)(B,{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)(B,{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)(B,{href:"/combobox/?e=BasicSelect",children:"the examples page"}),"."]})]})}let eh=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," data={['React', 'Angular']} />;\n}\n"),eg=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"),ev=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"),eb=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 ey(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)(O,{children:t})," ",(0,r.jsx)(O,{children:"data"})," prop accepts data in one of the following formats:"]}),(0,r.jsx)($,{children:"Array of strings:"}),(0,r.jsx)(c,{language:"tsx",code:eh(t)}),n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)($,{children:["Array of object with ",(0,r.jsx)(O,{children:"value"}),", ",(0,r.jsx)(O,{children:"label"})," and optional"," ",(0,r.jsx)(O,{children:"disabled"})," keys:"]}),(0,r.jsx)(c,{language:"tsx",code:eg(t)})]}),(0,r.jsx)($,{children:"Array of groups with string options:"}),(0,r.jsx)(c,{language:"tsx",code:ev(t)}),n&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)($,{children:"Array of groups with object options:"}),(0,r.jsx)(c,{language:"tsx",code:eb(t)})]})]})}function ex(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)(O,{children:"limit"})," prop. Note that if you use a custom ",(0,r.jsx)(O,{children:"filter"})," function, you need to implement your own logic to limit the number of options in ",(0,r.jsx)(O,{children:"filter"})]}),(0,r.jsxs)($,{children:["Example of ",(0,r.jsx)(O,{children:t})," with 100 000 options, 5 options are rendered at the same time:"]})]})}function ek(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)(O,{children:t})," filters options by checking if the option label contains input value. You can change this behavior with ",(0,r.jsx)(O,{children:"filter"})," prop.",(0,r.jsx)(O,{children:"filter"})," function receives an object with the following properties as a single argument:",(0,r.jsxs)(z,{children:[(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"options"})," – array of options or options groups, all options are in"," ",(0,r.jsx)(O,{children:"{ value: string; label: string; disabled?: boolean }"})," format"]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"search"})," – current search query"]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"limit"})," – value of ",(0,r.jsx)(O,{children:"limit"})," prop passed to"," ",(0,r.jsx)(O,{children:t})]})]}),(0,r.jsx)($,{children:"Example of a custom filter function that matches options by words instead of letters sequence:"})]})}let ew=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," comboboxProps={{ withinPortal: false }} data={[]} />;\n}\n"),ej=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," comboboxProps={{ zIndex: 1000 }} data={[]} />;\n}\n");function eC(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)(B,{href:"/core/combobox",children:"Combobox"})," props with"," ",(0,r.jsx)(O,{children:"comboboxProps"}),". It is useful when you need to change some of the props that are not exposed by ",(0,r.jsx)(O,{children:t}),", for example"," ",(0,r.jsx)(O,{children:"withinPortal"}),":"]}),(0,r.jsx)(c,{language:"tsx",code:ew(t)}),(0,r.jsx)(b,{id:"change-z-index",children:"Change dropdown z-index"}),(0,r.jsx)(c,{language:"tsx",code:ej(t)})]})}function eS(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)(O,{children:t})," is not compatible with React server components as it requires function as children. To use ",(0,r.jsx)(O,{children:t})," add"," ",(0,r.jsx)(O,{children:'"use client;"'})," at the top of the file."]})]})}let eI=e=>"\nimport { ".concat(e," } from '@mantine/core';\n\nfunction Demo() {\n return <").concat(e," wrapperProps={{ 'data-testid': 'wrapper' }} data-testid=\"input\" />;\n}\n");function eM(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)(O,{children:"wrapperProps"}),". In the following example:"]}),(0,r.jsxs)(z,{children:[(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:'data-testid="wrapper"'})," is added to the root element"]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:'data-testid="input"'})," is added to the input element"]})]}),(0,r.jsx)(c,{code:eI(t),language:"tsx"})]})}function eT(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)(O,{children:t})," supports ",(0,r.jsx)(O,{children:"leftSection"})," and"," ",(0,r.jsx)(O,{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)(z,{children:[(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"rightSection"}),"/",(0,r.jsx)(O,{children:"leftSection"})," – React node to render on the corresponding side of input"]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"rightSectionWidth"}),"/",(0,r.jsx)(O,{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)(O,{children:"size"})," prop."]}),(0,r.jsxs)(H,{children:[(0,r.jsx)(O,{children:"rightSectionPointerEvents"}),"/",(0,r.jsx)(O,{children:"leftSectionPointerEvents"})," – controls ",(0,r.jsx)(O,{children:"pointer-events"})," property of the section. If you want to render a non-interactive element, set it to ",(0,r.jsx)(O,{children:"none"})," to pass clicks through to the input."]})]})]})}function eE(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)(O,{children:t})," supports ",(0,r.jsx)(O,{children:"autoContrast"})," prop and"," ",(0,r.jsx)(B,{href:"/theming/theme-object/#autocontrast",children:"theme.autoContrast"}),". If"," ",(0,r.jsx)(O,{children:"autoContrast"})," is set either on ",(0,r.jsx)(O,{children:t})," or on theme, content color will be adjusted to have sufficient contrast with the value specified in"," ",(0,r.jsx)(O,{children:"color"})," prop."]}),(0,r.jsxs)($,{children:["Note that ",(0,r.jsx)(O,{children:"autoContrast"})," feature works only if you use"," ",(0,r.jsx)(O,{children:"color"})," prop to change background color.",n&&(0,r.jsxs)(r.Fragment,{children:[" ",(0,r.jsx)(O,{children:"autoContrast"})," works only with ",(0,r.jsx)(O,{children:"filled"})," variant."]})]})]})}var eP=n(45392),eR=n(25777),eN=n(89793),e_=n(58898);function eF(e){let{label:t,link:n}=e;return(0,r.jsx)(ea.z,{component:"a",href:n,target:"_blank",rightSection:(0,r.jsx)(en.Z,{style:{width:(0,e_.h)(18),height:(0,e_.h)(18)},stroke:1.5}),fullWidth:!0,justify:"space-between",h:50,px:20,radius:"md",children:t})}var eB=n(97654),eA=n(28559);function eL({size:e,style:t,...n}){return(0,r.jsxs)(eA.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",style:[{width:(0,e_.h)(e),height:(0,e_.h)(e)},t],...n,children:[(0,r.jsx)("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"}),(0,r.jsx)("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 eD=n(82106),e$=n(44964),ez=n(70555),eH=n.n(ez);function eO(e){let{yarnScript:t,npmScript:n}=e,[o,i]=(0,eB.I)({key:"script-tab",defaultValue:0});return(0,r.jsx)(e$.Q,{classNames:{root:eH().root},activeTab:o,onTabChange:i,code:[{fileName:"yarn",code:t,language:"bash",icon:(0,r.jsx)(eL,{className:eH().icon,size:16})},{fileName:"npm",code:n,language:"bash",icon:(0,r.jsx)(eD._,{className:eH().icon,size:16})}]})}function eZ(e){let{packages:t,dev:n}=e;return(0,r.jsx)(eO,{yarnScript:"yarn add ".concat(n?"--dev ":"").concat(t),npmScript:"npm install ".concat(n?"--save-dev ":"").concat(t)})}var eV=n(83795);function eG(e){let{data:t}=e,n=t.some(e=>e.condition),o=t.map((e,t)=>(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Td,{children:(0,r.jsx)(eV.T,{children:e.key})}),(0,r.jsx)(eo.i.Td,{children:e.description}),n&&(0,r.jsx)(eo.i.Td,{children:e.condition?(0,r.jsx)(A.E,{children:e.condition}):"–"})]},t));return(0,r.jsx)("div",{style:{overflowX:"auto"},children:(0,r.jsx)("div",{style:{minWidth:(0,e_.h)(500)},children:(0,r.jsxs)(eo.i,{verticalSpacing:"md",children:[(0,r.jsx)(eo.i.Thead,{children:(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Td,{children:"Key"}),(0,r.jsx)(eo.i.Td,{children:"Description"}),n&&(0,r.jsx)(eo.i.Td,{children:"Condition"})]})}),(0,r.jsx)("tbody",{children:o})]})})})}var eW=n(2784),eY=n(95047);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 eK=n(38062),eU=n.n(eK);function eX(e){let{extraPackages:t=[]}=e,[n,o]=(0,eW.useState)(["@mantine/core","@mantine/hooks"]),i=e=>o(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e]),a=eq.map(e=>(0,r.jsxs)(eo.i.Tr,{className:eU().row,onClick:()=>i(e.package),children:[(0,r.jsx)(eo.i.Td,{children:(0,r.jsx)(eY.X,{checked:n.includes(e.package),onChange:()=>{},className:eU().checkbox})}),(0,r.jsx)(eo.i.Td,{children:(0,r.jsx)(A.E,{children:e.package})}),(0,r.jsx)(eo.i.Td,{className:eU().hiddenMobile,children:(0,r.jsx)(ei.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)(eo.i,{mb:"xl",children:[(0,r.jsx)(eo.i.Thead,{children:(0,r.jsxs)(eo.i.Tr,{children:[(0,r.jsx)(eo.i.Th,{children:(0,r.jsx)(eY.X,{onChange:()=>o(e=>e.length===eq.length?[]:eq.map(e=>e.package)),checked:n.length>0,indeterminate:n.length0})}),(0,r.jsx)(eo.i.Th,{children:"Package"}),(0,r.jsx)(eo.i.Th,{className:eU().hiddenMobile,children:"Description"})]})}),(0,r.jsx)("tbody",{children:a})]}),(0,r.jsx)($,{children:"Install dependencies:"}),(0,r.jsx)(eZ,{packages:Array.from(new Set(["@mantine/core","@mantine/hooks",...n.reduce((e,t)=>(e.push(...eq.find(e=>e.package===t).dependencies),e),[]),...t])).join(" ")})]})}function eJ(e){let{children:t}=e;return(0,r.jsx)(eP.Z,{components:{Demo:eR.B,GetElementRef:k,Polymorphic:Z,InputFeatures:q,InputAccessibility:J,FlexboxGapSupport:Q,Gradient:ee,StylesApiSelectors:et,DataTable:eN.g,TargetComponent:Y,KeyboardEventsTable:eG,InstallScript:eZ,PackagesInstallation:eX,NpmScript:eO,TemplatesList:ep,GetTemplates:ef,ComboboxDisclaimer:em,ComboboxData:ey,ComboboxLargeData:ex,ComboboxFiltering:ek,ComboboxProps:eC,ServerComponentsIncompatible:eS,ExamplesButton:eF,WrapperProps:eM,InputSections:eT,AutoContrast:eE,pre:l,h1:y(1),h2:y(2),h3:y(3),h4:y(4),h5:y(5),h6:y(6),a:B,p:$,li:H,ul:z,blockquote:E,code:O},children:t})}},20233:function(e,t,n){"use strict";n.d(t,{o:function(){return p},m:function(){return d}});var r=n(52322),o=n(5632),i=n(27111),a=n(58898),s=n(91349),c=n(72278),l=n(15019);let[u,d]=(0,s.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)(c.$,{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..."}})}},47196:function(e,t,n){"use strict";n.d(t,{N:function(){return eR}});var r=n(52322),o=n(9341),i=n(79797),a=n(92536),s=n(40489),c=n(36761),l=n(8582),u=n(50357),d=n(63409),p=n(45909),f=n(93010),m=n(28559),h=n(23205),g=n(893),v=n(90664),b=n(19289),y=n(58092),x=n(68893);let k=(0,n(11306).F)(function({tooltip:e,className:t,"aria-label":n,...o}){return(0,r.jsx)(g.u,{label:e,children:(0,r.jsx)(d.k,{className:(0,s.Z)("m_18a11a80",t),"aria-label":n||e,...o})})});var w="m_83c3d5d1";function j(){let{setColorScheme:e}=(0,y.X)(),t=(0,x.l)("light",{getInitialValueInEffect:!0});return(0,r.jsxs)(k,{onClick:()=>e("light"===t?"dark":"light"),tooltip:`${"dark"===t?"Light":"Dark"} mode`,"aria-label":"Toggle color scheme",children:[(0,r.jsx)(v.Z,{className:(0,s.Z)(w,"m_f4e3c6be"),stroke:1.5}),(0,r.jsx)(b.Z,{className:(0,s.Z)(w,"m_83c188ce"),stroke:1.5})]})}var C=n(40991),S=n(47608),I=n(89027),M=n(58898);function T(){let{toggleDirection:e,dir:t}=(0,I.gm)();return(0,r.jsx)(k,{onClick:()=>e(),tooltip:`${"ltr"===t?"RTL":"LTR"} direction`,children:"rtl"===t?(0,r.jsx)(C.Z,{style:{width:(0,M.h)(22),height:(0,M.h)(22),pointerEvents:"none"},stroke:1.5}):(0,r.jsx)(S.Z,{style:{width:(0,M.h)(22),height:(0,M.h)(22),pointerEvents:"none"},stroke:1.5})})}var E=n(51878);function P({link:e}){return(0,r.jsx)(k,{tooltip:"Discord",component:"a",href:e,className:"m_19df8210",children:(0,r.jsx)(E.D,{size:20})})}var R=n(13444);function N({link:e}){return(0,r.jsx)(k,{tooltip:"Source code",component:"a",href:e,children:(0,r.jsx)(R.E,{size:22})})}var _=n(27111);function F({className:e,...t}){return(0,r.jsx)(d.k,{...t,className:(0,s.Z)("m_6e98493a",e),children:(0,r.jsxs)(f.Z,{gap:"xs",children:[(0,r.jsx)(_.Z,{style:{width:(0,M.h)(15),height:(0,M.h)(15)},stroke:1.5}),(0,r.jsx)(l.x,{fz:"sm",c:"dimmed",pr:80,children:"Search"}),(0,r.jsx)(l.x,{fw:700,className:"m_602cb89e",children:"Ctrl + K"})]})})}function B({onSearch:e,githubLink:t,withDirectionToggle:n=!0,withSearch:o=!0,withGithub:i=!0,withDiscord:a=!0,withColorScheme:s=!0,discordLink:c,...l}){return(0,r.jsx)(g.u.Group,{openDelay:600,closeDelay:100,children:(0,r.jsxs)(f.Z,{gap:"xs",...l,children:[o&&(0,r.jsx)(F,{onClick:e}),a&&(0,r.jsx)(P,{link:c}),i&&(0,r.jsx)(N,{link:t}),n&&(0,r.jsx)(T,{}),s&&(0,r.jsx)(j,{})]})})}function A({onSearch:e}){return(0,r.jsx)(k,{onClick:()=>e(),tooltip:"Search",children:(0,r.jsx)(_.Z,{style:{width:(0,M.h)(22),height:(0,M.h)(22)},stroke:1.5})})}let L=[{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 D=n(10962),$=n(69351),z=n(20233),H=n(36528),O=n.n(H);function Z(e){let{navbarOpened:t,onNavbarToggle:n,headerControlsProps:o}=e,g=L.map(e=>(0,r.jsxs)(c.v.Item,{component:"a",href:e.link,target:"_blank",rightSection:(0,r.jsx)(i.Z,{className:O().versionExternalIcon,stroke:1.5}),children:[(0,r.jsx)("b",{children:e.v})," ",(0,r.jsxs)(l.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)(O().header,u.Z.classNames.fullWidth),"data-desktop":!0,children:[(0,r.jsxs)("div",{className:O().logo,children:[(0,r.jsx)($.T,{}),(0,r.jsxs)(c.v,{width:180,withinPortal:!1,children:[(0,r.jsx)(c.v.Target,{children:(0,r.jsx)(d.k,{children:(0,r.jsxs)(p.E,{fw:"bold",className:O().version,children:[(0,r.jsx)("span",{children:"7.10.1"}),(0,r.jsx)(a.Z,{className:O().versionChevron,stroke:1.5})]})})}),(0,r.jsx)(c.v.Dropdown,{children:g})]})]}),(0,r.jsx)(B,{className:O().controls,onSearch:z.m.open,githubLink:"https://github.com/mantinedev/mantine",discordLink:D.$.discordLink,...o})]}),(0,r.jsx)("header",{className:(0,s.Z)(O().header,u.Z.classNames.fullWidth),"data-mobile":!0,children:(0,r.jsxs)(f.Z,{justify:"space-between",w:"100%",wrap:"nowrap",children:[(0,r.jsx)(m.x,{miw:80,children:(0,r.jsx)(h.O,{opened:t,onClick:n,size:"sm","aria-label":"Toggle navbar"})}),(0,r.jsx)($.T,{}),(0,r.jsxs)(f.Z,{gap:"sm",children:[(0,r.jsx)(A,{onSearch:z.m.open}),(0,r.jsx)(j,{})]})]})})]})}var V=n(73681),G=(0,V.Z)("outline","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"}]]),W=n(59443),Y=(0,V.Z)("outline","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"}]]),q=(0,V.Z)("outline","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,V.Z)("outline","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"}]]),U=(0,V.Z)("outline","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"}]]),X=n(38405),J=n(15019),Q=n(2784),ee=n(39097),et=n.n(ee),en=n(5632),er=(0,V.Z)("outline","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(97189),ei=(0,V.Z)("outline","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,V.Z)("outline","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"}]]),es=n(4680),ec=(0,V.Z)("outline","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(59660),eu=n(43300),ed=(0,V.Z)("outline","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,V.Z)("outline","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"}]]),ef=(0,V.Z)("outline","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"}]]),em=(0,V.Z)("outline","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"}]]),eh=(0,V.Z)("outline","selector","IconSelector",[["path",{d:"M8 9l4 -4l4 4",key:"svg-0"}],["path",{d:"M16 15l-4 4l-4 -4",key:"svg-1"}]]);let eg={"State management":er,"UI and Dom":eo.Z,Utilities:ei,Lifecycle:ea,"Data display":es.Z,overlays:ec,navigation:el.Z,inputs:eo.Z,misc:eu.Z,feedback:ed,typography:ep,layout:ef,buttons:em,combobox:eh};var ev=n(10968),eb=n.n(ev);function ey(e){return"category"in e}function ex(e,t){return e.pages.some(e=>ey(e)?e.pages.some(e=>e.slug===t):e.slug===t)}function ek(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:eb().link,onClick:n,ref:o,children:t.title})}function ew(e){let{data:t,onNavbarClose:n}=e,o=(0,en.useRouter)(),[i,s]=(0,Q.useState)(ex(t,o.pathname)),c=(0,Q.useRef)({}),u=e=>{let t=c.current[e];if(!t)return;let n=window.innerHeight,{top:r,bottom:o}=t.getBoundingClientRect();(r<60||o>n)&&t.scrollIntoView({block:"center"})};(0,Q.useEffect)(()=>{ex(t,o.pathname)&&(s(!0),setTimeout(()=>u(o.pathname),10))},[o.pathname]);let p=t.pages.map(e=>{if(ey(e)){let t=e.pages.sort((e,t)=>e.title.localeCompare(t.title)).map(e=>(0,r.jsx)(ek,{data:e,onNavbarClose:n,linkRef:t=>{c.current[e.slug]=t}},e.slug)),o=eg[e.category];return(0,r.jsxs)("div",{className:eb().category,children:[(0,r.jsxs)(l.x,{className:eb().categoryTitle,children:[(0,r.jsx)(o,{className:eb().categoryIcon}),e.category]}),t]},e.category)}return(0,r.jsx)(ek,{data:e,onNavbarClose:n,linkRef:t=>{c.current[e.slug]=t}},e.slug)});return(0,r.jsxs)(m.x,{className:eb().group,mod:{opened:i},children:[(0,r.jsxs)(d.k,{className:eb().header,onClick:()=>s(e=>!e),children:[(0,r.jsx)(a.Z,{className:eb().chevron,"data-collapsed":!i||void 0}),(0,r.jsx)(l.x,{className:eb().title,children:t.group.replace("-"," ")})]}),i&&p]})}var ej=n(80275),eC=n.n(ej);function eS(e){let{href:t,external:n,children:o,icon:a,onNavbarClose:s}=e,c=(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:c.pathname===t},onClick:s,children:[(0,r.jsx)("span",{className:eC().icon,children:a}),(0,r.jsx)("span",{className:eC().label,children:o}),n&&(0,r.jsx)("span",{className:eC().external,children:(0,r.jsx)(i.Z,{size:14})})]})}var eI=n(3968),eM=n.n(eI);function eT(e){let{navbarOpened:t,onNavbarClose:n,mobileNavbarOnly:o}=e,{dir:i}=(0,I.gm)(),a=J.kl.map(e=>(0,r.jsx)(ew,{data:e,onNavbarClose:n},e.group));return(0,r.jsx)(m.x,{id:"mantine-navbar",component:"nav",className:(0,s.Z)(eM().navbar,{[u.Z.classNames.zeroRight]:"rtl"===i}),mod:{hidden:!t,"mobile-only":o},children:(0,r.jsx)(X.x,{className:eM().scrollarea,type:"never",offsetScrollbars:!1,children:(0,r.jsxs)("div",{className:eM().body,children:[(0,r.jsx)(eS,{icon:(0,r.jsx)(G,{style:{width:(0,M.h)(25),height:(0,M.h)(25)},stroke:1.5}),href:"/getting-started",onNavbarClose:n,children:"Getting started"}),(0,r.jsx)(eS,{icon:(0,r.jsx)(W.Z,{style:{width:(0,M.h)(25),height:(0,M.h)(25)},stroke:1.5}),href:"/about",onNavbarClose:n,children:"About Mantine"}),(0,r.jsx)(eS,{icon:(0,r.jsx)(Y,{style:{width:(0,M.h)(25),height:(0,M.h)(25)},stroke:1.5}),href:"/overview",onNavbarClose:n,children:"API Overview"}),(0,r.jsx)(eS,{icon:(0,r.jsx)(q,{style:{width:(0,M.h)(25),height:(0,M.h)(25)},stroke:1.5}),href:"/contribute",onNavbarClose:n,children:"Contribute"}),(0,r.jsx)(eS,{icon:(0,r.jsx)(K,{style:{width:(0,M.h)(22),height:(0,M.h)(22)},stroke:1.5}),href:"/colors-generator",onNavbarClose:n,children:"Colors generator"}),(0,r.jsx)(eS,{external:!0,icon:(0,r.jsx)(U,{style:{width:(0,M.h)(22),height:(0,M.h)(22)},stroke:1.5}),href:"https://help.mantine.dev",onNavbarClose:n,children:"Help center"}),(0,r.jsx)(eS,{external:!0,icon:(0,r.jsx)(W.Z,{style:{width:(0,M.h)(22),height:(0,M.h)(22)},stroke:1.5}),href:"https://ui.mantine.dev",onNavbarClose:n,children:"Mantine UI"}),(0,r.jsx)("div",{className:eM().groups,children:a})]})})})}var eE=n(29475),eP=n.n(eE);function eR(e){let{children:t,withNavbar:n=!0,mobileNavbarOnly:i=!1,navbarOpened:a,onNavbarOpenedChange:s,headerControlsProps:c}=e,[l,u]=(0,o.C)({value:a,defaultValue:!1,finalValue:!1,onChange:s});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(Z,{navbarOpened:l,onNavbarToggle:()=>u(!l),headerControlsProps:c}),n&&(0,r.jsx)(eT,{navbarOpened:l,onNavbarClose:()=>u(!1),mobileNavbarOnly:i}),(0,r.jsx)("main",{className:eP().main,id:"mdx",style:{paddingLeft:n&&!i?void 0:0,paddingRight:n&&!i?void 0:0},children:t})]})}},40586:function(e,t,n){"use strict";n.d(t,{mZ:function(){return l}});var r=n(52322),o=n(28559),i=n(58898),a=n(42066),s=n.n(a),c=n(2784);let l={next:function(e){let{size:t=40,...n}=e;return(0,r.jsx)(o.x,{component:"svg",__vars:{"--icon-size":(0,i.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,a=(0,c.useId)(),l="vite-a-".concat(a),u="vite-b-".concat(a);return(0,r.jsxs)(o.x,{__vars:{"--icon-size":(0,i.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)(o.x,{__vars:{"--icon-size":(0,i.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)(o.x,{__vars:{"--icon-size":(0,i.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)(o.x,{component:"svg",__vars:{"--icon-size":(0,i.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"})})}}},15019:function(e,t,n){"use strict";n.d(t,{us:function(){return a},kl:function(){return s},YU:function(){return c},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"},Changelog760:{title:"Version v7.6.0",slug:"/changelog/7-6-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.6.0",date:"February 27th, 2024"},Changelog770:{title:"Version v7.7.0",slug:"/changelog/7-7-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.7.0",date:"March 26th, 2024"},Changelog780:{title:"Version v7.8.0",slug:"/changelog/7-8-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.8.0",date:"April 12th, 2024"},Changelog790:{title:"Version v7.9.0",slug:"/changelog/7-9-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.9.0",date:"May 2nd, 2024"},Changelog7100:{title:"Version v7.10.0",slug:"/changelog/7-10-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.10.0",date:"May 23rd, 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:"use-element-size",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"),useMutationObserver:o("useMutationObserver","Subscribe to changes being made to the DOM tree"),useMounted:o("useMounted","Returns true if the component is mounted"),useStateHistory:o("useStateHistory","Move back/forward in state history"),useOrientation:o("useOrientation","Detects device orientation and subscribe to its changes"),useFetch:o("useFetch","Fetch data with built-in loading and error states"),useIsFirstRender:o("useIsFirstRender","Detects if the component is rendered for the first time"),useThrottledState:o("useThrottledState","Throttles state changes"),useThrottledValue:o("useThrottledValue","Throttles value changes"),useThrottledCallback:o("useThrottledCallback","Throttles function calls"),useDebouncedCallback:o("useDebouncedCallback","Debounces function calls"),useSet:o("useSet","Use Set as React state"),useMap:o("useMap","Use Map as React state")},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",search:"A list of all Mantine CSS variables generated by default CSS variables resolver",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},Emotion:{title:"Usage with Emotion",slug:"/styles/emotion",search:"sx props, createStyles, emotion integration",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","CheckboxIndicator","CheckboxCard"],styles:["Checkbox","CheckboxGroup","CheckboxIndicator","CheckboxCard"],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","RadioIndicator","RadioCard"],styles:["Radio","RadioGroup","RadioIndicator","RadioCard"],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"},FloatingIndicator:{title:"FloatingIndicator",package:"@mantine/core",slug:"/core/floating-indicator",props:["FloatingIndicator"],styles:["FloatingIndicator"],description:"Display a floating indicator over a group of elements",import:"import { FloatingIndicator } from '@mantine/core';",source:"@mantine/core/src/components/FloatingIndicator/FloatingIndicator.tsx",docs:"core/floating-indicator.mdx"},Tree:{title:"Tree",package:"@mantine/core",slug:"/core/tree",props:["Tree"],styles:["Tree"],description:"Display a Tree structure",import:"import { Tree } from '@mantine/core';",source:"@mantine/core/src/components/Tree/Tree.tsx",docs:"core/tree.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"},formUncontrolled:{title:"Uncontrolled mode",package:"@mantine/form",slug:"/form/uncontrolled",description:"use-form uncontrolled mode to improve performance",docs:"form/uncontrolled.mdx"},useField:{title:"use-field",package:"@mantine/form",slug:"/form/use-field",description:"use-field hook – manage single field state",docs:"form/use-field.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"},RadarChart:{title:"RadarChart",props:["RadarChart"],styles:["RadarChart"],package:"@mantine/charts",slug:"/charts/radar-chart",description:"Radar chart component",import:"import { RadarChart } from '@mantine/charts';",source:"@mantine/charts/src/RadarChart/RadarChart.tsx",docs:"charts/radar-chart.mdx"},ScatterChart:{title:"ScatterChart",props:["ScatterChart"],styles:["ScatterChart"],package:"@mantine/charts",slug:"/charts/scatter-chart",description:"Radar chart component",import:"import { ScatterChart } from '@mantine/charts';",source:"@mantine/charts/src/ScatterChart/ScatterChart.tsx",docs:"charts/scatter-chart.mdx"}},s=[{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.Emotion,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.useMutationObserver,a.useScrollIntoView,a.useViewportSize,a.useWindowEvent,a.useWindowScroll,a.useInViewport,a.useOrientation]},{category:"State management",pages:[a.useCounter,a.useDebouncedState,a.useDebouncedValue,a.useDebouncedCallback,a.useThrottledState,a.useThrottledValue,a.useThrottledCallback,a.useDisclosure,a.useId,a.useInputState,a.useListState,a.useLocalStorage,a.usePrevious,a.useQueue,a.useSetState,a.useToggle,a.useUncontrolled,a.useValidatedState,a.usePagination,a.useStateHistory,a.useMap,a.useSet]},{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,a.useFetch]},{category:"Lifecycle",pages:[a.useDidUpdate,a.useForceUpdate,a.useIsomorphicEffect,a.useLogger,a.useShallowEffect,a.useMounted,a.useIsFirstRender]}]},{group:"mantine-form",pages:[a.useForm,a.useField,a.formUncontrolled,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,a.Tree]},{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,a.FloatingIndicator]},{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.RadarChart,a.ScatterChart,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.Changelog7100,a.Changelog790,a.Changelog780,a.Changelog770,a.Changelog760,a.Changelog750,a.Changelog740,a.Changelog730,a.Changelog720,a.Changelog710,a.Changelog700,a.AllReleases]}],c=s.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=[...c,...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),[])},64270:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return eN}});var r=n(52322);n(21229),n(31809),n(51377),n(85784),n(55504),n(82521),n(27771),n(47009),n(19406),n(96508),n(31675),n(33465),n(14517),n(70459),n(89355);var o=n(97729),i=n.n(o),a=n(89027),s=n(15759),c=n(29021),l=n(97654),u=n(78297),d=n(2784);function p(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 f(e,t){return(f=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,f(e,t)}n(13980);var h=n(28316),g={disabled:!1},v=d.createContext(null),b="unmounted",y="exited",x="entering",k="entered",w="exiting",j=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=y,r.appearStatus=x):o=k:o=t.unmountOnExit||t.mountOnEnter?b:y,r.state={status:o},r.nextCallback=null,r}m(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&t.status===b?{status:y}: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!==x&&n!==k&&(t=x):(n===x||n===k)&&(t=w)}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===x){if(this.props.unmountOnExit||this.props.mountOnEnter){var n=this.props.nodeRef?this.props.nodeRef.current:h.findDOMNode(this);n&&n.scrollTop}this.performEnter(e)}else this.performExit()}else this.props.unmountOnExit&&this.state.status===y&&this.setState({status:b})},n.performEnter=function(e){var t=this,n=this.props.enter,r=this.context?this.context.isMounting:e,o=this.props.nodeRef?[r]:[h.findDOMNode(this),r],i=o[0],a=o[1],s=this.getTimeouts(),c=r?s.appear:s.enter;if(!e&&!n||g.disabled){this.safeSetState({status:k},function(){t.props.onEntered(i)});return}this.props.onEnter(i,a),this.safeSetState({status:x},function(){t.props.onEntering(i,a),t.onTransitionEnd(c,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:h.findDOMNode(this);if(!t||g.disabled){this.safeSetState({status:y},function(){e.props.onExited(r)});return}this.props.onExit(r),this.safeSetState({status:w},function(){e.props.onExiting(r),e.onTransitionEnd(n.exit,function(){e.safeSetState({status:y},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:h.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===b)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,p(t,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]));return d.createElement(v.Provider,{value:null},"function"==typeof n?n(e,r):d.cloneElement(d.Children.only(n),r))},t}(d.Component);function C(){}function S(){return(S=Object.assign||function(e){for(var t=1;t{var a;let{autoClose:s,message:c,...l}=e,u="number"==typeof(a=e.autoClose)?a:!1!==a&&!1!==n&&n,p=(0,d.useRef)(),f=()=>window.clearTimeout(p.current),m=()=>{t(e.id),f()},h=()=>{"number"==typeof u&&(p.current=window.setTimeout(m,u))};return(0,d.useEffect)(()=>{e.onOpen?.(e)},[]),(0,d.useEffect)(()=>(h(),f),[u]),(0,r.jsx)(V.P,{...o,...l,onClose:m,ref:i,onMouseEnter:f,onMouseLeave:h,children:c})});G.displayName="@mantine/notifications/NotificationContainer";var W=n(60048),Y={root:"m_b37d9ac7",notification:"m_5ed0edd0"};let q={position:"bottom-right",autoClose:4e3,transitionDuration:250,containerWidth:440,notificationMaxHeight:200,limit:5,zIndex:(0,P.w)("overlay"),store:W.Ps,withinPortal:!0},K=(0,R.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,N.h)(r)}}}),U=(0,_.d)((e,t)=>{let n=(0,F.w)("Notifications",q,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,position:u,autoClose:p,transitionDuration:f,containerWidth:m,notificationMaxHeight:h,limit:g,zIndex:v,store:b,portalProps:y,withinPortal:x,...k}=n,w=(0,B.rZ)(),C=(0,W.zn)(b),S=(0,$.N)(),I=(0,z.J)(),M=(0,d.useRef)({}),T=(0,d.useRef)(0),P=w.respectReducedMotion&&I?1:f,R=(0,A.y)({name:"Notifications",classes:Y,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:K});(0,d.useEffect)(()=>{b?.updateState(e=>({...e,limit:g||5}))},[g]),(0,H.l)(()=>{C.notifications.length>T.current&&setTimeout(()=>S(),0),T.current=C.notifications.length},[C.notifications]);let N=C.notifications.map(({style:e,...t})=>(0,r.jsx)(j,{timeout:P,onEnter:()=>M.current[t.id].offsetHeight,nodeRef:{current:M.current[t.id]},children:n=>(0,r.jsx)(G,{ref:e=>{M.current[t.id]=e},data:t,onHide:e=>(0,W.yK)(e,b),autoClose:p,...R("notification",{style:{...function({state:e,maxHeight:t,position:n,transitionDuration:r}){let[o,i]=n.split("-"),a="center"===i?`${o}-center`:i,s={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"},c={opacity:1,transform:Z[a]},l={opacity:0,maxHeight:0,transform:O[a]};return{...s,...{entering:c,entered:c,exiting:l,exited:l}[e]}}({state:n,position:u,transitionDuration:P,maxHeight:h}),...e}})})},t.id));return(0,r.jsx)(L.q,{withinPortal:x,...y,children:(0,r.jsx)(D.x,{...R("root"),ref:t,...k,children:(0,r.jsx)(E,{children:N})})})});U.classes=Y,U.displayName="@mantine/notifications/Notifications",U.show=W.N9.show,U.hide=W.N9.hide,U.update=W.N9.update,U.clean=W.N9.clean,U.cleanQueue=W.N9.cleanQueue,U.updateState=W.N9.updateState;var X=n(70980),J=n(45847),Q=n.n(J);function ee(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(Q(),{strategy:"afterInteractive",src:"https://www.googletagmanager.com/gtag/js?id=G-4Z4NNVLRH5"}),(0,r.jsx)(Q(),{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 et=n(5632),en=n(58092),er=n(68893);let eo=["/combobox"];function ei(){let e=(0,et.useRouter)(),{setColorScheme:t}=(0,en.X)(),{toggleDirection:n}=(0,a.gm)(),o=(0,er.l)("light");return(0,u.A)([["mod + J",()=>t("light"===o?"dark":"light")],["mod + shift + L",()=>!eo.includes(e.pathname)&&n()]],[]),(0,r.jsx)(r.Fragment,{children:null})}var ea=n(52905),es=n(8582),ec=n(17115),el=n(78222),eu=n(73533),ed=n(93010);let ep=(0,d.createContext)(null);function ef({id:e,cancelProps:t,confirmProps:n,labels:o={cancel:"",confirm:""},closeOnConfirm:i=!0,closeOnCancel:a=!0,groupProps:s,onCancel:c,onConfirm:l,children:u}){let{cancel:p,confirm:f}=o,m=function(){let e=(0,d.useContext)(ep);if(!e)throw Error("[@mantine/modals] useModals hook was called outside of context, wrap your app with ModalsProvider component");return e}();return(0,r.jsxs)(r.Fragment,{children:[u&&(0,r.jsx)(D.x,{mb:"md",children:u}),(0,r.jsxs)(ed.Z,{justify:"flex-end",...s,children:[(0,r.jsx)(ec.z,{variant:"default",...t,onClick:n=>{"function"==typeof t?.onClick&&t?.onClick(n),"function"==typeof c&&c(),a&&m.closeModal(e)},children:t?.children||p}),(0,r.jsx)(ec.z,{...n,onClick:t=>{"function"==typeof n?.onClick&&n?.onClick(t),"function"==typeof l&&l(),i&&m.closeModal(e)},children:n?.children||f})]})]})}ep.displayName="@mantine/modals/ModalsContext";var em=n(2807);function eh(e,t){t&&"confirm"===e.type&&e.props.onCancel?.(),e.props.onClose?.()}function eg(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;eh(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=>{eh(e,t.canceled)}),{current:e.current,modals:[]};default:return e}}function ev({children:e,modalProps:t,labels:n,modals:o}){let[i,a]=(0,d.useReducer)(eg,{modals:[],current:null}),s=(0,d.useRef)(i);s.current=i;let c=(0,d.useCallback)(e=>{a({type:"CLOSE_ALL",canceled:e})},[s,a]),l=(0,d.useCallback)(({modalId:e,...t})=>{let n=e||(0,eu.k)();return a({type:"OPEN",modal:{id:n,type:"content",props:t}}),n},[a]),u=(0,d.useCallback)(({modalId:e,...t})=>{let n=e||(0,eu.k)();return a({type:"OPEN",modal:{id:n,type:"confirm",props:t}}),n},[a]),p=(0,d.useCallback)((e,{modalId:t,...n})=>{let r=t||(0,eu.k)();return a({type:"OPEN",modal:{id:r,type:"context",props:n,ctx:e}}),r},[a]),f=(0,d.useCallback)((e,t)=>{a({type:"CLOSE",modalId:e,canceled:t})},[s,a]);(0,em.Ro)({openModal:l,openConfirmModal:u,openContextModal:({modal:e,...t})=>p(e,t),closeModal:f,closeContextModal:f,closeAllModals:c});let m={modals:i.modals,openModal:l,openConfirmModal:u,openContextModal:p,closeModal:f,closeContextModal:f,closeAll:c},{modalProps:h,content:g}=(()=>{let e=s.current.current;switch(e?.type){case"context":{let{innerProps:t,...n}=e.props,i=o[e.ctx];return{modalProps:n,content:(0,r.jsx)(i,{innerProps:t,context:m,id:e.id})}}case"confirm":{let{modalProps:t,confirmProps:o}=function(e){if(!e)return{confirmProps:{},modalProps:{}};let{id:t,children:n,onCancel:r,onConfirm:o,closeOnConfirm:i,closeOnCancel:a,cancelProps:s,confirmProps:c,groupProps:l,labels:u,...d}=e;return{confirmProps:{id:t,children:n,onCancel:r,onConfirm:o,closeOnConfirm:i,closeOnCancel:a,cancelProps:s,confirmProps:c,groupProps:l,labels:u},modalProps:{id:t,...d}}}(e.props);return{modalProps:t,content:(0,r.jsx)(ef,{...o,id:e.id,labels:e.props.labels||n})}}case"content":{let{children:t,...n}=e.props;return{modalProps:n,content:(0,r.jsx)(r.Fragment,{children:t})}}default:return{modalProps:{},content:null}}})();return(0,r.jsxs)(ep.Provider,{value:m,children:[(0,r.jsx)(el.u,{zIndex:(0,P.w)("modal")+1,...t,...h,opened:i.modals.length>0,onClose:()=>f(i.current?.id),children:g}),e]})}let eb=e=>{let{context:t,id:n,innerProps:o}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(es.x,{size:"sm",children:o.modalBody}),(0,r.jsx)(ec.z,{fullWidth:!0,mt:"md",onClick:()=>t.closeModal(n),children:"Close modal"})]})};function ey(e){let{children:t}=e;return(0,r.jsx)(ev,{labels:{confirm:"Confirm",cancel:"Cancel"},modals:{demonstration:eb},children:t})}var ex=n(20233),ek=n(47196),ew=n(87744),ej=n(99469),eC=n.n(ej);function eS(){return(0,r.jsx)(i(),{children:(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:":root{ --docs-font-primary: ".concat(eC().style.fontFamily,", ").concat(ew.t.fontFamily,"; }")}})})}var eI=n(60231),eM=n(74106);let eT=(0,eI.j)({fontFamilyMonospace:"Menlo, Monaco, ".concat(ew.t.fontFamilyMonospace),colors:{virtual:(0,eM.R)({name:"virtual",dark:"pink",light:"cyan"}),"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"]}}),eE=(0,n(2107).Z)({key:"css"});n(59739);let eP=["/","/combobox","/app-shell"];async function eR(){let{getHighlighter:e}=await n.e(92198).then(n.bind(n,92198));return await e({langs:["tsx","scss","html","bash","json"],themes:[]})}function eN(e){let{Component:t,pageProps:n,router:o}=e,d=!eP.includes(o.pathname),[p,f]=(0,l.I)({key:"mantine-navbar-opened",defaultValue:!0});return(0,u.A)([["mod + alt + N",()=>f(!p)]]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(i(),{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)(ee,{}),(0,r.jsx)(eS,{}),(0,r.jsx)(a._9,{initialDirection:"ltr",detectDirection:!1,children:(0,r.jsx)(c.Nl,{cache:eE,children:(0,r.jsx)(s.M,{theme:eT,defaultColorScheme:"light",children:(0,r.jsxs)(X.U,{loadShiki:eR,children:[(0,r.jsx)(ex.o,{}),(0,r.jsx)(U,{}),(0,r.jsx)(ey,{children:(0,r.jsxs)(ea.Cu,{children:[(0,r.jsx)(ei,{}),d?(0,r.jsx)(ek.N,{withNavbar:p,children:(0,r.jsx)(t,{...n})}):(0,r.jsx)(t,{...n})]})})]})})})})]})}},94684:function(e,t){"use strict";var n,r,o,i;Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var n in t)Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}(t,{ACTION_FAST_REFRESH:function(){return d},ACTION_NAVIGATE:function(){return s},ACTION_PREFETCH:function(){return u},ACTION_REFRESH:function(){return a},ACTION_RESTORE:function(){return c},ACTION_SERVER_ACTION:function(){return p},ACTION_SERVER_PATCH:function(){return l},PrefetchCacheEntryStatus:function(){return r},PrefetchKind:function(){return n},isThenable:function(){return f}});let a="refresh",s="navigate",c="restore",l="server-patch",u="prefetch",d="fast-refresh",p="server-action";function f(e){return e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then}(o=n||(n={})).AUTO="auto",o.FULL="full",o.TEMPORARY="temporary",(i=r||(r={})).fresh="fresh",i.reusable="reusable",i.expired="expired",i.stale="stale",("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)},8250: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(62476),("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)},26713:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return x}});let r=n(43219),o=n(52322),i=r._(n(2784)),a=n(98047),s=n(26790),c=n(47973),l=n(49274),u=n(78074),d=n(17942),p=n(1586),f=n(70514),m=n(8250),h=n(87891),g=n(94684),v=new Set;function b(e,t,n,r,o,i){if(i||(0,s.isLocalURL)(t)){if(!r.bypassPrefetchedCheck){let o=t+"%"+n+"%"+(void 0!==r.locale?r.locale:"locale"in e?e.locale:void 0);if(v.has(o))return;v.add(o)}Promise.resolve(i?e.prefetch(t,o):e.prefetch(t,n,r)).catch(e=>{})}}function y(e){return"string"==typeof e?e:(0,c.formatUrl)(e)}let x=i.default.forwardRef(function(e,t){let n,r;let{href:c,as:v,children:x,prefetch:k=null,passHref:w,replace:j,shallow:C,scroll:S,locale:I,onClick:M,onMouseEnter:T,onTouchStart:E,legacyBehavior:P=!1,...R}=e;n=x,P&&("string"==typeof n||"number"==typeof n)&&(n=(0,o.jsx)("a",{children:n}));let N=i.default.useContext(d.RouterContext),_=i.default.useContext(p.AppRouterContext),F=null!=N?N:_,B=!N,A=!1!==k,L=null===k?g.PrefetchKind.AUTO:g.PrefetchKind.FULL,{href:D,as:$}=i.default.useMemo(()=>{if(!N){let e=y(c);return{href:e,as:v?y(v):e}}let[e,t]=(0,a.resolveHref)(N,c,!0);return{href:e,as:v?(0,a.resolveHref)(N,v):t||e}},[N,c,v]),z=i.default.useRef(D),H=i.default.useRef($);P&&(r=i.default.Children.only(n));let O=P?r&&"object"==typeof r&&r.ref:t,[Z,V,G]=(0,f.useIntersection)({rootMargin:"200px"}),W=i.default.useCallback(e=>{(H.current!==$||z.current!==D)&&(G(),H.current=$,z.current=D),Z(e),O&&("function"==typeof O?O(e):"object"==typeof O&&(O.current=e))},[$,O,D,G,Z]);i.default.useEffect(()=>{F&&V&&A&&b(F,D,$,{locale:I},{kind:L},B)},[$,D,V,I,A,null==N?void 0:N.locale,F,B,L]);let Y={ref:W,onClick(e){P||"function"!=typeof M||M(e),P&&r.props&&"function"==typeof r.props.onClick&&r.props.onClick(e),F&&!e.defaultPrevented&&function(e,t,n,r,o,a,c,l,u){let{nodeName:d}=e.currentTarget;if("A"===d.toUpperCase()&&(function(e){let t=e.currentTarget.getAttribute("target");return t&&"_self"!==t||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.nativeEvent&&2===e.nativeEvent.which}(e)||!u&&!(0,s.isLocalURL)(n)))return;e.preventDefault();let p=()=>{let e=null==c||c;"beforePopState"in t?t[o?"replace":"push"](n,r,{shallow:a,locale:l,scroll:e}):t[o?"replace":"push"](r||n,{scroll:e})};u?i.default.startTransition(p):p()}(e,F,D,$,j,C,S,I,B)},onMouseEnter(e){P||"function"!=typeof T||T(e),P&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),F&&(A||!B)&&b(F,D,$,{locale:I,priority:!0,bypassPrefetchedCheck:!0},{kind:L},B)},onTouchStart:function(e){P||"function"!=typeof E||E(e),P&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),F&&(A||!B)&&b(F,D,$,{locale:I,priority:!0,bypassPrefetchedCheck:!0},{kind:L},B)}};if((0,l.isAbsoluteUrl)($))Y.href=$;else if(!P||w||"a"===r.type&&!("href"in r.props)){let e=void 0!==I?I:null==N?void 0:N.locale,t=(null==N?void 0:N.isLocaleDomain)&&(0,m.getDomainLocale)($,e,null==N?void 0:N.locales,null==N?void 0:N.domainLocales);Y.href=t||(0,h.addBasePath)((0,u.addLocale)($,e,null==N?void 0:N.defaultLocale))}return P?i.default.cloneElement(r,Y):(0,o.jsx)("a",{...R,...Y,children:n})});("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)},70514:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"useIntersection",{enumerable:!0,get:function(){return c}});let r=n(2784),o=n(25132),i="function"==typeof IntersectionObserver,a=new Map,s=[];function c(e){let{rootRef:t,rootMargin:n,disabled:c}=e,l=c||!i,[u,d]=(0,r.useState)(!1),p=(0,r.useRef)(null),f=(0,r.useCallback)(e=>{p.current=e},[]);return(0,r.useEffect)(()=>{if(i){if(l||u)return;let e=p.current;if(e&&e.tagName)return 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=s.find(e=>e.root===n.root&&e.margin===n.margin);if(r&&(t=a.get(r)))return t;let o=new Map;return t={id:n,observer:new IntersectionObserver(e=>{e.forEach(e=>{let t=o.get(e.target),n=e.isIntersecting||e.intersectionRatio>0;t&&n&&t(n)})},e),elements:o},s.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=s.findIndex(e=>e.root===r.root&&e.margin===r.margin);e>-1&&s.splice(e,1)}}}(e,e=>e&&d(e),{root:null==t?void 0:t.current,rootMargin:n})}else if(!u){let e=(0,o.requestIdleCallback)(()=>d(!0));return()=>(0,o.cancelIdleCallback)(e)}},[l,n,t,u,p.current]),[f,u,(0,r.useCallback)(()=>{d(!1)},[])]}("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)},89355:function(){},47009:function(){},96508:function(){},85784:function(){},21229:function(){},31809:function(){},55504:function(){},51377:function(){},82521:function(){},27771:function(){},19406:function(){},31675:function(){},14517:function(){},33465:function(){},70459:function(){},59739:function(){},99469:function(e){e.exports={style:{fontFamily:"'__greycliffCF_0e41f6', '__greycliffCF_Fallback_0e41f6'"},className:"__className_0e41f6"}},5874:function(e){e.exports={section:"DocsSection_section__o2plc"}},41601:function(e){e.exports={logo:"Logo_logo__c5nVK"}},73057:function(e){e.exports={root:"MdxInfo_root__KVEKQ",icon:"MdxInfo_icon__cOv9p"}},23233:function(e){e.exports={link:"MdxLink_link__DWoQo"}},70555:function(e){e.exports={root:"MdxNpmScript_root__wk_w9",icon:"MdxNpmScript_icon___9BYF"}},38062:function(e){e.exports={row:"MdxPackagesInstallation_row__4jECZ",checkbox:"MdxPackagesInstallation_checkbox__jBi9e",hiddenMobile:"MdxPackagesInstallation_hiddenMobile__VJhVH"}},49603:function(e){e.exports={code:"MdxPre_code__tSup0"}},42975:function(e){e.exports={externalLinkIcon:"MdxTemplatesList_externalLinkIcon___In9x",icon:"MdxTemplatesList_icon__759wE",iconCell:"MdxTemplatesList_iconCell__t22nh"}},77689: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"}},32481:function(e){e.exports={paragraph:"MdxTypography_paragraph__XriB5",ul:"MdxTypography_ul__gGDJt",li:"MdxTypography_li__gO4GM"}},36528:function(e){e.exports={header:"Header_header__KDGDv",logo:"Header_logo__DqpNC",version:"Header_version__jVWmz",versionChevron:"Header_versionChevron__t4WMy",versionExternalIcon:"Header_versionExternalIcon___plOU"}},3968:function(e){e.exports={navbar:"Navbar_navbar__LAEds",scrollarea:"Navbar_scrollarea__sbhtk",body:"Navbar_body__8M1M_",groups:"Navbar_groups__4j6NE"}},10968: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"}},80275:function(e){e.exports={link:"NavbarMainLink_link__eG_24",icon:"NavbarMainLink_icon__ePqig",external:"NavbarMainLink_external__Ko9pq",label:"NavbarMainLink_label__gBi5w"}},29475:function(e){e.exports={main:"Shell_main__o5vhe"}},42066:function(e){e.exports={nextIcon:"icons_nextIcon__ZCrZ1",icon:"icons_icon__yq4dY"}},97729:function(e,t,n){e.exports=n(50044)},39097:function(e,t,n){e.exports=n(26713)},5632:function(e,t,n){e.exports=n(69442)},45847:function(e,t,n){e.exports=n(55706)},34406: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 s(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 c=[],l=!1,u=-1;function d(){l&&r&&(l=!1,r.length?c=r.concat(c):u=-1,c.length&&p())}function p(){if(!l){var e=s(d);l=!0;for(var t=c.length;t;){for(r=c,c=[];++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"]),I=(n=[i,t],r=function(e){return n.forEach(function(t){return"function"==typeof t?t(e):t&&(t.current=e),t})},(o=(0,d.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),M=u(u({},S),s);return d.createElement(d.Fragment,null,v&&d.createElement(y,{sideCar:h,removeScrollBar:m,shards:b,noIsolation:x,inert:k,setCallbacks:c,allowPinchZoom:!!w,lockRef:i,gapMode:C}),l?d.cloneElement(d.Children.only(p),u(u({},M),{ref:I})):d.createElement(void 0===j?"div":j,u({},M,{className:f,ref:I}),p))});v.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},v.classNames={fullWidth:f,zeroRight:p};var b=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 d.createElement(r,m({},n))};b.isSideCarExport=!0;var y=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)}}},x=function(){var e=y();return function(t,n){d.useEffect(function(){return e.add(t),function(){e.remove()}},[t&&n])}},k=function(){var e=x();return function(t){return e(t.styles,t.dynamic),null}},w={left:0,top:0,right:0,gap:0},j=function(e){return parseInt(e||"",10)||0},C=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[j(n),j(r),j(o)]},S=function(e){if(void 0===e&&(e="margin"),"undefined"==typeof window)return w;var t=C(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])}},I=k(),M=function(e,t,n,r){var o=e.left,i=e.top,a=e.right,s=e.gap;return void 0===n&&(n="margin"),"\n .".concat("with-scroll-bars-hidden"," {\n overflow: hidden ").concat(r,";\n padding-right: ").concat(s,"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(s,"px ").concat(r,";\n "),"padding"===n&&"padding-right: ".concat(s,"px ").concat(r,";")].filter(Boolean).join(""),"\n }\n \n .").concat(p," {\n right: ").concat(s,"px ").concat(r,";\n }\n \n .").concat(f," {\n margin-right: ").concat(s,"px ").concat(r,";\n }\n \n .").concat(p," .").concat(p," {\n right: 0 ").concat(r,";\n }\n \n .").concat(f," .").concat(f," {\n margin-right: 0 ").concat(r,";\n }\n \n body {\n ").concat("--removed-body-scroll-bar-size",": ").concat(s,"px;\n }\n")},T=function(e){var t=e.noRelative,n=e.noImportant,r=e.gapMode,o=void 0===r?"margin":r,i=d.useMemo(function(){return S(o)},[o]);return d.createElement(I,{styles:M(i,!t,o,n?"":"!important")})},E=!1;if("undefined"!=typeof window)try{var P=Object.defineProperty({},"passive",{get:function(){return E=!0,!0}});window.addEventListener("test",P,P),window.removeEventListener("test",P,P)}catch(e){E=!1}var R=!!E&&{passive:!1},N=function(e,t){var n=window.getComputedStyle(e);return"hidden"!==n[t]&&!(n.overflowY===n.overflowX&&"TEXTAREA"!==e.tagName&&"visible"===n[t])},_=function(e,t){var n=t.ownerDocument,r=t;do{if("undefined"!=typeof ShadowRoot&&r instanceof ShadowRoot&&(r=r.host),F(e,r)){var o=B(e,r);if(o[1]>o[2])return!0}r=r.parentNode}while(r&&r!==n.body);return!1},F=function(e,t){return"v"===e?N(t,"overflowY"):N(t,"overflowX")},B=function(e,t){return"v"===e?[t.scrollTop,t.scrollHeight,t.clientHeight]:[t.scrollLeft,t.scrollWidth,t.clientWidth]},A=function(e,t,n,r,o){var i,a=(i=window.getComputedStyle(t).direction,"h"===e&&"rtl"===i?-1:1),s=a*r,c=n.target,l=t.contains(c),u=!1,d=s>0,p=0,f=0;do{var m=B(e,c),h=m[0],g=m[1]-m[2]-a*h;(h||g)&&F(e,c)&&(p+=g,f+=h),c instanceof ShadowRoot?c=c.host:c=c.parentNode}while(!l&&c!==document.body||l&&(t.contains(c)||t===c));return d&&(o&&1>Math.abs(p)||!o&&s>p)?u=!0:!d&&(o&&1>Math.abs(f)||!o&&-s>f)&&(u=!0),u},L=function(e){return"changedTouches"in e?[e.changedTouches[0].clientX,e.changedTouches[0].clientY]:[0,0]},D=function(e){return[e.deltaX,e.deltaY]},$=function(e){return e&&"current"in e?e.current:e},z=0,H=[],O=(l=function(e){var t=d.useRef([]),n=d.useRef([0,0]),r=d.useRef(),o=d.useState(z++)[0],i=d.useState(k)[0],a=d.useRef(e);d.useEffect(function(){a.current=e},[e]),d.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=_(d,u);if(!p)return!0;if(p?o=d:(o="v"===d?"h":"v",p=_(d,u)),!p)return!1;if(!r.current&&"changedTouches"in e&&(c||l)&&(r.current=o),!o)return!0;var f=r.current||o;return A(f,t,e,"h"===f?c:l,!0)},[]),c=d.useCallback(function(e){if(H.length&&H[H.length-1]===i){var n="deltaY"in e?D(e):L(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($).filter(Boolean).filter(function(t){return t.contains(e.target)});(o.length>0?s(e,o[0]):!a.current.noIsolation)&&e.cancelable&&e.preventDefault()}}},[]),l=d.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)},[]),u=d.useCallback(function(e){n.current=L(e),r.current=void 0},[]),p=d.useCallback(function(t){l(t.type,D(t),t.target,s(t,e.lockRef.current))},[]),f=d.useCallback(function(t){l(t.type,L(t),t.target,s(t,e.lockRef.current))},[]);d.useEffect(function(){return H.push(i),e.setCallbacks({onScrollCapture:p,onWheelCapture:p,onTouchMoveCapture:f}),document.addEventListener("wheel",c,R),document.addEventListener("touchmove",c,R),document.addEventListener("touchstart",u,R),function(){H=H.filter(function(e){return e!==i}),document.removeEventListener("wheel",c,R),document.removeEventListener("touchmove",c,R),document.removeEventListener("touchstart",u,R)}},[]);var m=e.removeScrollBar,h=e.inert;return d.createElement(d.Fragment,null,h?d.createElement(i,{styles:"\n .block-interactivity-".concat(o," {pointer-events: none;}\n .allow-interactivity-").concat(o," {pointer-events: all;}\n")}):null,m?d.createElement(T,{gapMode:e.gapMode}):null)},h.useMedium(l),b),Z=d.forwardRef(function(e,t){return d.createElement(v,u({},e,{ref:t,sideCar:O}))});Z.classNames=v.classNames;var V=Z},84061:function(e,t,n){"use strict";n.d(t,{Qo:function(){return u},RR:function(){return c},cv:function(){return p},dp:function(){return h},dr:function(){return m},oo:function(){return i},uY:function(){return f},x7:function(){return s}});var r=n(4029);function o(e,t,n){let o,{reference:i,floating:a}=e,s=(0,r.Qq)(t),c=(0,r.Wh)(t),l=(0,r.I4)(c),u=(0,r.k3)(t),d="y"===s,p=i.x+i.width/2-a.width/2,f=i.y+i.height/2-a.height/2,m=i[l]/2-a[l]/2;switch(u){case"top":o={x:p,y:i.y-a.height};break;case"bottom":o={x:p,y:i.y+i.height};break;case"right":o={x:i.x+i.width,y:f};break;case"left":o={x:i.x-a.width,y:f};break;default:o={x:i.x,y:i.y}}switch((0,r.hp)(t)){case"start":o[c]-=m*(n&&d?-1:1);break;case"end":o[c]+=m*(n&&d?-1:1)}return o}let i=async(e,t,n)=>{let{placement:r="bottom",strategy:i="absolute",middleware:a=[],platform:s}=n,c=a.filter(Boolean),l=await (null==s.isRTL?void 0:s.isRTL(t)),u=await s.getElementRects({reference:e,floating:t,strategy:i}),{x:d,y:p}=o(u,r,l),f=r,m={},h=0;for(let n=0;n({name:"arrow",options:e,async fn(t){let{x:n,y:o,placement:i,rects:a,platform:s,elements:c,middlewareData:l}=t,{element:u,padding:d=0}=(0,r.ku)(e,t)||{};if(null==u)return{};let p=(0,r.yd)(d),f={x:n,y:o},m=(0,r.Wh)(i),h=(0,r.I4)(m),g=await s.getDimensions(u),v="y"===m,b=v?"clientHeight":"clientWidth",y=a.reference[h]+a.reference[m]-f[m]-a.floating[h],x=f[m]-a.reference[m],k=await (null==s.getOffsetParent?void 0:s.getOffsetParent(u)),w=k?k[b]:0;w&&await (null==s.isElement?void 0:s.isElement(k))||(w=c.floating[b]||a.floating[h]);let j=w/2-g[h]/2-1,C=(0,r.VV)(p[v?"top":"left"],j),S=(0,r.VV)(p[v?"bottom":"right"],j),I=w-g[h]-S,M=w/2-g[h]/2+(y/2-x/2),T=(0,r.uZ)(C,M,I),E=!l.arrow&&null!=(0,r.hp)(i)&&M!==T&&a.reference[h]/2-(Me<=0)){let e=((null==(i=u.flip)?void 0:i.index)||0)+1,t=I[e];if(t)return{data:{index:e,overflows:E},reset:{placement:t}};let n=null==(s=E.filter(e=>e.overflows[0]<=0).sort((e,t)=>e.overflows[1]-t.overflows[1])[0])?void 0:s.placement;if(!n)switch(b){case"bestFit":{let e=null==(c=E.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:c[0];e&&(n=e);break}case"initialPlacement":n=p}if(l!==n)return{reset:{placement:n}}}return{}}}};function l(e){let t=(0,r.VV)(...e.map(e=>e.left)),n=(0,r.VV)(...e.map(e=>e.top));return{x:t,y:n,width:(0,r.Fp)(...e.map(e=>e.right))-t,height:(0,r.Fp)(...e.map(e=>e.bottom))-n}}let u=function(e){return void 0===e&&(e={}),{name:"inline",options:e,async fn(t){let{placement:n,elements:o,rects:i,platform:a,strategy:s}=t,{padding:c=2,x:u,y:d}=(0,r.ku)(e,t),p=Array.from(await (null==a.getClientRects?void 0:a.getClientRects(o.reference))||[]),f=function(e){let t=e.slice().sort((e,t)=>e.y-t.y),n=[],o=null;for(let e=0;eo.height/2?n.push([r]):n[n.length-1].push(r),o=r}return n.map(e=>(0,r.JB)(l(e)))}(p),m=(0,r.JB)(l(p)),h=(0,r.yd)(c),g=await a.getElementRects({reference:{getBoundingClientRect:function(){if(2===f.length&&f[0].left>f[1].right&&null!=u&&null!=d)return f.find(e=>u>e.left-h.left&&ue.top-h.top&&d=2){if("y"===(0,r.Qq)(n)){let e=f[0],t=f[f.length-1],o="top"===(0,r.k3)(n),i=e.top,a=t.bottom,s=o?e.left:t.left,c=o?e.right:t.right;return{top:i,bottom:a,left:s,right:c,width:c-s,height:a-i,x:s,y:i}}let e="left"===(0,r.k3)(n),t=(0,r.Fp)(...f.map(e=>e.right)),o=(0,r.VV)(...f.map(e=>e.left)),i=f.filter(n=>e?n.left===o:n.right===t),a=i[0].top,s=i[i.length-1].bottom;return{top:a,bottom:s,left:o,right:t,width:t-o,height:s-a,x:o,y:a}}return m}},floating:o.floating,strategy:s});return i.reference.x!==g.reference.x||i.reference.y!==g.reference.y||i.reference.width!==g.reference.width||i.reference.height!==g.reference.height?{reset:{rects:g}}:{}}}};async function d(e,t){let{placement:n,platform:o,elements:i}=e,a=await (null==o.isRTL?void 0:o.isRTL(i.floating)),s=(0,r.k3)(n),c=(0,r.hp)(n),l="y"===(0,r.Qq)(n),u=["left","top"].includes(s)?-1:1,d=a&&l?-1:1,p=(0,r.ku)(t,e),{mainAxis:f,crossAxis:m,alignmentAxis:h}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...p};return c&&"number"==typeof h&&(m="end"===c?-1*h:h),l?{x:m*d,y:f*u}:{x:f*u,y:m*d}}let p=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var n,r;let{x:o,y:i,placement:a,middlewareData:s}=t,c=await d(t,e);return a===(null==(n=s.offset)?void 0:n.placement)&&null!=(r=s.arrow)&&r.alignmentOffset?{}:{x:o+c.x,y:i+c.y,data:{...c,placement:a}}}}},f=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){let{x:n,y:o,placement:i}=t,{mainAxis:s=!0,crossAxis:c=!1,limiter:l={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...u}=(0,r.ku)(e,t),d={x:n,y:o},p=await a(t,u),f=(0,r.Qq)((0,r.k3)(i)),m=(0,r.Rn)(f),h=d[m],g=d[f];if(s){let e="y"===m?"top":"left",t="y"===m?"bottom":"right",n=h+p[e],o=h-p[t];h=(0,r.uZ)(n,h,o)}if(c){let e="y"===f?"top":"left",t="y"===f?"bottom":"right",n=g+p[e],o=g-p[t];g=(0,r.uZ)(n,g,o)}let v=l.fn({...t,[m]:h,[f]:g});return{...v,data:{x:v.x-n,y:v.y-o}}}}},m=function(e){return void 0===e&&(e={}),{options:e,fn(t){let{x:n,y:o,placement:i,rects:a,middlewareData:s}=t,{offset:c=0,mainAxis:l=!0,crossAxis:u=!0}=(0,r.ku)(e,t),d={x:n,y:o},p=(0,r.Qq)(i),f=(0,r.Rn)(p),m=d[f],h=d[p],g=(0,r.ku)(c,t),v="number"==typeof g?{mainAxis:g,crossAxis:0}:{mainAxis:0,crossAxis:0,...g};if(l){let e="y"===f?"height":"width",t=a.reference[f]-a.floating[e]+v.mainAxis,n=a.reference[f]+a.reference[e]-v.mainAxis;mn&&(m=n)}if(u){var b,y;let e="y"===f?"width":"height",t=["top","left"].includes((0,r.k3)(i)),n=a.reference[p]-a.floating[e]+(t&&(null==(b=s.offset)?void 0:b[p])||0)+(t?0:v.crossAxis),o=a.reference[p]+a.reference[e]+(t?0:(null==(y=s.offset)?void 0:y[p])||0)-(t?v.crossAxis:0);ho&&(h=o)}return{[f]:m,[p]:h}}}},h=function(e){return void 0===e&&(e={}),{name:"size",options:e,async fn(t){let n,o;let{placement:i,rects:s,platform:c,elements:l}=t,{apply:u=()=>{},...d}=(0,r.ku)(e,t),p=await a(t,d),f=(0,r.k3)(i),m=(0,r.hp)(i),h="y"===(0,r.Qq)(i),{width:g,height:v}=s.floating;"top"===f||"bottom"===f?(n=f,o=m===(await (null==c.isRTL?void 0:c.isRTL(l.floating))?"start":"end")?"left":"right"):(o=f,n="end"===m?"top":"bottom");let b=v-p[n],y=g-p[o],x=!t.middlewareData.shift,k=b,w=y;if(h){let e=g-p.left-p.right;w=m||x?(0,r.VV)(y,e):e}else{let e=v-p.top-p.bottom;k=m||x?(0,r.VV)(b,e):e}if(x&&!m){let e=(0,r.Fp)(p.left,0),t=(0,r.Fp)(p.right,0),n=(0,r.Fp)(p.top,0),o=(0,r.Fp)(p.bottom,0);h?w=g-2*(0!==e||0!==t?e+t:(0,r.Fp)(p.left,p.right)):k=v-2*(0!==n||0!==o?n+o:(0,r.Fp)(p.top,p.bottom))}await u({...t,availableWidth:w,availableHeight:k});let j=await c.getDimensions(l.floating);return g!==j.width||v!==j.height?{reset:{rects:!0}}:{}}}}},75580:function(e,t,n){"use strict";n.d(t,{Me:function(){return x},Qo:function(){return S},RR:function(){return w},dp:function(){return j},dr:function(){return I},oo:function(){return M},uY:function(){return k},x7:function(){return C}});var r=n(4029),o=n(84061),i=n(10712);function a(e){let t=(0,i.Dx)(e),n=parseFloat(t.width)||0,o=parseFloat(t.height)||0,a=(0,i.Re)(e),s=a?e.offsetWidth:n,c=a?e.offsetHeight:o,l=(0,r.NM)(n)!==s||(0,r.NM)(o)!==c;return l&&(n=s,o=c),{width:n,height:o,$:l}}function s(e){return(0,i.kK)(e)?e:e.contextElement}function c(e){let t=s(e);if(!(0,i.Re)(t))return(0,r.ze)(1);let n=t.getBoundingClientRect(),{width:o,height:c,$:l}=a(t),u=(l?(0,r.NM)(n.width):n.width)/o,d=(l?(0,r.NM)(n.height):n.height)/c;return u&&Number.isFinite(u)||(u=1),d&&Number.isFinite(d)||(d=1),{x:u,y:d}}let l=(0,r.ze)(0);function u(e){let t=(0,i.Jj)(e);return(0,i.Pf)()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:l}function d(e,t,n,o){var a;void 0===t&&(t=!1),void 0===n&&(n=!1);let l=e.getBoundingClientRect(),d=s(e),p=(0,r.ze)(1);t&&(o?(0,i.kK)(o)&&(p=c(o)):p=c(e));let f=(void 0===(a=n)&&(a=!1),o&&(!a||o===(0,i.Jj)(d))&&a)?u(d):(0,r.ze)(0),m=(l.left+f.x)/p.x,h=(l.top+f.y)/p.y,g=l.width/p.x,v=l.height/p.y;if(d){let e=(0,i.Jj)(d),t=o&&(0,i.kK)(o)?(0,i.Jj)(o):o,n=e.frameElement;for(;n&&o&&t!==e;){let e=c(n),t=n.getBoundingClientRect(),r=(0,i.Dx)(n),o=t.left+(n.clientLeft+parseFloat(r.paddingLeft))*e.x,a=t.top+(n.clientTop+parseFloat(r.paddingTop))*e.y;m*=e.x,h*=e.y,g*=e.x,v*=e.y,m+=o,h+=a,n=(0,i.Jj)(n).frameElement}}return(0,r.JB)({width:g,height:v,x:m,y:h})}let p=[":popover-open",":modal"];function f(e){let t=!1,n=0,r=0;if(p.forEach(n=>{!function(n){try{t=t||e.matches(n)}catch(e){}}(n)}),t){let t=(0,i.gQ)(e);if(t){let e=t.getBoundingClientRect();n=e.x,r=e.y}}return[t,n,r]}function m(e){return d((0,i.tF)(e)).left+(0,i.Lw)(e).scrollLeft}function h(e,t,n){let o;if("viewport"===t)o=function(e,t){let n=(0,i.Jj)(e),r=(0,i.tF)(e),o=n.visualViewport,a=r.clientWidth,s=r.clientHeight,c=0,l=0;if(o){a=o.width,s=o.height;let e=(0,i.Pf)();(!e||e&&"fixed"===t)&&(c=o.offsetLeft,l=o.offsetTop)}return{width:a,height:s,x:c,y:l}}(e,n);else if("document"===t)o=function(e){let t=(0,i.tF)(e),n=(0,i.Lw)(e),o=e.ownerDocument.body,a=(0,r.Fp)(t.scrollWidth,t.clientWidth,o.scrollWidth,o.clientWidth),s=(0,r.Fp)(t.scrollHeight,t.clientHeight,o.scrollHeight,o.clientHeight),c=-n.scrollLeft+m(e),l=-n.scrollTop;return"rtl"===(0,i.Dx)(o).direction&&(c+=(0,r.Fp)(t.clientWidth,o.clientWidth)-a),{width:a,height:s,x:c,y:l}}((0,i.tF)(e));else if((0,i.kK)(t))o=function(e,t){let n=d(e,!0,"fixed"===t),o=n.top+e.clientTop,a=n.left+e.clientLeft,s=(0,i.Re)(e)?c(e):(0,r.ze)(1),l=e.clientWidth*s.x;return{width:l,height:e.clientHeight*s.y,x:a*s.x,y:o*s.y}}(t,n);else{let n=u(e);o={...t,x:t.x-n.x,y:t.y-n.y}}return(0,r.JB)(o)}function g(e,t){return(0,i.Re)(e)&&"fixed"!==(0,i.Dx)(e).position?t?t(e):e.offsetParent:null}function v(e,t){let n=(0,i.Jj)(e);if(!(0,i.Re)(e))return n;let r=g(e,t);for(;r&&(0,i.Ze)(r)&&"static"===(0,i.Dx)(r).position;)r=g(r,t);return r&&("html"===(0,i.wk)(r)||"body"===(0,i.wk)(r)&&"static"===(0,i.Dx)(r).position&&!(0,i.hT)(r))?n:r||(0,i.gQ)(e)||n}let b=async function(e){let t=this.getOffsetParent||v,n=this.getDimensions;return{reference:function(e,t,n,o){let a=(0,i.Re)(t),s=(0,i.tF)(t),c="fixed"===n,l=d(e,!0,c,t),u={scrollLeft:0,scrollTop:0},p=(0,r.ze)(0);if(a||!a&&!c){if(("body"!==(0,i.wk)(t)||(0,i.ao)(s))&&(u=(0,i.Lw)(t)),a){let e=d(t,!0,c,t);p.x=e.x+t.clientLeft,p.y=e.y+t.clientTop}else s&&(p.x=m(s))}let h=l.left+u.scrollLeft-p.x,g=l.top+u.scrollTop-p.y,[v,b,y]=f(o);return v&&(h+=b,g+=y,a&&(h+=t.clientLeft,g+=t.clientTop)),{x:h,y:g,width:l.width,height:l.height}}(e.reference,await t(e.floating),e.strategy,e.floating),floating:{x:0,y:0,...await n(e.floating)}}},y={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{elements:t,rect:n,offsetParent:o,strategy:a}=e,s=(0,i.tF)(o),[l]=t?f(t.floating):[!1];if(o===s||l)return n;let u={scrollLeft:0,scrollTop:0},p=(0,r.ze)(1),m=(0,r.ze)(0),h=(0,i.Re)(o);if((h||!h&&"fixed"!==a)&&(("body"!==(0,i.wk)(o)||(0,i.ao)(s))&&(u=(0,i.Lw)(o)),(0,i.Re)(o))){let e=d(o);p=c(o),m.x=e.x+o.clientLeft,m.y=e.y+o.clientTop}return{width:n.width*p.x,height:n.height*p.y,x:n.x*p.x-u.scrollLeft*p.x+m.x,y:n.y*p.y-u.scrollTop*p.y+m.y}},getDocumentElement:i.tF,getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:o,strategy:a}=e,s=[..."clippingAncestors"===n?function(e,t){let n=t.get(e);if(n)return n;let r=(0,i.Kx)(e,[],!1).filter(e=>(0,i.kK)(e)&&"body"!==(0,i.wk)(e)),o=null,a="fixed"===(0,i.Dx)(e).position,s=a?(0,i.Ow)(e):e;for(;(0,i.kK)(s)&&!(0,i.Py)(s);){let t=(0,i.Dx)(s),n=(0,i.hT)(s);n||"fixed"!==t.position||(o=null),(a?!n&&!o:!n&&"static"===t.position&&!!o&&["absolute","fixed"].includes(o.position)||(0,i.ao)(s)&&!n&&function e(t,n){let r=(0,i.Ow)(t);return!(r===n||!(0,i.kK)(r)||(0,i.Py)(r))&&("fixed"===(0,i.Dx)(r).position||e(r,n))}(e,s))?r=r.filter(e=>e!==s):o=t,s=(0,i.Ow)(s)}return t.set(e,r),r}(t,this._c):[].concat(n),o],c=s[0],l=s.reduce((e,n)=>{let o=h(t,n,a);return e.top=(0,r.Fp)(o.top,e.top),e.right=(0,r.VV)(o.right,e.right),e.bottom=(0,r.VV)(o.bottom,e.bottom),e.left=(0,r.Fp)(o.left,e.left),e},h(t,c,a));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},getOffsetParent:v,getElementRects:b,getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){let{width:t,height:n}=a(e);return{width:t,height:n}},getScale:c,isElement:i.kK,isRTL:function(e){return"rtl"===(0,i.Dx)(e).direction}};function x(e,t,n,o){let a;void 0===o&&(o={});let{ancestorScroll:c=!0,ancestorResize:l=!0,elementResize:u="function"==typeof ResizeObserver,layoutShift:p="function"==typeof IntersectionObserver,animationFrame:f=!1}=o,m=s(e),h=c||l?[...m?(0,i.Kx)(m):[],...(0,i.Kx)(t)]:[];h.forEach(e=>{c&&e.addEventListener("scroll",n,{passive:!0}),l&&e.addEventListener("resize",n)});let g=m&&p?function(e,t){let n,o=null,a=(0,i.tF)(e);function s(){var e;clearTimeout(n),null==(e=o)||e.disconnect(),o=null}return!function i(c,l){void 0===c&&(c=!1),void 0===l&&(l=1),s();let{left:u,top:d,width:p,height:f}=e.getBoundingClientRect();if(c||t(),!p||!f)return;let m=(0,r.GW)(d),h=(0,r.GW)(a.clientWidth-(u+p)),g={rootMargin:-m+"px "+-h+"px "+-(0,r.GW)(a.clientHeight-(d+f))+"px "+-(0,r.GW)(u)+"px",threshold:(0,r.Fp)(0,(0,r.VV)(1,l))||1},v=!0;function b(e){let t=e[0].intersectionRatio;if(t!==l){if(!v)return i();t?i(!1,t):n=setTimeout(()=>{i(!1,1e-7)},100)}v=!1}try{o=new IntersectionObserver(b,{...g,root:a.ownerDocument})}catch(e){o=new IntersectionObserver(b,g)}o.observe(e)}(!0),s}(m,n):null,v=-1,b=null;u&&(b=new ResizeObserver(e=>{let[r]=e;r&&r.target===m&&b&&(b.unobserve(t),cancelAnimationFrame(v),v=requestAnimationFrame(()=>{var e;null==(e=b)||e.observe(t)})),n()}),m&&!f&&b.observe(m),b.observe(t));let y=f?d(e):null;return f&&function t(){let r=d(e);y&&(r.x!==y.x||r.y!==y.y||r.width!==y.width||r.height!==y.height)&&n(),y=r,a=requestAnimationFrame(t)}(),n(),()=>{var e;h.forEach(e=>{c&&e.removeEventListener("scroll",n),l&&e.removeEventListener("resize",n)}),null==g||g(),null==(e=b)||e.disconnect(),b=null,f&&cancelAnimationFrame(a)}}let k=o.uY,w=o.RR,j=o.dp,C=o.x7,S=o.Qo,I=o.dr,M=(e,t,n)=>{let r=new Map,i={platform:y,...n},a={...i.platform,_c:r};return(0,o.oo)(e,t,{...i,platform:a})}},92416:function(e,t,n){"use strict";n.d(t,{YF:function(){return p},x7:function(){return a}});var r=n(75580),o=n(2784),i=n(28316);let a=e=>({name:"arrow",options:e,fn(t){let{element:n,padding:o}="function"==typeof e?e(t):e;return n&&({}).hasOwnProperty.call(n,"current")?null!=n.current?(0,r.x7)({element:n.current,padding:o}).fn(t):{}:n?(0,r.x7)({element:n,padding:o}).fn(t):{}}});var s="undefined"!=typeof document?o.useLayoutEffect:o.useEffect;function c(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(!c(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)&&!c(e[n],t[n]))return!1}return!0}return e!=e&&t!=t}function l(e){return"undefined"==typeof window?1:(e.ownerDocument.defaultView||window).devicePixelRatio||1}function u(e,t){let n=l(e);return Math.round(t*n)/n}function d(e){let t=o.useRef(e);return s(()=>{t.current=e}),t}function p(e){void 0===e&&(e={});let{placement:t="bottom",strategy:n="absolute",middleware:a=[],platform:p,elements:{reference:f,floating:m}={},transform:h=!0,whileElementsMounted:g,open:v}=e,[b,y]=o.useState({x:0,y:0,strategy:n,placement:t,middlewareData:{},isPositioned:!1}),[x,k]=o.useState(a);c(x,a)||k(a);let[w,j]=o.useState(null),[C,S]=o.useState(null),I=o.useCallback(e=>{e!==P.current&&(P.current=e,j(e))},[]),M=o.useCallback(e=>{e!==R.current&&(R.current=e,S(e))},[]),T=f||w,E=m||C,P=o.useRef(null),R=o.useRef(null),N=o.useRef(b),_=null!=g,F=d(g),B=d(p),A=o.useCallback(()=>{if(!P.current||!R.current)return;let e={placement:t,strategy:n,middleware:x};B.current&&(e.platform=B.current),(0,r.oo)(P.current,R.current,e).then(e=>{let t={...e,isPositioned:!0};L.current&&!c(N.current,t)&&(N.current=t,i.flushSync(()=>{y(t)}))})},[x,t,n,B]);s(()=>{!1===v&&N.current.isPositioned&&(N.current.isPositioned=!1,y(e=>({...e,isPositioned:!1})))},[v]);let L=o.useRef(!1);s(()=>(L.current=!0,()=>{L.current=!1}),[]),s(()=>{if(T&&(P.current=T),E&&(R.current=E),T&&E){if(F.current)return F.current(T,E,A);A()}},[T,E,A,F,_]);let D=o.useMemo(()=>({reference:P,floating:R,setReference:I,setFloating:M}),[I,M]),$=o.useMemo(()=>({reference:T,floating:E}),[T,E]),z=o.useMemo(()=>{let e={position:n,left:0,top:0};if(!$.floating)return e;let t=u($.floating,b.x),r=u($.floating,b.y);return h?{...e,transform:"translate("+t+"px, "+r+"px)",...l($.floating)>=1.5&&{willChange:"transform"}}:{position:n,left:t,top:r}},[n,h,$.floating,b.x,b.y]);return o.useMemo(()=>({...b,update:A,refs:D,elements:$,floatingStyles:z}),[b,A,D,$,z])}},63607:function(e,t,n){"use strict";n.d(t,{e0:function(){return F},Qu:function(){return B},tj:function(){return _},bQ:function(){return z},YF:function(){return H},KK:function(){return O},XI:function(){return R},NI:function(){return W},qs:function(){return q}});var r=n(2784),o=n.t(r,2),i=n(10712);function a(e){let t=e.activeElement;for(;(null==(n=t)||null==(n=n.shadowRoot)?void 0:n.activeElement)!=null;){var n;t=t.shadowRoot.activeElement}return t}function s(e,t){if(!e||!t)return!1;let n=null==t.getRootNode?void 0:t.getRootNode();if(e.contains(t))return!0;if(n&&(0,i.Zq)(n)){let n=t;for(;n;){if(e===n)return!0;n=n.parentNode||n.host}}return!1}function c(){let e=navigator.userAgentData;return null!=e&&e.platform?e.platform:navigator.platform}function l(){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}function u(){let e=/android/i;return e.test(c())||e.test(l())}function d(e,t){let n=["mouse","pen"];return t||n.push("",void 0),n.includes(e)}function p(e){return(null==e?void 0:e.ownerDocument)||document}function f(e,t){return null!=t&&("composedPath"in e?e.composedPath().includes(t):null!=e.target&&t.contains(e.target))}function m(e){return"composedPath"in e?e.composedPath()[0]:e.target}var h=n(92416);n(28316);let g=o["useInsertionEffect".toString()]||(e=>e());function v(e){let t=r.useRef(()=>{});return g(()=>{t.current=e}),r.useCallback(function(){for(var e=arguments.length,n=Array(e),r=0;r"floating-ui-"+x++,w=o["useId".toString()]||function(){let[e,t]=r.useState(()=>y?k():void 0);return b(()=>{null==e&&t(k())},[]),r.useEffect(()=>{y||(y=!0)},[]),e},j=r.createContext(null),C=r.createContext(null),S=()=>{var e;return(null==(e=r.useContext(j))?void 0:e.id)||null},I=()=>r.useContext(C);function M(e){return"data-floating-ui-"+e}function T(e){let t=(0,r.useRef)(e);return b(()=>{t.current=e}),t}let E=M("safe-polygon");function P(e,t,n){return n&&!d(n)?0:"number"==typeof e?e:null==e?void 0:e[t]}function R(e,t){void 0===t&&(t={});let{open:n,onOpenChange:o,dataRef:a,events:c,elements:{domReference:l,floating:u},refs:f}=e,{enabled:m=!0,delay:h=0,handleClose:g=null,mouseOnly:v=!1,restMs:y=0,move:x=!0}=t,k=I(),w=S(),j=T(g),C=T(h),M=r.useRef(),R=r.useRef(),N=r.useRef(),_=r.useRef(),F=r.useRef(!0),B=r.useRef(!1),A=r.useRef(()=>{}),L=r.useCallback(()=>{var e;let t=null==(e=a.current.openEvent)?void 0:e.type;return(null==t?void 0:t.includes("mouse"))&&"mousedown"!==t},[a]);r.useEffect(()=>{if(m)return c.on("openchange",e),()=>{c.off("openchange",e)};function e(e){let{open:t}=e;t||(clearTimeout(R.current),clearTimeout(_.current),F.current=!0)}},[m,c]),r.useEffect(()=>{if(!m||!j.current||!n)return;function e(e){L()&&o(!1,e,"hover")}let t=p(u).documentElement;return t.addEventListener("mouseleave",e),()=>{t.removeEventListener("mouseleave",e)}},[u,n,o,m,j,L]);let D=r.useCallback(function(e,t,n){void 0===t&&(t=!0),void 0===n&&(n="hover");let r=P(C.current,"close",M.current);r&&!N.current?(clearTimeout(R.current),R.current=setTimeout(()=>o(!1,e,n),r)):t&&(clearTimeout(R.current),o(!1,e,n))},[C,o]),$=r.useCallback(()=>{A.current(),N.current=void 0},[]),z=r.useCallback(()=>{if(B.current){let e=p(f.floating.current).body;e.style.pointerEvents="",e.removeAttribute(E),B.current=!1}},[f]);return r.useEffect(()=>{if(m&&(0,i.kK)(l))return n&&l.addEventListener("mouseleave",f),null==u||u.addEventListener("mouseleave",f),x&&l.addEventListener("mousemove",r,{once:!0}),l.addEventListener("mouseenter",r),l.addEventListener("mouseleave",c),()=>{n&&l.removeEventListener("mouseleave",f),null==u||u.removeEventListener("mouseleave",f),x&&l.removeEventListener("mousemove",r),l.removeEventListener("mouseenter",r),l.removeEventListener("mouseleave",c)};function t(){return!!a.current.openEvent&&["click","mousedown"].includes(a.current.openEvent.type)}function r(e){if(clearTimeout(R.current),F.current=!1,v&&!d(M.current)||y>0&&0===P(C.current,"open"))return;let t=P(C.current,"open",M.current);t?R.current=setTimeout(()=>{o(!0,e,"hover")},t):o(!0,e,"hover")}function c(r){if(t())return;A.current();let o=p(u);if(clearTimeout(_.current),j.current){n||clearTimeout(R.current),N.current=j.current({...e,tree:k,x:r.clientX,y:r.clientY,onClose(){z(),$(),D(r,!0,"safe-polygon")}});let t=N.current;o.addEventListener("mousemove",t),A.current=()=>{o.removeEventListener("mousemove",t)};return}"touch"===M.current&&s(u,r.relatedTarget)||D(r)}function f(n){t()||null==j.current||j.current({...e,tree:k,x:n.clientX,y:n.clientY,onClose(){z(),$(),D(n)}})(n)}},[l,u,m,e,v,y,x,D,$,z,o,n,k,C,j,a]),b(()=>{var e,t;if(m&&n&&null!=(e=j.current)&&e.__options.blockPointerEvents&&L()){let e=p(u).body;if(e.setAttribute(E,""),e.style.pointerEvents="none",B.current=!0,(0,i.kK)(l)&&u){let e=null==k||null==(t=k.nodesRef.current.find(e=>e.id===w))||null==(t=t.context)?void 0:t.elements.floating;return e&&(e.style.pointerEvents=""),l.style.pointerEvents="auto",u.style.pointerEvents="auto",()=>{l.style.pointerEvents="",u.style.pointerEvents=""}}}},[m,n,w,u,l,k,j,L]),b(()=>{n||(M.current=void 0,$(),z())},[n,$,z]),r.useEffect(()=>()=>{$(),clearTimeout(R.current),clearTimeout(_.current),z()},[m,l,$,z]),r.useMemo(()=>{if(!m)return{};function e(e){M.current=e.pointerType}return{reference:{onPointerDown:e,onPointerEnter:e,onMouseMove(e){n||0===y||(clearTimeout(_.current),_.current=setTimeout(()=>{F.current||o(!0,e.nativeEvent,"hover")},y))}},floating:{onMouseEnter(){clearTimeout(R.current)},onMouseLeave(e){D(e.nativeEvent,!1)}}}},[m,y,n,o,D])}let N=r.createContext({delay:0,initialDelay:0,timeoutMs:0,currentId:null,setCurrentId:()=>{},setState:()=>{},isInstantPhase:!1}),_=()=>r.useContext(N),F=e=>{let{children:t,delay:n,timeoutMs:o=0}=e,[i,a]=r.useReducer((e,t)=>({...e,...t}),{delay:n,timeoutMs:o,initialDelay:n,currentId:null,isInstantPhase:!1}),s=r.useRef(null),c=r.useCallback(e=>{a({currentId:e})},[]);return b(()=>{i.currentId?null===s.current?s.current=i.currentId:a({isInstantPhase:!0}):(a({isInstantPhase:!1}),s.current=null)},[i.currentId]),r.createElement(N.Provider,{value:r.useMemo(()=>({...i,setState:a,setCurrentId:c}),[i,c])},t)},B=(e,t)=>{let{open:n,onOpenChange:r}=e,{id:o}=t,{currentId:i,setCurrentId:a,initialDelay:s,setState:c,timeoutMs:l}=_();b(()=>{i&&(c({delay:{open:1,close:P(s,"close")}}),i!==o&&r(!1))},[o,r,c,i,s]),b(()=>{function e(){r(!1),c({delay:s,currentId:null})}if(!n&&i===o){if(l){let t=window.setTimeout(e,l);return()=>{clearTimeout(t)}}e()}},[n,c,i,o,r,s,l]),b(()=>{n&&a(o)},[n,a,o])};function A(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 L={pointerdown:"onPointerDown",mousedown:"onMouseDown",click:"onClick"},D={pointerdown:"onPointerDownCapture",mousedown:"onMouseDownCapture",click:"onClickCapture"},$=e=>{var t,n;return{escapeKey:"boolean"==typeof e?e:null!=(t=null==e?void 0:e.escapeKey)&&t,outsidePress:"boolean"==typeof e?e:null==(n=null==e?void 0:e.outsidePress)||n}};function z(e,t){void 0===t&&(t={});let{open:n,onOpenChange:o,nodeId:a,elements:{reference:c,domReference:l,floating:u},dataRef:d}=e,{enabled:h=!0,escapeKey:g=!0,outsidePress:b=!0,outsidePressEvent:y="pointerdown",referencePress:x=!1,referencePressEvent:k="pointerdown",ancestorScroll:w=!1,bubbles:j,capture:C}=t,S=I(),T=v("function"==typeof b?b:()=>!1),E="function"==typeof b?T:b,P=r.useRef(!1),R=r.useRef(!1),{escapeKey:N,outsidePress:_}=$(j),{escapeKey:F,outsidePress:B}=$(C),z=v(e=>{if(!n||!h||!g||"Escape"!==e.key)return;let t=S?A(S.nodesRef.current,a):[];if(!N&&(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}o(!1,"nativeEvent"in e?e.nativeEvent:e,"escape-key")}),H=v(e=>{var t;let n=()=>{var t;z(e),null==(t=m(e))||t.removeEventListener("keydown",n)};null==(t=m(e))||t.addEventListener("keydown",n)}),O=v(e=>{let t=P.current;P.current=!1;let n=R.current;if(R.current=!1,"click"===y&&n||t||"function"==typeof E&&!E(e))return;let r=m(e),c="["+M("inert")+"]",d=p(u).querySelectorAll(c),h=(0,i.kK)(r)?r:null;for(;h&&!(0,i.Py)(h);){let e=(0,i.Ow)(h);if((0,i.Py)(e)||!(0,i.kK)(e))break;h=e}if(d.length&&(0,i.kK)(r)&&!r.matches("html,body")&&!s(r,u)&&Array.from(d).every(e=>!s(h,e)))return;if((0,i.Re)(r)&&u){let t=r.clientWidth>0&&r.scrollWidth>r.clientWidth,n=r.clientHeight>0&&r.scrollHeight>r.clientHeight,o=n&&e.offsetX>r.clientWidth;if(n&&"rtl"===(0,i.Dx)(r).direction&&(o=e.offsetX<=r.offsetWidth-r.clientWidth),o||t&&e.offsetY>r.clientHeight)return}let g=S&&A(S.nodesRef.current,a).some(t=>{var n;return f(e,null==(n=t.context)?void 0:n.elements.floating)});if(f(e,u)||f(e,l)||g)return;let v=S?A(S.nodesRef.current,a):[];if(v.length>0){let e=!0;if(v.forEach(t=>{var n;if(null!=(n=t.context)&&n.open&&!t.context.dataRef.current.__outsidePressBubbles){e=!1;return}}),!e)return}o(!1,e,"outside-press")}),Z=v(e=>{var t;let n=()=>{var t;O(e),null==(t=m(e))||t.removeEventListener(y,n)};null==(t=m(e))||t.addEventListener(y,n)});return r.useEffect(()=>{if(!n||!h)return;function e(e){o(!1,e,"ancestor-scroll")}d.current.__escapeKeyBubbles=N,d.current.__outsidePressBubbles=_;let t=p(u);g&&t.addEventListener("keydown",F?H:z,F),E&&t.addEventListener(y,B?Z:O,B);let r=[];return w&&((0,i.kK)(l)&&(r=(0,i.Kx)(l)),(0,i.kK)(u)&&(r=r.concat((0,i.Kx)(u))),!(0,i.kK)(c)&&c&&c.contextElement&&(r=r.concat((0,i.Kx)(c.contextElement)))),(r=r.filter(e=>{var n;return e!==(null==(n=t.defaultView)?void 0:n.visualViewport)})).forEach(t=>{t.addEventListener("scroll",e,{passive:!0})}),()=>{g&&t.removeEventListener("keydown",F?H:z,F),E&&t.removeEventListener(y,B?Z:O,B),r.forEach(t=>{t.removeEventListener("scroll",e)})}},[d,u,l,c,g,E,y,n,o,w,h,N,_,z,F,H,O,B,Z]),r.useEffect(()=>{P.current=!1},[E,y]),r.useMemo(()=>h?{reference:{onKeyDown:z,[L[k]]:e=>{x&&o(!1,e.nativeEvent,"reference-press")}},floating:{onKeyDown:z,onMouseDown(){R.current=!0},onMouseUp(){R.current=!0},[D[y]]:()=>{P.current=!0}}}:{},[h,x,y,k,o,z])}function H(e){var t;void 0===e&&(e={});let{open:n=!1,onOpenChange:o,nodeId:a}=e,[s,c]=r.useState(null),l=(null==(t=e.elements)?void 0:t.reference)||s,u=(0,h.YF)(e),d=I(),p=null!=S(),f=v((e,t,n)=>{e&&(g.current.openEvent=t),y.emit("openchange",{open:e,event:t,reason:n,nested:p}),null==o||o(e,t,n)}),m=r.useRef(null),g=r.useRef({}),y=r.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],x=w(),k=r.useCallback(e=>{let t=(0,i.kK)(e)?{getBoundingClientRect:()=>e.getBoundingClientRect(),contextElement:e}:e;u.refs.setReference(t)},[u.refs]),j=r.useCallback(e=>{((0,i.kK)(e)||null===e)&&(m.current=e,c(e)),((0,i.kK)(u.refs.reference.current)||null===u.refs.reference.current||null!==e&&!(0,i.kK)(e))&&u.refs.setReference(e)},[u.refs]),C=r.useMemo(()=>({...u.refs,setReference:j,setPositionReference:k,domReference:m}),[u.refs,j,k]),M=r.useMemo(()=>({...u.elements,domReference:l}),[u.elements,l]),T=r.useMemo(()=>({...u,refs:C,elements:M,dataRef:g,nodeId:a,floatingId:x,events:y,open:n,onOpenChange:f}),[u,a,x,y,n,f,C,M]);return b(()=>{let e=null==d?void 0:d.nodesRef.current.find(e=>e.id===a);e&&(e.context=T)}),r.useMemo(()=>({...u,context:T,refs:C,elements:M}),[u,C,M,T])}function O(e,t){void 0===t&&(t={});let{open:n,onOpenChange:o,events:d,refs:f,elements:{domReference:h}}=e,{enabled:g=!0,visibleOnly:v=!0}=t,b=r.useRef(!1),y=r.useRef(),x=r.useRef(!0);return r.useEffect(()=>{if(!g)return;let e=(0,i.Jj)(h);function t(){!n&&(0,i.Re)(h)&&h===a(p(h))&&(b.current=!0)}function r(){x.current=!0}return e.addEventListener("blur",t),e.addEventListener("keydown",r,!0),()=>{e.removeEventListener("blur",t),e.removeEventListener("keydown",r,!0)}},[h,n,g]),r.useEffect(()=>{if(g)return d.on("openchange",e),()=>{d.off("openchange",e)};function e(e){let{reason:t}=e;("reference-press"===t||"escape-key"===t)&&(b.current=!0)}},[d,g]),r.useEffect(()=>()=>{clearTimeout(y.current)},[]),r.useMemo(()=>g?{reference:{onPointerDown(e){var t;t=e.nativeEvent,!l().includes("jsdom/")&&(!u()&&0===t.width&&0===t.height||u()&&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&&"touch"===t.pointerType)||(x.current=!1)},onMouseLeave(){b.current=!1},onFocus(e){if(b.current)return;let t=m(e.nativeEvent);if(v&&(0,i.kK)(t))try{if(/apple/i.test(navigator.vendor)&&c().toLowerCase().startsWith("mac")&&!navigator.maxTouchPoints)throw Error();if(!t.matches(":focus-visible"))return}catch(e){if(!x.current&&!((0,i.Re)(t)&&t.matches("input:not([type='hidden']):not([disabled]),[contenteditable]:not([contenteditable='false']),textarea:not([disabled])")))return}o(!0,e.nativeEvent,"focus")},onBlur(e){b.current=!1;let t=e.relatedTarget,n=(0,i.kK)(t)&&t.hasAttribute(M("focus-guard"))&&"outside"===t.getAttribute("data-type");y.current=window.setTimeout(()=>{let r=a(h?h.ownerDocument:document);if(t||r!==h){if(s(f.floating.current,r)||s(h,r)||n)return;o(!1,e.nativeEvent,"focus")}})}}}:{},[g,v,h,f,o])}let Z="active",V="selected";function G(e,t,n){let r=new Map,o="item"===n,i=e;if(o&&e){let{[Z]:t,[V]:n,...r}=e;i=r}return{..."floating"===n&&{tabIndex:-1},...i,...t.map(t=>{let r=t?t[n]:null;return"function"==typeof r?e?r(e):null:r}).concat(e).reduce((e,t)=>(t&&Object.entries(t).forEach(t=>{let[n,i]=t;if(!(o&&[Z,V].includes(n))){if(0===n.indexOf("on")){if(r.has(n)||r.set(n,[]),"function"==typeof i){var a;null==(a=r.get(n))||a.push(i),e[n]=function(){for(var e,t=arguments.length,o=Array(t),i=0;ie(...o)).find(e=>void 0!==e)}}}else e[n]=i}}),e),{})}}function W(e){void 0===e&&(e=[]);let t=e,n=r.useCallback(t=>G(t,e,"reference"),t),o=r.useCallback(t=>G(t,e,"floating"),t),i=r.useCallback(t=>G(t,e,"item"),e.map(e=>null==e?void 0:e.item));return r.useMemo(()=>({getReferenceProps:n,getFloatingProps:o,getItemProps:i}),[n,o,i])}let Y=new Map([["select","listbox"],["combobox","listbox"],["label",!1]]);function q(e,t){var n;void 0===t&&(t={});let{open:o,floatingId:i}=e,{enabled:a=!0,role:s="dialog"}=t,c=null!=(n=Y.get(s))?n:s,l=w(),u=null!=S();return r.useMemo(()=>{if(!a)return{};let e={id:i,...c&&{role:c}};return"tooltip"===c||"label"===s?{reference:{["aria-"+("label"===s?"labelledby":"describedby")]:o?i:void 0},floating:e}:{reference:{"aria-expanded":o?"true":"false","aria-haspopup":"alertdialog"===c?"dialog":c,"aria-controls":o?i:void 0,..."listbox"===c&&{role:"combobox"},..."menu"===c&&{id:l},..."menu"===c&&u&&{role:"menuitem"},..."select"===s&&{"aria-autocomplete":"none"},..."combobox"===s&&{"aria-autocomplete":"list"}},floating:{...e,..."menu"===c&&{"aria-labelledby":l}},item(e){let{active:t,selected:n}=e,r={role:"option",...t&&{id:i+"-option"}};switch(s){case"select":return{...r,"aria-selected":t&&n};case"combobox":return{...r,...t&&{"aria-selected":!0}}}return{}}}},[a,s,c,o,i,l,u])}},10712:function(e,t,n){"use strict";function r(e){return a(e)?(e.nodeName||"").toLowerCase():"#document"}function o(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function i(e){var t;return null==(t=(a(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function a(e){return e instanceof Node||e instanceof o(e).Node}function s(e){return e instanceof Element||e instanceof o(e).Element}function c(e){return e instanceof HTMLElement||e instanceof o(e).HTMLElement}function l(e){return"undefined"!=typeof ShadowRoot&&(e instanceof ShadowRoot||e instanceof o(e).ShadowRoot)}function u(e){let{overflow:t,overflowX:n,overflowY:r,display:o}=g(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&!["inline","contents"].includes(o)}function d(e){return["table","td","th"].includes(r(e))}function p(e){let t=m(),n=g(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 f(e){let t=b(e);for(;c(t)&&!h(t);){if(p(t))return t;t=b(t)}return null}function m(){return"undefined"!=typeof CSS&&!!CSS.supports&&CSS.supports("-webkit-backdrop-filter","none")}function h(e){return["html","body","#document"].includes(r(e))}function g(e){return o(e).getComputedStyle(e)}function v(e){return s(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function b(e){if("html"===r(e))return e;let t=e.assignedSlot||e.parentNode||l(e)&&e.host||i(e);return l(t)?t.host:t}n.d(t,{Dx:function(){return g},Jj:function(){return o},Kx:function(){return function e(t,n,r){var i;void 0===n&&(n=[]),void 0===r&&(r=!0);let a=function e(t){let n=b(t);return h(n)?t.ownerDocument?t.ownerDocument.body:t.body:c(n)&&u(n)?n:e(n)}(t),s=a===(null==(i=t.ownerDocument)?void 0:i.body),l=o(a);return s?n.concat(l,l.visualViewport||[],u(a)?a:[],l.frameElement&&r?e(l.frameElement):[]):n.concat(a,e(a,[],r))}},Lw:function(){return v},Ow:function(){return b},Pf:function(){return m},Py:function(){return h},Re:function(){return c},Ze:function(){return d},Zq:function(){return l},ao:function(){return u},gQ:function(){return f},hT:function(){return p},kK:function(){return s},tF:function(){return i},wk:function(){return r}})},4029:function(e,t,n){"use strict";n.d(t,{Fp:function(){return o},GW:function(){return a},I4:function(){return h},JB:function(){return C},KX:function(){return k},NM:function(){return i},Qq:function(){return g},Rn:function(){return m},VV:function(){return r},Wh:function(){return v},gy:function(){return y},hp:function(){return f},i8:function(){return b},k3:function(){return p},ku:function(){return d},pw:function(){return w},uZ:function(){return u},yd:function(){return j},ze:function(){return s}});let r=Math.min,o=Math.max,i=Math.round,a=Math.floor,s=e=>({x:e,y:e}),c={left:"right",right:"left",bottom:"top",top:"bottom"},l={start:"end",end:"start"};function u(e,t,n){return o(e,r(t,n))}function d(e,t){return"function"==typeof e?e(t):e}function p(e){return e.split("-")[0]}function f(e){return e.split("-")[1]}function m(e){return"x"===e?"y":"x"}function h(e){return"y"===e?"height":"width"}function g(e){return["top","bottom"].includes(p(e))?"y":"x"}function v(e){return m(g(e))}function b(e,t,n){void 0===n&&(n=!1);let r=f(e),o=v(e),i=h(o),a="x"===o?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return t.reference[i]>t.floating[i]&&(a=w(a)),[a,w(a)]}function y(e){let t=w(e);return[x(e),t,x(t)]}function x(e){return e.replace(/start|end/g,e=>l[e])}function k(e,t,n,r){let o=f(e),i=function(e,t,n){let r=["left","right"],o=["right","left"];switch(e){case"top":case"bottom":if(n)return t?o:r;return t?r:o;case"left":case"right":return t?["top","bottom"]:["bottom","top"];default:return[]}}(p(e),"start"===n,r);return o&&(i=i.map(e=>e+"-"+o),t&&(i=i.concat(i.map(x)))),i}function w(e){return e.replace(/left|right|bottom|top/g,e=>c[e])}function j(e){return"number"!=typeof e?{top:0,right:0,bottom:0,left:0,...e}:{top:e,right:e,bottom:e,left:e}}function C(e){return{...e,top:e.y,left:e.x,right:e.x+e.width,bottom:e.y+e.height}}},45392:function(e,t,n){"use strict";n.d(t,{Z:function(){return s},a:function(){return a}});var r=n(2784);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 s(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)}},73681:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var r=n(2784),o={outline:{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"},filled:{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"currentColor",stroke:"none"}};/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */let i=(e,t,n,i)=>{let a=(0,r.forwardRef)(({color:n="currentColor",size:a=24,stroke:s=2,className:c,children:l,...u},d)=>(0,r.createElement)("svg",{ref:d,...o[e],width:a,height:a,className:["tabler-icon",`tabler-icon-${t}`,c].join(" "),..."filled"===e?{fill:n}:{strokeWidth:s,stroke:n},...u},[...i.map(([e,t])=>(0,r.createElement)(e,t)),...Array.isArray(l)?l:[l]]));return a.displayName=`${n}`,a}},59443:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},9705:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","check","IconCheck",[["path",{d:"M5 12l5 5l10 -10",key:"svg-0"}]])},92536:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","chevron-down","IconChevronDown",[["path",{d:"M6 9l6 6l6 -6",key:"svg-0"}]])},90982:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},43300:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},79797:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},97189:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},48671:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},59660:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},19289:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},4680:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},27111:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},90664:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},40991:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},47608:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});/** - * @license @tabler/icons-react v3.3.0 - MIT - * - * This source code is licensed under the MIT license. - * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","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"}]])},40489:function(e,t,n){"use strict";t.Z=function(){for(var e,t,n=0,r="",o=arguments.length;n({group:{"--ai-border-width":(0,f.h)(t)}})),b=(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:f,borderWidth:m,variant:b,mod:y,...x}=(0,a.w)("ActionIconGroup",g,e),k=(0,s.y)({name:"ActionIconGroup",props:n,classes:h,className:o,style:i,classNames:l,styles:u,unstyled:d,vars:f,varsResolver:v,rootSelector:"group"});return(0,r.jsx)(c.x,{...k("group"),ref:t,variant:b,mod:[{"data-orientation":p},y],role:"group",...x})});b.classes=h,b.displayName="@mantine/core/ActionIconGroup";let y={},x=(0,i.Z)((e,{size:t,radius:n,variant:r,gradient:i,color:a,autoContrast:s})=>{let c=e.variantColorResolver({color:a||e.primaryColor,theme:e,gradient:i,variant:r||"filled",autoContrast:s});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?c.background:void 0,"--ai-hover":a||r?c.hover:void 0,"--ai-hover-color":a||r?c.hoverColor:void 0,"--ai-color":c.color,"--ai-bd":a||r?c.border:void 0}}}),k=(0,l.b)((e,t)=>{let n=(0,a.w)("ActionIcon",y,e),{className:o,unstyled:i,variant:l,classNames:f,styles:m,style:g,loading:v,loaderProps:b,size:k,color:w,radius:j,__staticSelector:C,gradient:S,vars:I,children:M,disabled:T,"data-disabled":E,autoContrast:P,mod:R,...N}=n,_=(0,s.y)({name:["ActionIcon",C],props:n,className:o,style:g,classes:h,classNames:f,styles:m,unstyled:i,vars:I,varsResolver:x});return(0,r.jsxs)(p.k,{..._("root",{active:!T&&!v&&!E}),...N,unstyled:i,variant:l,size:k,disabled:T||v,ref:t,mod:[{loading:v,disabled:T||E},R],children:[(0,r.jsx)(d.u,{mounted:!!v,transition:"slide-down",duration:150,children:e=>(0,r.jsx)(c.x,{component:"span",..._("loader",{style:e}),"aria-hidden":!0,children:(0,r.jsx)(u.a,{color:"var(--ai-color)",size:"calc(var(--ai-size) * 0.55)",...b})})}),(0,r.jsx)(c.x,{component:"span",mod:{loading:v},..._("icon"),children:M})]})});k.classes=h,k.displayName="@mantine/core/ActionIcon",k.Group=b},71873:function(e,t,n){"use strict";n.d(t,{e:function(){return u}});var r=n(52322),o=n(40489);n(2784);var i=n(38483),a=n(33502),s=n(8582),c={root:"m_849cf0da"};let l={underline:"hover"},u=(0,a.b)((e,t)=>{let{underline:n,className:a,unstyled:u,mod:d,...p}=(0,i.w)("Anchor",l,e);return(0,r.jsx)(s.x,{component:"a",ref:t,className:(0,o.Z)({[c.root]:!u},a),...p,mod:[{underline:n},d],__staticSelector:"Anchor",unstyled:u})});u.classes=c,u.displayName="@mantine/core/Anchor"},94856:function(e,t,n){"use strict";n.d(t,{V:function(){return v}});var r=n(52322),o=n(58898);n(2784);var i=n(91482),a=n(11200),s=n(46403),c=n(13588),l=n(20754),u=n(38483),d=n(46690),p=n(28559),f=n(82027),m={root:"m_ddec01c0",icon:"m_dde7bd57",cite:"m_dde51a35"};let h={iconSize:48},g=(0,a.Z)((e,{color:t,iconSize:n,radius:r})=>{let a=(0,s.E)({color:t||e.primaryColor,theme:e,colorScheme:"dark"}),u=(0,s.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,c.p)(t,e),"--bq-icon-size":(0,o.h)(n),"--bq-radius":(0,i.H5)(r)}}}),v=(0,f.d)((e,t)=>{let n=(0,u.w)("Blockquote",h,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,children:f,icon:v,iconSize:b,cite:y,...x}=n,k=(0,d.y)({name:"Blockquote",classes:m,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:g});return(0,r.jsxs)(p.x,{component:"blockquote",ref:t,...k("root"),...x,children:[v&&(0,r.jsx)("span",{...k("icon"),children:v}),f,y&&(0,r.jsx)("cite",{...k("cite"),children:y})]})});v.classes=m,v.displayName="@mantine/core/Blockquote"},23205:function(e,t,n){"use strict";n.d(t,{O:function(){return h}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(13588),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d=n(63409),p={root:"m_fea6bf1a",burger:"m_d4fb9cad"};let f={},m=(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}})),h=(0,u.d)((e,t)=>{let n=(0,s.w)("Burger",f,e),{classNames:o,className:i,style:a,styles:u,unstyled:h,vars:g,opened:v,children:b,transitionDuration:y,transitionTimingFunction:x,...k}=n,w=(0,c.y)({name:"Burger",classes:p,props:n,className:i,style:a,classNames:o,styles:u,unstyled:h,vars:g,varsResolver:m});return(0,r.jsxs)(d.k,{...w("root"),ref:t,...k,children:[(0,r.jsx)(l.x,{mod:["reduce-motion",{opened:v}],...w("burger")}),b]})});h.classes=p,h.displayName="@mantine/core/Burger"},17115:function(e,t,n){"use strict";n.d(t,{z:function(){return w}});var r=n(52322),o=n(58898);n(2784);var i=n(91482),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(33502),d=n(12491),p=n(96321),f=n(63409),m=n(82027),h={root:"m_77c9d27d",inner:"m_80f1301b",label:"m_811560b9",section:"m_a74036a",loader:"m_a25b86ee",group:"m_80d6d844"};let g={orientation:"horizontal"},v=(0,a.Z)((e,{borderWidth:t})=>({group:{"--button-border-width":(0,o.h)(t)}})),b=(0,m.d)((e,t)=>{let n=(0,s.w)("ButtonGroup",g,e),{className:o,style:i,classNames:a,styles:u,unstyled:d,orientation:p,vars:f,borderWidth:m,variant:b,mod:y,...x}=(0,s.w)("ButtonGroup",g,e),k=(0,c.y)({name:"ButtonGroup",props:n,classes:h,className:o,style:i,classNames:a,styles:u,unstyled:d,vars:f,varsResolver:v,rootSelector:"group"});return(0,r.jsx)(l.x,{...k("group"),ref:t,variant:b,mod:[{"data-orientation":p},y],role:"group",...x})});b.classes=h,b.displayName="@mantine/core/ButtonGroup";let y={in:{opacity:1,transform:`translate(-50%, calc(-50% + ${(0,o.h)(1)}))`},out:{opacity:0,transform:"translate(-50%, -200%)"},common:{transformOrigin:"center"},transitionProperty:"transform, opacity"},x={},k=(0,a.Z)((e,{radius:t,color:n,gradient:r,variant:o,size:a,justify:s,autoContrast:c})=>{let l=e.variantColorResolver({color:n||e.primaryColor,theme:e,gradient:r,variant:o||"filled",autoContrast:c});return{root:{"--button-justify":s,"--button-height":(0,i.ap)(a,"button-height"),"--button-padding-x":(0,i.ap)(a,"button-padding-x"),"--button-fz":a?.includes("compact")?(0,i.yv)(a.replace("compact-","")):(0,i.yv)(a),"--button-radius":void 0===t?void 0:(0,i.H5)(t),"--button-bg":n||o?l.background:void 0,"--button-hover":n||o?l.hover:void 0,"--button-color":l.color,"--button-bd":n||o?l.border:void 0,"--button-hover-color":n||o?l.hoverColor:void 0}}}),w=(0,u.b)((e,t)=>{let n=(0,s.w)("Button",x,e),{style:o,vars:i,className:a,color:u,disabled:m,children:g,leftSection:v,rightSection:b,fullWidth:w,variant:j,radius:C,loading:S,loaderProps:I,gradient:M,classNames:T,styles:E,unstyled:P,"data-disabled":R,autoContrast:N,mod:_,...F}=n,B=(0,c.y)({name:"Button",props:n,classes:h,className:a,style:o,classNames:T,styles:E,unstyled:P,vars:i,varsResolver:k}),A=!!v,L=!!b;return(0,r.jsxs)(f.k,{ref:t,...B("root",{active:!m&&!S&&!R}),unstyled:P,variant:j,disabled:m||S,mod:[{disabled:m||R,loading:S,block:w,"with-left-section":A,"with-right-section":L},_],...F,children:[(0,r.jsx)(p.u,{mounted:!!S,transition:y,duration:150,children:e=>(0,r.jsx)(l.x,{component:"span",...B("loader",{style:e}),"aria-hidden":!0,children:(0,r.jsx)(d.a,{color:"var(--button-color)",size:"calc(var(--button-height) / 1.8)",...I})})}),(0,r.jsxs)("span",{...B("inner"),children:[v&&(0,r.jsx)(l.x,{component:"span",...B("section"),mod:{position:"left"},children:v}),(0,r.jsx)(l.x,{component:"span",mod:{loading:S},...B("label"),children:g}),b&&(0,r.jsx)(l.x,{component:"span",...B("section"),mod:{position:"right"},children:b})]})]})});w.classes=h,w.displayName="@mantine/core/Button",w.Group=b},40284:function(e,t,n){"use strict";n.d(t,{P:function(){return a},n:function(){return i}});var r=n(52322),o=n(58898);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(0,r.jsx)("svg",{viewBox:"0 0 10 7",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:i,"aria-hidden":!0,...n,children:(0,r.jsx)("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?(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 32 6","aria-hidden":!0,...t,children:(0,r.jsx)("rect",{width:"32",height:"6",fill:"currentColor",rx:"3"})}):(0,r.jsx)(i,{...t})}n(2784)},95047:function(e,t,n){"use strict";n.d(t,{X:function(){return H}});var r=n(52322),o=n(66178),i=n(2784),a=n(91482),s=n(11200),c=n(46403),l=n(13588),u=n(39568),d=n(90006),p=n(38483),f=n(46690),m=n(97072),h=n(28559),g=n(82027),v=n(50569),b=n(63409);let y=(0,i.createContext)(null),x=y.Provider,k=()=>(0,i.useContext)(y),[w,j]=(0,n(75336).V)();var C={card:"m_26775b0a"};let S={withBorder:!0},I=(0,s.Z)((e,{radius:t})=>({card:{"--card-radius":(0,a.H5)(t)}})),M=(0,g.d)((e,t)=>{let n=(0,p.w)("CheckboxCard",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,checked:u,mod:d,withBorder:m,value:h,onClick:g,...v}=n,y=(0,f.y)({name:"CheckboxCard",classes:C,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:I,rootSelector:"card"}),x=k(),j="boolean"==typeof u?u:x?.value.includes(h||"")||!1;return(0,r.jsx)(w,{value:{checked:j},children:(0,r.jsx)(b.k,{ref:t,mod:[{"with-border":m,checked:j},d],...y("card"),...v,role:"checkbox","aria-checked":j,onClick:e=>{g?.(e),x?.onChange(h||"")}})})});M.displayName="@mantine/core/CheckboxCard",M.classes=C;var T=n(9341),E=n(6941),P=n(62770);let R={},N=(0,g.d)((e,t)=>{let{value:n,defaultValue:o,onChange:i,size:a,wrapperProps:s,children:c,readOnly:l,...u}=(0,p.w)("CheckboxGroup",R,e),[d,f]=(0,T.C)({value:n,defaultValue:o,finalValue:[],onChange:i});return(0,r.jsx)(x,{value:{value:d,onChange:e=>{let t="string"==typeof e?e:e.currentTarget.value;l||f(d.includes(t)?d.filter(e=>e!==t):[...d,t])},size:a},children:(0,r.jsx)(E.I.Wrapper,{size:a,ref:t,...s,...u,labelElement:"div",__staticSelector:"CheckboxGroup",children:(0,r.jsx)(P.m,{role:"group",children:c})})})});N.classes=E.I.Wrapper.classes,N.displayName="@mantine/core/CheckboxGroup";var _=n(40284),F={indicator:"m_5e5256ee",icon:"m_1b1c543a","indicator--outline":"m_76e20374"};let B={icon:_.P},A=(0,s.Z)((e,{radius:t,color:n,size:r,iconColor:o,variant:i,autoContrast:s})=>{let p=(0,c.E)({color:n||e.primaryColor,theme:e}),f=p.isThemeColor&&void 0===p.shade?`var(--mantine-color-${p.color}-outline)`:p.color;return{indicator:{"--checkbox-size":(0,a.ap)(r,"checkbox-size"),"--checkbox-radius":void 0===t?void 0:(0,a.H5)(t),"--checkbox-color":"outline"===i?f:(0,l.p)(n,e),"--checkbox-icon-color":o?(0,l.p)(o,e):(0,d.o)(s,e)?(0,u.R)({color:n,theme:e,autoContrast:s}):void 0}}}),L=(0,g.d)((e,t)=>{let n=(0,p.w)("CheckboxIndicator",B,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,icon:u,indeterminate:d,radius:m,color:g,iconColor:v,autoContrast:b,checked:y,mod:x,variant:k,disabled:w,...C}=n,S=(0,f.y)({name:"CheckboxIndicator",classes:F,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:A,rootSelector:"indicator"}),I=j(),M="boolean"==typeof y||"boolean"==typeof d?y||d:I?.checked||!1;return(0,r.jsx)(h.x,{ref:t,...S("indicator",{variant:k}),variant:k,mod:[{checked:M,disabled:w},x],...C,children:(0,r.jsx)(u,{indeterminate:d,...S("icon")})})});L.displayName="@mantine/core/CheckboxIndicator",L.classes=F;var D={root:"m_bf2d988c",inner:"m_26062bec",input:"m_26063560",icon:"m_bf295423","input--outline":"m_215c4542"};let $={labelPosition:"right",icon:_.P},z=(0,s.Z)((e,{radius:t,color:n,size:r,iconColor:o,variant:i,autoContrast:s})=>{let p=(0,c.E)({color:n||e.primaryColor,theme:e}),f=p.isThemeColor&&void 0===p.shade?`var(--mantine-color-${p.color}-outline)`:p.color;return{root:{"--checkbox-size":(0,a.ap)(r,"checkbox-size"),"--checkbox-radius":void 0===t?void 0:(0,a.H5)(t),"--checkbox-color":"outline"===i?f:(0,l.p)(n,e),"--checkbox-icon-color":o?(0,l.p)(o,e):(0,d.o)(s,e)?(0,u.R)({color:n,theme:e,autoContrast:s}):void 0}}}),H=(0,g.d)((e,t)=>{let n=(0,p.w)("Checkbox",$,e),{classNames:i,className:a,style:s,styles:c,unstyled:l,vars:u,color:d,label:g,id:b,size:y,radius:x,wrapperProps:w,children:j,checked:C,labelPosition:S,description:I,error:M,disabled:T,variant:E,indeterminate:P,icon:R,rootRef:N,iconColor:_,onChange:F,autoContrast:B,mod:A,...L}=n,H=k(),O=y||H?.size,Z=(0,f.y)({name:"Checkbox",props:n,classes:D,className:a,style:s,classNames:i,styles:c,unstyled:l,vars:u,varsResolver:z}),{styleProps:V,rest:G}=(0,m.c)(L),W=(0,o.M)(b),Y=H?{checked:H.value.includes(G.value),onChange:e=>{H.onChange(e),F?.(e)}}:{};return(0,r.jsx)(v.Z,{...Z("root"),__staticSelector:"Checkbox",__stylesApiProps:n,id:W,size:O,labelPosition:S,label:g,description:I,error:M,disabled:T,classNames:i,styles:c,unstyled:l,"data-checked":Y.checked||C||void 0,variant:E,ref:N,mod:A,...V,...w,children:(0,r.jsxs)(h.x,{...Z("inner"),mod:{"data-label-position":S},children:[(0,r.jsx)(h.x,{component:"input",id:W,ref:t,checked:C,disabled:T,mod:{error:!!M,indeterminate:P},...Z("input",{focusable:!0,variant:E}),onChange:F,...G,...Y,type:"checkbox"}),(0,r.jsx)(R,{indeterminate:P,...Z("icon")})]})})});H.classes={...D,...v.J},H.displayName="@mantine/core/Checkbox",H.Group=N,H.Indicator=L,H.Card=M},2670:function(e,t,n){"use strict";n.d(t,{P:function(){return g}});var r=n(52322),o=n(58898),i=n(2784),a=n(91482),s=n(11200),c=n(38483),l=n(46690),u=n(33502),d=n(63409);let p=(0,i.forwardRef)(({size:e="var(--cb-icon-size, 70%)",style:t,...n},o)=>(0,r.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{...t,width:e,height:e},ref:o,...n,children:(0,r.jsx)("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"})}));p.displayName="@mantine/core/CloseIcon";var f={root:"m_86a44da5","root--subtle":"m_220c80f2"};let m={variant:"subtle"},h=(0,s.Z)((e,{size:t,radius:n,iconSize:r})=>({root:{"--cb-size":(0,a.ap)(t,"cb-size"),"--cb-radius":void 0===n?void 0:(0,a.H5)(n),"--cb-icon-size":(0,o.h)(r)}})),g=(0,u.b)((e,t)=>{let n=(0,c.w)("CloseButton",m,e),{iconSize:o,children:i,vars:a,radius:s,className:u,classNames:g,style:v,styles:b,unstyled:y,"data-disabled":x,disabled:k,variant:w,icon:j,mod:C,...S}=n,I=(0,l.y)({name:"CloseButton",props:n,className:u,style:v,classes:f,classNames:g,styles:b,unstyled:y,vars:a,varsResolver:h});return(0,r.jsxs)(d.k,{ref:t,...S,unstyled:y,variant:w,disabled:k,mod:[{disabled:k||x},C],...I("root",{variant:w,active:!k&&!x}),children:[j||(0,r.jsx)(p,{}),i]})});g.classes=f,g.displayName="@mantine/core/CloseButton"},45909:function(e,t,n){"use strict";n.d(t,{E:function(){return f}});var r=n(52322);n(2784);var o=n(11200),i=n(13588),a=n(38483),s=n(46690),c=n(28559),l=n(82027),u={root:"m_b183c0a2"};let d={},p=(0,o.Z)((e,{color:t})=>({root:{"--code-bg":t?(0,i.p)(t,e):void 0}})),f=(0,l.d)((e,t)=>{let n=(0,a.w)("Code",d,e),{classNames:o,className:i,style:l,styles:f,unstyled:m,vars:h,color:g,block:v,variant:b,mod:y,...x}=n,k=(0,s.y)({name:"Code",props:n,classes:u,className:i,style:l,classNames:o,styles:f,unstyled:m,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{component:v?"pre":"code",variant:b,ref:t,mod:[{block:v},y],...k("root"),...x,dir:"ltr"})});f.classes=u,f.displayName="@mantine/core/Code"},14726:function(e,t,n){"use strict";n.d(t,{k:function(){return u}});var r=n(52322),o=n(2784),i=n(58898),a=n(38483),s=n(53081),c=n(88957);let l={},u=(0,o.forwardRef)((e,t)=>{let{value:n,onChange:o,onChangeEnd:u,color:d,...p}=(0,a.w)("AlphaSlider",l,e);return(0,r.jsx)(s._,{...p,ref:t,value:n,onChange:e=>o?.(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,i.h)(8)} ${(0,i.h)(8)}`,backgroundPosition:`0 0, 0 ${(0,i.h)(4)}, ${(0,i.h)(4)} ${(0,i.h)(-4)}, ${(0,i.h)(-4)} 0`},{backgroundImage:`linear-gradient(90deg, transparent, ${d})`},{boxShadow:`rgba(0, 0, 0, .1) 0 0 0 ${(0,i.h)(1)} inset, rgb(0, 0, 0, .15) 0 0 ${(0,i.h)(4)} inset`}]})});u.displayName="@mantine/core/AlphaSlider"},40993:function(e,t,n){"use strict";n.d(t,{K:function(){return r},j:function(){return o}}),n(2784),n(52322);let[r,o]=(0,n(75336).V)(null)},37574:function(e,t,n){"use strict";n.d(t,{z:function(){return I}});var r=n(52322),o=n(2784),i=n(9341),a=n(71978),s=n(91482),c=n(11200),l=n(38483),u=n(46690),d=n(28559),p=n(82027),f=n(27009),m=n(14726),h=n(40993),g=n(59835),v=n(88957),b=n(93262),y=n(51438),x=n(55170);function k({className:e,onChange:t,onChangeEnd:n,value:i,saturationLabel:a,focusable:s=!0,size:c,color:l,onScrubStart:u,onScrubEnd:p,...f}){let{getStyles:m}=(0,h.j)(),[v,b]=(0,o.useState)({x:i.s/100,y:1-i.v/100}),k=(0,o.useRef)(v),{ref:w}=(0,y.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)}),p?.()},onScrubStart:u});(0,o.useEffect)(()=>{b({x:i.s/100,y:1-i.v/100})},[i.s,i.v]);let j=(e,r)=>{e.preventDefault();let o=(0,y.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(0,r.jsxs)(d.x,{...m("saturation"),ref:w,...f,role:"slider","aria-label":a,"aria-valuenow":v.x,"aria-valuetext":(0,g.Rt)("rgba",i),tabIndex:s?0:-1,onKeyDown:e=>{switch(e.key){case"ArrowUp":j(e,{y:v.y-.05,x:v.x});break;case"ArrowDown":j(e,{y:v.y+.05,x:v.x});break;case"ArrowRight":j(e,{x:v.x+.05,y:v.y});break;case"ArrowLeft":j(e,{x:v.x-.05,y:v.y})}},children:[(0,r.jsx)("div",{...m("saturationOverlay",{style:{backgroundColor:`hsl(${i.h}, 100%, 50%)`}})}),(0,r.jsx)("div",{...m("saturationOverlay",{style:{backgroundImage:"linear-gradient(90deg, #fff, transparent)"}})}),(0,r.jsx)("div",{...m("saturationOverlay",{style:{backgroundImage:"linear-gradient(0deg, #000, transparent)"}})}),(0,r.jsx)(x.b,{position:v,...m("thumb",{style:{backgroundColor:l}})})]})}k.displayName="@mantine/core/Saturation";let w=(0,o.forwardRef)(({className:e,datatype:t,setValue:n,onChangeEnd:i,size:a,focusable:s,data:c,swatchesPerRow:l,...u},p)=>{let m=(0,h.j)(),g=c.map((e,t)=>(0,o.createElement)(f.b,{...m.getStyles("swatch"),unstyled:m.unstyled,component:"button",type:"button",color:e,key:t,radius:"sm",onClick:()=>{n(e),i?.(e)},"aria-label":e,tabIndex:s?0:-1,"data-swatch":!0}));return(0,r.jsx)(d.x,{...m.getStyles("swatches"),ref:p,...u,children:g})});w.displayName="@mantine/core/Swatches";var j=n(37873);let C={swatchesPerRow:7,withPicker:!0,focusable:!0,size:"md",__staticSelector:"ColorPicker"},S=(0,c.Z)((e,{size:t,swatchesPerRow:n})=>({wrapper:{"--cp-preview-size":(0,s.ap)(t,"cp-preview-size"),"--cp-width":(0,s.ap)(t,"cp-width"),"--cp-body-spacing":(0,s.bG)(t),"--cp-swatch-size":`${100/n}%`,"--cp-thumb-size":(0,s.ap)(t,"cp-thumb-size"),"--cp-saturation-height":(0,s.ap)(t,"cp-saturation-height")}})),I=(0,p.d)((e,t)=>{let n=(0,l.w)("ColorPicker",C,e),{classNames:s,className:c,style:p,styles:y,unstyled:x,vars:I,format:M,value:T,defaultValue:E,onChange:P,onChangeEnd:R,withPicker:N,size:_,saturationLabel:F,hueLabel:B,alphaLabel:A,focusable:L,swatches:D,swatchesPerRow:$,fullWidth:z,onColorSwatchClick:H,__staticSelector:O,mod:Z,...V}=n,G=(0,u.y)({name:O,props:n,classes:j.Z,className:c,style:p,classNames:s,styles:y,unstyled:x,rootSelector:"wrapper",vars:I,varsResolver:S}),W=(0,o.useRef)(M),Y=(0,o.useRef)(),q=(0,o.useRef)(-1),K=(0,o.useRef)(!1),U="hexa"===M||"rgba"===M||"hsla"===M,[X,J,Q]=(0,i.C)({value:T,defaultValue:E,finalValue:"#FFFFFF",onChange:P}),[ee,et]=(0,o.useState)((0,v.lu)(X)),en=()=>{window.clearTimeout(q.current),K.current=!0},er=()=>{window.clearTimeout(q.current),q.current=window.setTimeout(()=>{K.current=!1},200)},eo=e=>{et(t=>{let n={...t,...e};return Y.current=(0,g.Rt)(W.current,n),n}),J(Y.current)};return(0,a.l)(()=>{(0,v.fi)(T)&&!K.current&&et((0,v.lu)(T))},[T]),(0,a.l)(()=>{W.current=M,J((0,g.Rt)(M,ee))},[M]),(0,r.jsx)(h.K,{value:{getStyles:G,unstyled:x},children:(0,r.jsxs)(d.x,{ref:t,...G("wrapper"),size:_,mod:[{"full-width":z},Z],...V,children:[N&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(k,{value:ee,onChange:eo,onChangeEnd:({s:e,v:t})=>R?.(g.Rt(W.current,{...ee,s:e,v:t})),color:X,size:_,focusable:L,saturationLabel:F,onScrubStart:en,onScrubEnd:er}),(0,r.jsxs)("div",{...G("body"),children:[(0,r.jsxs)("div",{...G("sliders"),children:[(0,r.jsx)(b.Q,{value:ee.h,onChange:e=>eo({h:e}),onChangeEnd:e=>R?.(g.Rt(W.current,{...ee,h:e})),size:_,focusable:L,"aria-label":B,onScrubStart:en,onScrubEnd:er}),U&&(0,r.jsx)(m.k,{value:ee.a,onChange:e=>eo({a:e}),onChangeEnd:e=>{R?.(g.Rt(W.current,{...ee,a:e}))},size:_,color:(0,g.Rt)("hex",ee),focusable:L,"aria-label":A,onScrubStart:en,onScrubEnd:er})]}),U&&(0,r.jsx)(f.b,{color:X,radius:"sm",size:"var(--cp-preview-size)",...G("preview")})]})]}),Array.isArray(D)&&(0,r.jsx)(w,{data:D,swatchesPerRow:$,focusable:L,setValue:J,onChangeEnd:e=>{let t=(0,g.Rt)(M,(0,v.lu)(e));H?.(t),R?.(t),Q||et((0,v.lu)(e))}})]})})});I.classes=j.Z,I.displayName="@mantine/core/ColorPicker"},37873: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"}},53081:function(e,t,n){"use strict";n.d(t,{_:function(){return b}});var r=n(52322),o=n(2784),i=n(51438),a=n(71978),s=n(70837),c=n(58898),l=n(68755),u=n(38483),d=n(46690),p=n(28559),f=n(82027),m=n(40993),h=n(55170),g=n(37873);let v={},b=(0,f.d)((e,t)=>{let n=(0,u.w)("ColorSlider",v,e),{classNames:f,className:b,style:y,styles:x,unstyled:k,vars:w,onChange:j,onChangeEnd:C,maxValue:S,round:I,size:M="md",focusable:T=!0,value:E,overlays:P,thumbColor:R="transparent",onScrubStart:N,onScrubEnd:_,__staticSelector:F="ColorPicker",...B}=n,A=(0,d.y)({name:F,classes:g.Z,props:n,className:b,style:y,classNames:f,styles:x,unstyled:k}),L=m.j()?.getStyles||A,D=(0,l.rZ)(),[$,z]=(0,o.useState)({y:0,x:E/S}),H=(0,o.useRef)($),O=e=>I?Math.round(e*S):e*S,{ref:Z}=(0,i.r)(({x:e,y:t})=>{H.current={x:e,y:t},j?.(O(e))},{onScrubEnd:()=>{let{x:e}=H.current;C?.(O(e)),_?.()},onScrubStart:N});(0,a.l)(()=>{z({y:0,x:E/S})},[E]);let V=(e,t)=>{e.preventDefault();let n=(0,i.E)(t);j?.(O(n.x)),C?.(O(n.x))},G=P.map((e,t)=>(0,o.createElement)("div",{...L("sliderOverlay"),style:e,key:t}));return(0,r.jsxs)(p.x,{...B,ref:(0,s.Yx)(Z,t),...L("slider"),role:"slider","aria-valuenow":E,"aria-valuemax":S,"aria-valuemin":0,tabIndex:T?0:-1,onKeyDown:e=>{switch(e.key){case"ArrowRight":V(e,{x:$.x+.05,y:$.y});break;case"ArrowLeft":V(e,{x:$.x-.05,y:$.y})}},"data-focus-ring":D.focusRing,__vars:{"--cp-thumb-size":`var(--cp-thumb-size-${M})`},children:[G,(0,r.jsx)(h.b,{position:$,...L("thumb",{style:{top:(0,c.h)(1),background:R}})})]})});b.displayName="@mantine/core/ColorSlider"},93262:function(e,t,n){"use strict";n.d(t,{Q:function(){return c}});var r=n(52322),o=n(2784),i=n(58898),a=n(38483),s=n(53081);let c=(0,o.forwardRef)((e,t)=>{let{value:n,onChange:o,onChangeEnd:c,color:l,...u}=(0,a.w)("HueSlider",{},e);return(0,r.jsx)(s._,{...u,ref:t,value:n,onChange:o,onChangeEnd:c,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,i.h)(1)} inset, rgb(0, 0, 0, .15) 0 0 ${(0,i.h)(4)} inset`}]})});c.displayName="@mantine/core/HueSlider"},55170:function(e,t,n){"use strict";n.d(t,{b:function(){return a}});var r=n(52322),o=n(2784),i=n(28559);let a=(0,o.forwardRef)(({position:e,...t},n)=>(0,r.jsx)(i.x,{ref:n,__vars:{"--thumb-y-offset":`${100*e.y}%`,"--thumb-x-offset":`${100*e.x}%`},...t}));a.displayName="@mantine/core/ColorPickerThumb"},59835:function(e,t,n){"use strict";n.d(t,{Rt:function(){return u}});var r=n(88957);function o({h:e,s:t,v:n,a:o}){let i=e/360*6,a=t/100,s=n/100,c=Math.floor(i),l=s*(1-a),u=s*(1-(i-c)*a),d=s*(1-(1-i+c)*a),p=c%6;return{r:(0,r.NM)(255*[s,u,l,l,d,s][p]),g:(0,r.NM)(255*[d,s,s,u,l,l][p]),b:(0,r.NM)(255*[l,l,d,s,s,u][p]),a:(0,r.NM)(o,2)}}function i(e,t){let{r:n,g:i,b:a,a:s}=o(e);return t?`rgba(${n}, ${i}, ${a}, ${(0,r.NM)(s,2)})`:`rgb(${n}, ${i}, ${a})`}function a({h:e,s:t,v:n,a:o},i){let a=(200-t)*n/100,s={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(${s.h}, ${s.s}%, ${s.l}%, ${(0,r.NM)(o,2)})`:`hsl(${s.h}, ${s.s}%, ${s.l}%)`}function s(e){let t=e.toString(16);return t.length<2?`0${t}`:t}function c(e){let{r:t,g:n,b:r}=o(e);return`#${s(t)}${s(n)}${s(r)}`}let l={hex:c,hexa:e=>(function(e){let t=Math.round(255*e.a);return`${c(e)}${s(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"}},88957: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 f},lu:function(){return m}});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=(n<50?n:100-n)/100*t;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 s({r:e,g:t,b:n,a:o}){let i=Math.max(e,t,n),a=i-Math.min(e,t,n),s=a?i===e?(t-n)/a:i===t?2+(n-e)/a:4+(e-t)/a:0;return{h:r(60*(s<0?s+6:s),3),s:r(i?a/i*100:0,3),v:r(i/255*100,3),a:o}}function c(e){let t="#"===e[0]?e.slice(1):e;return 3===t.length?s({r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:1}):s({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?s({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:c,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]);return{...c(e),a:r}}let o=t.slice(0,6),i=n(t.slice(6,8));return{...c(o),a:i}},rgb:u,rgba:u,hsl:a,hsla:a};function f(e){for(let[,t]of Object.entries(d))if(t.test(e))return!0;return!1}function m(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}}},27009:function(e,t,n){"use strict";n.d(t,{b:function(){return m}});var r=n(52322),o=n(58898);n(2784);var i=n(91482),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(33502),d={root:"m_de3d2490",colorOverlay:"m_862f3d1b",shadowOverlay:"m_98ae7f22",alphaOverlay:"m_95709ac0",childrenOverlay:"m_93e74e3"};let p={withShadow:!0},f=(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)}})),m=(0,u.b)((e,t)=>{let n=(0,s.w)("ColorSwatch",p,e),{classNames:o,className:i,style:a,styles:u,unstyled:m,vars:h,color:g,size:v,radius:b,withShadow:y,children:x,variant:k,...w}=(0,s.w)("ColorSwatch",p,n),j=(0,c.y)({name:"ColorSwatch",props:n,classes:d,className:i,style:a,classNames:o,styles:u,unstyled:m,vars:h,varsResolver:f});return(0,r.jsxs)(l.x,{ref:t,variant:k,size:v,...j("root",{focusable:!0}),...w,children:[(0,r.jsx)("span",{...j("alphaOverlay")}),y&&(0,r.jsx)("span",{...j("shadowOverlay")}),(0,r.jsx)("span",{...j("colorOverlay",{style:{backgroundColor:g}})}),(0,r.jsx)("span",{...j("childrenOverlay"),children:x})]})});m.classes=d,m.displayName="@mantine/core/ColorSwatch"},61271: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"}},54178:function(e,t,n){"use strict";n.d(t,{d:function(){return f}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(38483),s=n(46690),c=n(28559),l=n(82027),u=n(61271);let d={error:null},p=(0,i.Z)((e,{size:t})=>({chevron:{"--combobox-chevron-size":(0,o.ap)(t,"combobox-chevron-size")}})),f=(0,l.d)((e,t)=>{let n=(0,a.w)("ComboboxChevron",d,e),{size:o,error:i,style:l,className:f,classNames:m,styles:h,unstyled:g,vars:v,mod:b,...y}=n,x=(0,s.y)({name:"ComboboxChevron",classes:u.Z,props:n,style:l,className:f,classNames:m,styles:h,unstyled:g,vars:v,varsResolver:p,rootSelector:"chevron"});return(0,r.jsx)(c.x,{component:"svg",...y,...x("chevron"),size:o,viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",mod:["combobox-chevron",{error:i},b],ref:t,children:(0,r.jsx)("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"})})});f.classes=u.Z,f.displayName="@mantine/core/ComboboxChevron"},29995: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}})},87385:function(e,t,n){"use strict";n.d(t,{q:function(){return s}});var r=n(52322),o=n(78574);n(2784);var i=n(38483);let a={timeout:1e3};function s(e){let{children:t,timeout:n,value:s,...c}=(0,i.w)("CopyButton",a,e),l=(0,o.V)({timeout:n});return(0,r.jsx)(r.Fragment,{children:t({copy:()=>l.copy(s),copied:l.copied,...c})})}s.displayName="@mantine/core/CopyButton"},62086:function(e,t,n){"use strict";n.d(t,{Y:function(){return u}});var r=n(52322),o=n(2784),i=n(89027),a=n(58898);function s(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 l={bottom:"borderTopLeftRadius",left:"borderTopRightRadius",right:"borderBottomLeftRadius",top:"borderBottomRightRadius"},u=(0,o.forwardRef)(({position:e,arrowSize:t,arrowOffset:n,arrowRadius:o,arrowPosition:u,visible:d,arrowX:p,arrowY:f,style:m,...h},g)=>{let{dir:v}=(0,i.gm)();return d?(0,r.jsx)("div",{...h,ref:g,style:{...m,...function({position:e,arrowSize:t,arrowOffset:n,arrowRadius:r,arrowPosition:o,arrowX:i,arrowY:u,dir:d}){let[p,f="center"]=e.split("-"),m={width:(0,a.h)(t),height:(0,a.h)(t),transform:"rotate(45deg)",position:"absolute",[l[p]]:(0,a.h)(r)},h=(0,a.h)(-t/2);return"left"===p?{...m,...s(f,u,n,o),right:h,borderLeftColor:"transparent",borderBottomColor:"transparent"}:"right"===p?{...m,...s(f,u,n,o),left:h,borderRightColor:"transparent",borderTopColor:"transparent"}:"top"===p?{...m,...c(f,i,n,o,d),bottom:h,borderTopColor:"transparent",borderLeftColor:"transparent"}:"bottom"===p?{...m,...c(f,i,n,o,d),top:h,borderBottomColor:"transparent",borderRightColor:"transparent"}:{}}({position:e,arrowSize:t,arrowOffset:n,arrowRadius:o,arrowPosition:u,dir:v,arrowX:p,arrowY:f})}}):null});u.displayName="@mantine/core/FloatingArrow"},71916: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}})},39461:function(e,t,n){"use strict";n.d(t,{U:function(){return o}});var r=n(2784);function o({open:e,close:t,openDelay:n,closeDelay:o}){let i=(0,r.useRef)(-1),a=(0,r.useRef)(-1),s=()=>{window.clearTimeout(i.current),window.clearTimeout(a.current)};return(0,r.useEffect)(()=>s,[]),{openDropdown:()=>{s(),0===n||void 0===n?e():i.current=window.setTimeout(e,n)},closeDropdown:()=>{s(),0===o||void 0===o?t():a.current=window.setTimeout(t,o)}}}},52630:function(e,t,n){"use strict";n.d(t,{L:function(){return a}});var r=n(2784),o=n(75580),i=n(71978);function a({opened:e,floating:t,position:n,positionDependencies:a}){let[s,c]=(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,s,n]),(0,i.l)(()=>{t.update()},a),(0,i.l)(()=>{c(e=>e+1)},[e])}},19296:function(e,t,n){"use strict";n.d(t,{G:function(){return v}});var r=n(52322),o=n(2784),i=n(70837),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d=n(8246),p=n(96339),f=n(66596),m={root:"m_96b553a6"};let h={},g=(0,a.Z)((e,{transitionDuration:t})=>({root:{"--transition-duration":"number"==typeof t?`${t}ms`:t}})),v=(0,u.d)((e,t)=>{let n=(0,s.w)("FloatingIndicator",h,e),{classNames:a,className:u,style:v,styles:b,unstyled:y,vars:x,target:k,parent:w,transitionDuration:j,mod:C,displayAfterTransitionEnd:S,...I}=n,M=(0,c.y)({name:"FloatingIndicator",classes:m,props:n,className:u,style:v,classNames:a,styles:b,unstyled:y,vars:x,varsResolver:g}),T=(0,o.useRef)(null),{initialized:E,hidden:P}=function({target:e,parent:t,ref:n,displayAfterTransitionEnd:r}){let i=(0,o.useRef)(),[a,s]=(0,o.useState)(!1),[c,l]=(0,o.useState)("boolean"==typeof r&&r),u=()=>{if(!e||!t)return;let r=e.getBoundingClientRect(),o=t.getBoundingClientRect(),i={top:r.top-o.top,left:r.left-o.left,width:r.width,height:r.height};n.current&&(n.current.style.transform=`translateY(${i.top}px) translateX(${i.left}px)`,n.current.style.width=`${i.width}px`,n.current.style.height=`${i.height}px`)},m=()=>{window.clearTimeout(i.current),n.current&&(n.current.style.transitionDuration="0ms"),u(),i.current=window.setTimeout(()=>{n.current&&(n.current.style.transitionDuration="")},30)},h=(0,o.useRef)(),g=(0,o.useRef)();return(0,o.useEffect)(()=>{if(u(),e)return h.current=new ResizeObserver(m),h.current.observe(e),t&&(g.current=new ResizeObserver(m),g.current.observe(t)),()=>{h.current?.disconnect(),g.current?.disconnect()}},[t,e]),(0,o.useEffect)(()=>{if(t){let e=e=>{(function(e,t){if(!t||!e)return!1;let n=t.parentNode;for(;null!=n;){if(n===e)return!0;n=n.parentNode}return!1})(e.target,t)&&(m(),l(!1))};return document.addEventListener("transitionend",e),()=>{document.removeEventListener("transitionend",e)}}},[t]),(0,d.K)(()=>{"test"!==(0,f.d)()&&s(!0)},20,{autoInvoke:!0}),(0,p.I)(e=>{e.forEach(e=>{"attributes"===e.type&&"dir"===e.attributeName&&m()})},{attributes:!0,attributeFilter:["dir"]},()=>document.documentElement),{initialized:a,hidden:c}}({target:k,parent:w,ref:T,displayAfterTransitionEnd:S}),R=(0,i.Yx)(t,T);return k&&w?(0,r.jsx)(l.x,{ref:R,mod:[{initialized:E,hidden:P},C],...M("root"),...I}):null});v.displayName="@mantine/core/FloatingIndicator",v.classes=m},10266:function(e,t,n){"use strict";n.d(t,{i:function(){return m}});var r=n(52322),o=n(2784),i=n(73533);let a=/input|select|textarea|button|object/,s="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 l(e){let t=e.nodeName.toLowerCase(),n=!Number.isNaN(c(e));return(a.test(t)&&!e.disabled||e instanceof HTMLAnchorElement&&e.href||n)&&function(e){if(e.getAttribute("aria-hidden")||e.getAttribute("hidden")||"hidden"===e.getAttribute("type"))return!1;let t=e;for(;t&&t!==document.body&&11!==t.nodeType;){if("none"===t.style.display)return!1;t=t.parentNode}return!0}(e)}function u(e){let t=c(e);return(Number.isNaN(t)||t>=0)&&l(e)}var d=n(70837),p=n(98399),f=n(1767);function m({children:e,active:t=!0,refProp:n="ref"}){let r=function(e=!0){let t=(0,o.useRef)(),n=(0,o.useRef)(null),r=e=>{let t=e.querySelector("[data-autofocus]");if(!t){let n=Array.from(e.querySelectorAll(s));!(t=n.find(u)||n.find(l)||null)&&l(e)&&(t=e)}t&&t.focus({preventScroll:!0})},a=(0,o.useCallback)(o=>{if(e){if(null===o){n.current&&(n.current(),n.current=null);return}n.current=function(e,t="body > :not(script)"){let n=(0,i.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"))})}}(o),t.current!==o&&(o?(setTimeout(()=>{o.getRootNode()&&r(o)}),t.current=o):t.current=null)}},[e]);return(0,o.useEffect)(()=>{if(!e)return;t.current&&setTimeout(()=>r(t.current));let o=e=>{"Tab"===e.key&&t.current&&function(e,t){let n=Array.from(e.querySelectorAll(s)).filter(u);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,a=o.activeElement;if("INPUT"===a.tagName&&"radio"===a.getAttribute("type")&&(i=n.filter(e=>"radio"===e.getAttribute("type")&&e.getAttribute("name")===a.getAttribute("name")).includes(r)),!i)return;t.preventDefault();let c=n[t.shiftKey?n.length-1:0];c&&c.focus()}(t.current,e)};return document.addEventListener("keydown",o),()=>{document.removeEventListener("keydown",o),n.current&&n.current()}},[e]),a}(t),a=(0,d.Yx)(r,e?.ref);return(0,p.k)(e)?(0,o.cloneElement)(e,{[n]:a}):e}function h(e){return(0,r.jsx)(f.T,{tabIndex:-1,"data-autofocus":!0,...e})}m.displayName="@mantine/core/FocusTrap",h.displayName="@mantine/core/FocusTrapInitialFocus",m.InitialFocus=h},93010:function(e,t,n){"use strict";n.d(t,{Z:function(){return m}});var r=n(52322),o=n(2784),i=n(91482),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d={root:"m_4081bf90"};let p={preventGrowOverflow:!0,gap:"md",align:"center",justify:"flex-start",wrap:"wrap"},f=(0,a.Z)((e,{grow:t,preventGrowOverflow:n,gap:r,align:o,justify:a,wrap:s},{childWidth:c})=>({root:{"--group-child-width":t&&n?c:void 0,"--group-gap":(0,i.bG)(r),"--group-align":o,"--group-justify":a,"--group-wrap":s}})),m=(0,u.d)((e,t)=>{let n=(0,s.w)("Group",p,e),{classNames:a,className:u,style:m,styles:h,unstyled:g,children:v,gap:b,align:y,justify:x,wrap:k,grow:w,preventGrowOverflow:j,vars:C,variant:S,__size:I,mod:M,...T}=n,E=o.Children.toArray(v).filter(Boolean),P=E.length,R=(0,i.bG)(b??"md"),N=`calc(${100/P}% - (${R} - ${R} / ${P}))`,_=(0,c.y)({name:"Group",props:n,stylesCtx:{childWidth:N},className:u,style:m,classes:d,classNames:a,styles:h,unstyled:g,vars:C,varsResolver:f});return(0,r.jsx)(l.x,{..._("root"),ref:t,variant:S,mod:[{grow:w},M],size:I,...T,children:E})});m.classes=d,m.displayName="@mantine/core/Group"},52286:function(e,t,n){"use strict";n.d(t,{y:function(){return u}});var r=n(52322);n(2784);var o=n(38483),i=n(33502),a=n(20368),s=n(8582);function c(e){return e.replace(/[-[\]{}()*+?.,\\^$|#]/g,"\\$&")}let l={},u=(0,i.b)((e,t)=>{let{unstyled:n,children:i,highlight:u,highlightStyles:d,color:p,...f}=(0,o.w)("Highlight",l,e),m=function(e,t){if(null==t)return[{chunk:e,highlighted:!1}];let n=Array.isArray(t)?t.map(c):c(t);if(!(Array.isArray(n)?n.filter(e=>e.trim().length>0).length>0:""!==n.trim()))return[{chunk:e,highlighted:!1}];let r="string"==typeof n?n.trim():n.filter(e=>0!==e.trim().length).map(e=>e.trim()).sort((e,t)=>t.length-e.length).join("|"),o=RegExp(`(${r})`,"gi");return e.split(o).map(e=>({chunk:e,highlighted:o.test(e)})).filter(({chunk:e})=>e)}(i,u);return(0,r.jsx)(s.x,{unstyled:n,ref:t,...f,__staticSelector:"Highlight",children:m.map(({chunk:e,highlighted:t},o)=>t?(0,r.jsx)(a.v,{unstyled:n,color:p,style:d,"data-highlight":e,children:e},o):(0,r.jsx)("span",{children:e},o))})});u.classes=s.x.classes,u.displayName="@mantine/core/Highlight"},50569:function(e,t,n){"use strict";n.d(t,{Z:function(){return d},J:function(){return u}});var r=n(52322),o=n(2784),i=n(91482),a=n(46690),s=n(28559),c=n(6941),l={root:"m_5f75b09e",body:"m_5f6e695e",labelWrapper:"m_d3ea56bb",label:"m_8ee546b8",description:"m_328f68c0",error:"m_8e8a99cc"};let u=l,d=(0,o.forwardRef)(({__staticSelector:e,__stylesApiProps:t,className:n,classNames:o,styles:u,unstyled:d,children:p,label:f,description:m,id:h,disabled:g,error:v,size:b,labelPosition:y="left",bodyElement:x="div",labelElement:k="label",variant:w,style:j,vars:C,mod:S,...I},M)=>{let T=(0,a.y)({name:e,props:t,className:n,style:j,classes:l,classNames:o,styles:u,unstyled:d});return(0,r.jsx)(s.x,{...T("root"),ref:M,__vars:{"--label-fz":(0,i.yv)(b),"--label-lh":(0,i.ap)(b,"label-lh")},mod:[{"label-position":y},S],variant:w,size:b,...I,children:(0,r.jsxs)(s.x,{component:x,htmlFor:"label"===x?h:void 0,...T("body"),children:[p,(0,r.jsxs)("div",{...T("labelWrapper"),"data-disabled":g||void 0,children:[f&&(0,r.jsx)(s.x,{component:k,htmlFor:"label"===k?h:void 0,...T("label"),"data-disabled":g||void 0,children:f}),m&&(0,r.jsx)(c.I.Description,{size:b,__inheritStyles:!1,...T("description"),children:m}),v&&"boolean"!=typeof v&&(0,r.jsx)(c.I.Error,{size:b,__inheritStyles:!1,...T("error"),children:v})]})]})})});d.displayName="@mantine/core/InlineInput"},6941:function(e,t,n){"use strict";n.d(t,{I:function(){return _}});var r=n(52322),o=n(58898),i=n(2784),a=n(91482),s=n(11200),c=n(38483),l=n(46690),u=n(97072),d=n(28559),p=n(33502),f=n(82027),m=n(69349),h={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={},v=(0,s.Z)((e,{size:t})=>({description:{"--input-description-size":void 0===t?void 0:`calc(${(0,a.yv)(t)} - ${(0,o.h)(2)})`}})),b=(0,f.d)((e,t)=>{let n=(0,c.w)("InputDescription",g,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,size:f,__staticSelector:b,__inheritStyles:y=!0,variant:x,...k}=(0,c.w)("InputDescription",g,n),w=(0,m.D)(),j=(0,l.y)({name:["InputWrapper",b],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"description",vars:p,varsResolver:v}),C=y&&w?.getStyles||j;return(0,r.jsx)(d.x,{component:"p",ref:t,variant:x,size:f,...C("description",w?.getStyles?{className:i,style:a}:void 0),...k})});b.classes=h,b.displayName="@mantine/core/InputDescription";let y={},x=(0,s.Z)((e,{size:t})=>({error:{"--input-error-size":void 0===t?void 0:`calc(${(0,a.yv)(t)} - ${(0,o.h)(2)})`}})),k=(0,f.d)((e,t)=>{let n=(0,c.w)("InputError",y,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,size:f,__staticSelector:g,__inheritStyles:v=!0,variant:b,...k}=n,w=(0,l.y)({name:["InputWrapper",g],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"error",vars:p,varsResolver:x}),j=(0,m.D)(),C=v&&j?.getStyles||w;return(0,r.jsx)(d.x,{component:"p",ref:t,variant:b,size:f,...C("error",j?.getStyles?{className:i,style:a}:void 0),...k})});k.classes=h,k.displayName="@mantine/core/InputError";let w={labelElement:"label"},j=(0,s.Z)((e,{size:t})=>({label:{"--input-label-size":(0,a.yv)(t),"--input-asterisk-color":void 0}})),C=(0,f.d)((e,t)=>{let n=(0,c.w)("InputLabel",w,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,labelElement:f,size:g,required:v,htmlFor:b,onMouseDown:y,children:x,__staticSelector:k,variant:C,mod:S,...I}=(0,c.w)("InputLabel",w,n),M=(0,l.y)({name:["InputWrapper",k],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"label",vars:p,varsResolver:j}),T=(0,m.D)(),E=T?.getStyles||M;return(0,r.jsxs)(d.x,{...E("label",T?.getStyles?{className:i,style:a}:void 0),component:f,variant:C,size:g,ref:t,htmlFor:"label"===f?b:void 0,mod:[{required:v},S],onMouseDown:e=>{y?.(e),!e.defaultPrevented&&e.detail>1&&e.preventDefault()},...I,children:[x,v&&(0,r.jsx)("span",{...E("required"),"aria-hidden":!0,children:" *"})]})});C.classes=h,C.displayName="@mantine/core/InputLabel";let S={},I=(0,f.d)((e,t)=>{let n=(0,c.w)("InputPlaceholder",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,__staticSelector:f,variant:m,error:g,mod:v,...b}=(0,c.w)("InputPlaceholder",S,n),y=(0,l.y)({name:["InputPlaceholder",f],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"placeholder"});return(0,r.jsx)(d.x,{...y("placeholder"),mod:[{error:!!g},v],component:"span",variant:m,ref:t,...b})});I.classes=h,I.displayName="@mantine/core/InputPlaceholder";var M=n(66178);let T={labelElement:"label",inputContainer:e=>e,inputWrapperOrder:["label","description","input","error"]},E=(0,s.Z)((e,{size:t})=>({label:{"--input-label-size":(0,a.yv)(t),"--input-asterisk-color":void 0},error:{"--input-error-size":void 0===t?void 0:`calc(${(0,a.yv)(t)} - ${(0,o.h)(2)})`},description:{"--input-description-size":void 0===t?void 0:`calc(${(0,a.yv)(t)} - ${(0,o.h)(2)})`}})),P=(0,f.d)((e,t)=>{let n=(0,c.w)("InputWrapper",T,e),{classNames:o,className:a,style:s,styles:u,unstyled:p,vars:f,size:g,variant:v,__staticSelector:y,inputContainer:x,inputWrapperOrder:w,label:j,error:S,description:I,labelProps:P,descriptionProps:R,errorProps:N,labelElement:_,children:F,withAsterisk:B,id:A,required:L,__stylesApiProps:D,mod:$,...z}=n,H=(0,l.y)({name:["InputWrapper",y],props:D||n,classes:h,className:a,style:s,classNames:o,styles:u,unstyled:p,vars:f,varsResolver:E}),O={size:g,variant:v,__staticSelector:y},Z=(0,M.M)(A),V=N?.id||`${Z}-error`,G=R?.id||`${Z}-description`,W=!!S&&"boolean"!=typeof S,Y=!!I,q=`${W?V:""} ${Y?G:""}`,K=q.trim().length>0?q.trim():void 0,U=P?.id||`${Z}-label`,X=j&&(0,r.jsx)(C,{labelElement:_,id:U,htmlFor:Z,required:"boolean"==typeof B?B:L,...O,...P,children:j},"label"),J=Y&&(0,r.jsx)(b,{...R,...O,size:R?.size||O.size,id:R?.id||G,children:I},"description"),Q=(0,r.jsx)(i.Fragment,{children:x(F)},"input"),ee=W&&(0,i.createElement)(k,{...N,...O,size:N?.size||O.size,key:"error",id:N?.id||V},S),et=w.map(e=>{switch(e){case"label":return X;case"input":return Q;case"description":return J;case"error":return ee;default:return null}});return(0,r.jsx)(m.I,{value:{getStyles:H,describedBy:K,inputId:Z,labelId:U,...function(e,{hasDescription:t,hasError:n}){let r=e.findIndex(e=>"input"===e),o=e.slice(0,r),i=e.slice(r+1),a=t&&o.includes("description")||n&&o.includes("error");return{offsetBottom:t&&i.includes("description")||n&&i.includes("error"),offsetTop:a}}(w,{hasDescription:Y,hasError:W})},children:(0,r.jsx)(d.x,{ref:t,variant:v,size:g,mod:[{error:!!S},$],...H("root"),...z,children:et})})});P.classes=h,P.displayName="@mantine/core/InputWrapper";let R={variant:"default",leftSectionPointerEvents:"none",rightSectionPointerEvents:"none",withAria:!0,withErrorStyles:!0},N=(0,s.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,a.ap)(t.size,"input-height"),"--input-fz":(0,a.yv)(t.size),"--input-radius":void 0===t.radius?void 0:(0,a.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,a.ap)(t.size,"input-padding-y"):void 0,"--input-left-section-pointer-events":t.leftSectionPointerEvents,"--input-right-section-pointer-events":t.rightSectionPointerEvents}})),_=(0,p.b)((e,t)=>{let n=(0,c.w)("Input",R,e),{classNames:o,className:i,style:a,styles:s,unstyled:p,required:f,__staticSelector:g,__stylesApiProps:v,size:b,wrapperProps:y,error:x,disabled:k,leftSection:w,leftSectionProps:j,leftSectionWidth:C,rightSection:S,rightSectionProps:I,rightSectionWidth:M,rightSectionPointerEvents:T,leftSectionPointerEvents:E,variant:P,vars:_,pointer:F,multiline:B,radius:A,id:L,withAria:D,withErrorStyles:$,mod:z,inputSize:H,...O}=n,{styleProps:Z,rest:V}=(0,u.c)(O),G=(0,m.D)(),W={offsetBottom:G?.offsetBottom,offsetTop:G?.offsetTop},Y=(0,l.y)({name:["Input",g],props:v||n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:p,stylesCtx:W,rootSelector:"wrapper",vars:_,varsResolver:N}),q=D?{required:f,disabled:k,"aria-invalid":!!x,"aria-describedby":G?.describedBy,id:G?.inputId||L}:{};return(0,r.jsxs)(d.x,{...Y("wrapper"),...Z,...y,mod:[{error:!!x&&$,pointer:F,disabled:k,multiline:B,"data-with-right-section":!!S,"data-with-left-section":!!w},z],variant:P,size:b,children:[w&&(0,r.jsx)("div",{...j,"data-position":"left",...Y("section",{className:j?.className,style:j?.style}),children:w}),(0,r.jsx)(d.x,{component:"input",...V,...q,ref:t,required:f,mod:{disabled:k,error:!!x&&$},variant:P,__size:H,...Y("input")}),S&&(0,r.jsx)("div",{...I,"data-position":"right",...Y("section",{className:I?.className,style:I?.style}),children:S})]})});_.classes=h,_.Wrapper=P,_.Label=C,_.Error=k,_.Description=b,_.Placeholder=I,_.displayName="@mantine/core/Input"},69349:function(e,t,n){"use strict";n.d(t,{D:function(){return o},I:function(){return r}}),n(2784),n(52322);let[r,o]=(0,n(75336).V)({offsetBottom:!1,offsetTop:!1,describedBy:void 0,getStyles:null,inputId:void 0,labelId:void 0})},7140:function(e,t,n){"use strict";n.d(t,{k:function(){return i}}),n(2784),n(52322);var r=n(38483),o=n(97072);function i(e,t,n){let i=(0,r.w)(e,t,n),{label:a,description:s,error:c,required:l,classNames:u,styles:d,className:p,unstyled:f,__staticSelector:m,__stylesApiProps:h,errorProps:g,labelProps:v,descriptionProps:b,wrapperProps:y,id:x,size:k,style:w,inputContainer:j,inputWrapperOrder:C,withAsterisk:S,variant:I,vars:M,mod:T,...E}=i,{styleProps:P,rest:R}=(0,o.c)(E),N={label:a,description:s,error:c,required:l,classNames:u,className:p,__staticSelector:m,__stylesApiProps:h||i,errorProps:g,labelProps:v,descriptionProps:b,unstyled:f,styles:d,size:k,style:w,inputContainer:j,inputWrapperOrder:C,withAsterisk:S,variant:I,id:x,mod:T,...y};return{...R,classNames:u,styles:d,unstyled:f,wrapperProps:{...N,...P},inputProps:{required:l,classNames:u,styles:d,unstyled:f,size:k,__staticSelector:m,__stylesApiProps:h||i,error:c,variant:I,id:x}}}},73063:function(e,t,n){"use strict";n.d(t,{M:function(){return c}});var r=n(52322);n(2784);var o=n(33502),i=n(6941),a=n(7140);let s={__staticSelector:"InputBase",withAria:!0},c=(0,o.b)((e,t)=>{let{inputProps:n,wrapperProps:o,...c}=(0,a.k)("InputBase",s,e);return(0,r.jsx)(i.I.Wrapper,{...o,children:(0,r.jsx)(i.I,{...n,...c,ref:t})})});c.classes={...i.I.classes,...i.I.Wrapper.classes},c.displayName="@mantine/core/InputBase"},62770:function(e,t,n){"use strict";n.d(t,{m:function(){return i}});var r=n(52322);n(2784);var o=n(69349);function i({children:e,role:t}){let n=(0,o.D)();return n?(0,r.jsx)("div",{role:t,"aria-labelledby":n.labelId,"aria-describedby":n.describedBy,children:e}):(0,r.jsx)(r.Fragment,{children:e})}},83795:function(e,t,n){"use strict";n.d(t,{T:function(){return f}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(38483),s=n(46690),c=n(28559),l=n(82027),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")}})),f=(0,l.d)((e,t)=>{let n=(0,a.w)("Kbd",d,e),{classNames:o,className:i,style:l,styles:f,unstyled:m,vars:h,...g}=n,v=(0,s.y)({name:"Kbd",classes:u,props:n,className:i,style:l,classNames:o,styles:f,unstyled:m,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{component:"kbd",ref:t,...v("root"),...g})});f.classes=u,f.displayName="@mantine/core/Kbd"},12491:function(e,t,n){"use strict";n.d(t,{a:function(){return y}});var r=n(52322),o=n(2784),i=n(91482),a=n(11200),s=n(13588),c=n(38483),l=n(46690),u=n(28559),d=n(82027),p=n(40489),f={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,o.forwardRef)(({className:e,...t},n)=>(0,r.jsxs)(u.x,{component:"span",className:(0,p.Z)(f.barsLoader,e),...t,ref:n,children:[(0,r.jsx)("span",{className:f.bar}),(0,r.jsx)("span",{className:f.bar}),(0,r.jsx)("span",{className:f.bar})]})),h=(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsxs)(u.x,{component:"span",className:(0,p.Z)(f.dotsLoader,e),...t,ref:n,children:[(0,r.jsx)("span",{className:f.dot}),(0,r.jsx)("span",{className:f.dot}),(0,r.jsx)("span",{className:f.dot})]})),g={bars:m,oval:(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsx)(u.x,{component:"span",className:(0,p.Z)(f.ovalLoader,e),...t,ref:n})),dots:h},v={loaders:g,type:"oval"},b=(0,a.Z)((e,{size:t,color:n})=>({root:{"--loader-size":(0,i.ap)(t,"loader-size"),"--loader-color":n?(0,s.p)(n,e):void 0}})),y=(0,d.d)((e,t)=>{let n=(0,c.w)("Loader",v,e),{size:o,color:i,type:a,vars:s,className:d,style:p,classNames:m,styles:h,unstyled:g,loaders:y,variant:x,children:k,...w}=n,j=(0,l.y)({name:"Loader",props:n,classes:f,className:d,style:p,classNames:m,styles:h,unstyled:g,vars:s,varsResolver:b});return k?(0,r.jsx)(u.x,{...j("root"),ref:t,...w,children:k}):(0,r.jsx)(u.x,{...j("root"),ref:t,component:y[a],variant:x,size:o,...w})});y.defaultLoaders=g,y.classes=f,y.displayName="@mantine/core/Loader"},20368:function(e,t,n){"use strict";n.d(t,{v:function(){return m}});var r=n(52322);n(2784);var o=n(11200),i=n(38483),a=n(46690),s=n(28559),c=n(82027),l=n(46403);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"},f=(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})}})),m=(0,c.d)((e,t)=>{let n=(0,i.w)("Mark",p,e),{classNames:o,className:c,style:l,styles:u,unstyled:m,vars:h,color:g,variant:v,...b}=n,y=(0,a.y)({name:"Mark",props:n,className:c,style:l,classes:d,classNames:o,styles:u,unstyled:m,vars:h,varsResolver:f});return(0,r.jsx)(s.x,{component:"mark",ref:t,variant:v,...y("root"),...b})});m.classes=d,m.displayName="@mantine/core/Mark"},36761:function(e,t,n){"use strict";n.d(t,{v:function(){return D}});var r=n(52322),o=n(2784),i=n(9341),a=n(71978),s=n(73491),c=n(51477),l=n(46690),u=n(38483),d=n(39461),p=n(50205);let[f,m]=(0,n(89106).R)("Menu component was not found in the tree");var h=n(28559),g=n(82027),v={dropdown:"m_dc9b7c9f",label:"m_9bfac126",divider:"m_efdf90cb",item:"m_99ac2aa1",itemLabel:"m_5476e0d3",itemSection:"m_8b75e504"};let b={},y=(0,g.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:s,...c}=(0,u.w)("MenuDivider",b,e),l=m();return(0,r.jsx)(h.x,{ref:t,...l.getStyles("divider",{className:o,style:i,styles:a,classNames:n}),...c})});y.classes=v,y.displayName="@mantine/core/MenuDivider";var x=n(70837),k=n(98498);let w={},j=(0,g.d)((e,t)=>{let{classNames:n,className:i,style:a,styles:s,vars:c,onMouseEnter:l,onMouseLeave:d,children:f,...h}=(0,u.w)("MenuDropdown",w,e),g=(0,o.useRef)(null),v=m(),b=(0,k.x)(l,()=>("hover"===v.trigger||"click-hover"===v.trigger)&&v.openDropdown()),y=(0,k.x)(d,()=>("hover"===v.trigger||"click-hover"===v.trigger)&&v.closeDropdown());return(0,r.jsxs)(p.J.Dropdown,{...h,onMouseEnter:b,onMouseLeave:y,role:"menu","aria-orientation":"vertical",ref:(0,x.Yx)(t,g),...v.getStyles("dropdown",{className:i,style:a,styles:s,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())},children:[(0,r.jsx)("div",{tabIndex:-1,"data-autofocus":!0,"aria-hidden":!0,style:{outline:0}}),f]})});j.classes=v,j.displayName="@mantine/core/MenuDropdown";var C=n(38288),S=n(46403),I=n(68755),M=n(33502),T=n(89027),E=n(63409);let P={},R=(0,M.b)((e,t)=>{let{classNames:n,className:i,style:a,styles:s,vars:c,color:l,closeMenuOnClick:d,leftSection:p,rightSection:f,children:h,disabled:g,...v}=(0,u.w)("MenuItem",P,e),b=m(),y=(0,I.rZ)(),{dir:w}=(0,T.gm)(),j=(0,o.useRef)(),M=b.getItemIndex(j.current),R=(0,k.x)(v.onMouseLeave,()=>b.setHovered(-1)),N=(0,k.x)(v.onMouseEnter,()=>b.setHovered(b.getItemIndex(j.current))),_=(0,k.x)(v.onClick,()=>{"boolean"==typeof d?d&&b.closeDropdownImmediately():b.closeOnItemClick&&b.closeDropdownImmediately()}),F=(0,k.x)(v.onFocus,()=>b.setHovered(b.getItemIndex(j.current))),B=l?y.variantColorResolver({color:l,theme:y,variant:"light"}):void 0,A=l?(0,S.E)({color:l,theme:y}):null;return(0,r.jsxs)(E.k,{...v,unstyled:b.unstyled,tabIndex:b.menuItemTabIndex,onFocus:F,...b.getStyles("item",{className:i,style:a,styles:s,classNames:n}),ref:(0,x.Yx)(j,t),role:"menuitem",disabled:g,"data-menu-item":!0,"data-disabled":g||void 0,"data-hovered":b.hovered===M||void 0,onMouseEnter:N,onMouseLeave:R,onClick:_,onKeyDown:(0,C.R)({siblingSelector:"[data-menu-item]",parentSelector:"[data-menu-dropdown]",activateOnFocus:!1,loop:b.loop,dir:w,orientation:"vertical",onKeyDown:v.onKeydown}),__vars:{"--menu-item-color":A?.isThemeColor&&A?.shade===void 0?`var(--mantine-color-${A.color}-6)`:B?.color,"--menu-item-hover":B?.hover},children:[p&&(0,r.jsx)("div",{...b.getStyles("itemSection",{styles:s,classNames:n}),"data-position":"left",children:p}),h&&(0,r.jsx)("div",{...b.getStyles("itemLabel",{styles:s,classNames:n}),children:h}),f&&(0,r.jsx)("div",{...b.getStyles("itemSection",{styles:s,classNames:n}),"data-position":"right",children:f})]})});R.classes=v,R.displayName="@mantine/core/MenuItem";let N={},_=(0,g.d)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:s,...c}=(0,u.w)("MenuLabel",N,e),l=m();return(0,r.jsx)(h.x,{ref:t,...l.getStyles("label",{className:o,style:i,styles:a,classNames:n}),...c})});_.classes=v,_.displayName="@mantine/core/MenuLabel";var F=n(98399);let B={refProp:"ref"},A=(0,o.forwardRef)((e,t)=>{let{children:n,refProp:i,...a}=(0,u.w)("MenuTarget",B,e);if(!(0,F.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 s=m(),c=(0,k.x)(n.props.onClick,()=>{"click"===s.trigger?s.toggleDropdown():"click-hover"!==s.trigger||(s.setOpenedViaClick(!0),s.opened||s.openDropdown())}),l=(0,k.x)(n.props.onMouseEnter,()=>("hover"===s.trigger||"click-hover"===s.trigger)&&s.openDropdown()),d=(0,k.x)(n.props.onMouseLeave,()=>{"hover"===s.trigger?s.closeDropdown():"click-hover"!==s.trigger||s.openedViaClick||s.closeDropdown()});return(0,r.jsx)(p.J.Target,{refProp:i,popupType:"menu",ref:t,...a,children:(0,o.cloneElement)(n,{onClick:c,onMouseEnter:l,onMouseLeave:d,"data-expanded":!!s.opened||void 0})})});A.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 D(e){let t=(0,u.w)("Menu",L,e),{children:n,onOpen:m,onClose:h,opened:g,defaultOpened:b,trapFocus:y,onChange:x,closeOnItemClick:k,loop:w,closeOnEscape:j,trigger:C,openDelay:S,closeDelay:I,classNames:M,styles:T,unstyled:E,variant:P,vars:R,menuItemTabIndex:N,keepMounted:_,...F}=t,B=(0,l.y)({name:"Menu",classes:v,props:t,classNames:M,styles:T,unstyled:E}),[A,{setHovered:D,resetHovered:$}]=function(){let[e,t]=(0,o.useState)(-1);return[e,{setHovered:t,resetHovered:()=>t(-1)}]}(),[z,H]=(0,i.C)({value:g,defaultValue:b,finalValue:!1,onChange:x}),[O,Z]=(0,o.useState)(!1),V=()=>{H(!1),Z(!1),z&&h?.()},G=()=>{H(!0),z||m?.()},W=()=>{z?V():G()},{openDropdown:Y,closeDropdown:q}=(0,d.U)({open:G,close:V,closeDelay:I,openDelay:S}),{resolvedClassNames:K,resolvedStyles:U}=(0,c.h)({classNames:M,styles:T,props:t});return(0,a.l)(()=>{$()},[z]),(0,r.jsx)(f,{value:{getStyles:B,opened:z,toggleDropdown:W,getItemIndex:e=>{var t;return t="[data-menu-dropdown]",e?Array.from(s.p(e,t)?.querySelectorAll("[data-menu-item]")||[]).findIndex(t=>t===e):null},hovered:A,setHovered:D,openedViaClick:O,setOpenedViaClick:Z,closeOnItemClick:k,closeDropdown:"click"===C?V:q,openDropdown:"click"===C?G:Y,closeDropdownImmediately:V,loop:w,trigger:C,unstyled:E,menuItemTabIndex:N},children:(0,r.jsx)(p.J,{...F,opened:z,onChange:W,defaultOpened:b,trapFocus:!_&&y,closeOnEscape:j,__staticSelector:"Menu",classNames:K,styles:U,unstyled:E,variant:P,keepMounted:_,children:n})})}D.extend=e=>e,D.classes=v,D.displayName="@mantine/core/Menu",D.Item=R,D.Label=_,D.Dropdown=j,D.Target=A,D.Divider=y},78222:function(e,t,n){"use strict";n.d(t,{u:function(){return D}});var r=n(52322);n(2784);var o=n(97263),i=n(38483),a=n(82027),s=n(83147);let[c,l]=(0,n(89106).R)("Modal component was not found in tree");var u={root:"m_9df02822",content:"m_54c44539",inner:"m_1f958f16",header:"m_d0e2b9cd"};let d={},p=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:c,vars:u,...p}=(0,i.w)("ModalBody",d,e),f=l();return(0,r.jsx)(s.y,{ref:t,...f.getStyles("body",{classNames:n,style:a,styles:c,className:o}),...p})});p.classes=u,p.displayName="@mantine/core/ModalBody";var f=n(91403);let m={},h=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalCloseButton",m,e),d=l();return(0,r.jsx)(f._,{ref:t,...d.getStyles("close",{classNames:n,style:a,styles:s,className:o}),...u})});h.classes=u,h.displayName="@mantine/core/ModalCloseButton";var g=n(58898),v=n(91822),b=n(9628);let y={},x=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,children:u,...d}=(0,i.w)("ModalContent",y,e),p=l(),f=p.scrollAreaComponent||b.Z;return(0,r.jsx)(v.G,{...p.getStyles("content",{className:o,style:a,styles:s,classNames:n}),innerProps:p.getStyles("inner",{className:o,style:a,styles:s,classNames:n}),"data-full-screen":p.fullScreen||void 0,"data-modal-content":!0,ref:t,...d,children:(0,r.jsx)(f,{style:{maxHeight:p.fullScreen?"100dvh":`calc(100dvh - (${(0,g.h)(p.yOffset)} * 2))`},children:u})})});x.classes=u,x.displayName="@mantine/core/ModalContent";var k=n(79208);let w={},j=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalHeader",w,e),d=l();return(0,r.jsx)(k.o,{ref:t,...d.getStyles("header",{classNames:n,style:a,styles:s,className:o}),...u})});j.classes=u,j.displayName="@mantine/core/ModalHeader";var C=n(23461);let S={},I=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalOverlay",S,e),d=l();return(0,r.jsx)(C.e,{ref:t,...d.getStyles("overlay",{classNames:n,style:a,styles:s,className:o}),...u})});I.classes=u,I.displayName="@mantine/core/ModalOverlay";var M=n(91482),T=n(11200),E=n(46690),P=n(74610);let R={__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"},N=(0,T.Z)((e,{radius:t,size:n,yOffset:r,xOffset:o})=>({root:{"--modal-radius":void 0===t?void 0:(0,M.H5)(t),"--modal-size":(0,M.ap)(n,"modal-size"),"--modal-y-offset":(0,g.h)(r),"--modal-x-offset":(0,g.h)(o)}})),_=(0,a.d)((e,t)=>{let n=(0,i.w)("ModalRoot",R,e),{classNames:o,className:a,style:s,styles:l,unstyled:d,vars:p,yOffset:f,scrollAreaComponent:m,radius:h,fullScreen:g,centered:v,xOffset:b,__staticSelector:y,...x}=n,k=(0,E.y)({name:y,classes:u,props:n,className:a,style:s,classNames:o,styles:l,unstyled:d,vars:p,varsResolver:N});return(0,r.jsx)(c,{value:{yOffset:f,scrollAreaComponent:m,getStyles:k,fullScreen:g},children:(0,r.jsx)(P.e,{ref:t,...k("root"),"data-full-screen":g||void 0,"data-centered":v||void 0,unstyled:d,...x})})});_.classes=u,_.displayName="@mantine/core/ModalRoot";var F=n(92682);let B={},A=(0,a.d)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalTitle",B,e),d=l();return(0,r.jsx)(F.q,{ref:t,...d.getStyles("title",{classNames:n,style:a,styles:s,className:o}),...u})});A.classes=u,A.displayName="@mantine/core/ModalTitle";let L={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,o.w)("modal"),transitionProps:{duration:200,transition:"fade-down"},withOverlay:!0,withCloseButton:!0},D=(0,a.d)((e,t)=>{let{title:n,withOverlay:o,overlayProps:a,withCloseButton:s,closeButtonProps:c,children:l,radius:u,...d}=(0,i.w)("Modal",L,e),f=!!n||s;return(0,r.jsxs)(_,{ref:t,radius:u,...d,children:[o&&(0,r.jsx)(I,{...a}),(0,r.jsxs)(x,{radius:u,children:[f&&(0,r.jsxs)(j,{children:[n&&(0,r.jsx)(A,{children:n}),s&&(0,r.jsx)(h,{...c})]}),(0,r.jsx)(p,{children:l})]})]})});D.classes=u,D.displayName="@mantine/core/Modal",D.Root=_,D.Overlay=I,D.Content=x,D.Body=p,D.Header=j,D.Title=A,D.CloseButton=h},71116:function(e,t,n){"use strict";n.d(t,{i:function(){return o},q:function(){return i}}),n(2784);var r=n(89106);n(52322);let[o,i]=(0,r.R)("ModalBase component was not found in tree")},74610:function(e,t,n){"use strict";n.d(t,{e:function(){return h}});var r=n(52322),o=n(2784),i=n(50357),a=n(97263),s=n(91482),c=n(28559),l=n(71517),u=n(71116),d=n(66178),p=n(65695),f=n(26565),m=n(98045);let h=(0,o.forwardRef)(({keepMounted:e,opened:t,onClose:n,id:h,transitionProps:g,trapFocus:v,closeOnEscape:b,returnFocus:y,closeOnClickOutside:x,withinPortal:k,portalProps:w,lockScroll:j,children:C,zIndex:S,shadow:I,padding:M,__vars:T,unstyled:E,removeScrollProps:P,...R},N)=>{let{_id:_,titleMounted:F,bodyMounted:B,shouldLockScroll:A,setTitleMounted:L,setBodyMounted:D}=function({id:e,transitionProps:t,opened:n,trapFocus:r,closeOnEscape:i,onClose:a,returnFocus:s}){let c=(0,d.M)(e),[l,u]=(0,o.useState)(!1),[h,g]=(0,o.useState)(!1),v=function({opened:e,transitionDuration:t}){let[n,r]=(0,o.useState)(e),i=(0,o.useRef)(),a=(0,m.J)()?0:t;return(0,o.useEffect)(()=>(e?(r(!0),window.clearTimeout(i.current)):0===a?r(!1):i.current=window.setTimeout(()=>r(!1),a),()=>window.clearTimeout(i.current)),[e,a]),n}({opened:n,transitionDuration:"number"==typeof t?.duration?t?.duration:200});return(0,p.s)("keydown",e=>{"Escape"===e.key&&i&&n&&e.target?.getAttribute("data-mantine-stop-propagation")!=="true"&&a()},{capture:!0}),(0,f.u)({opened:n,shouldReturnFocus:r&&s}),{_id:c,titleMounted:l,bodyMounted:h,shouldLockScroll:v,setTitleMounted:u,setBodyMounted:g}}({id:h,transitionProps:g,opened:t,trapFocus:v,closeOnEscape:b,onClose:n,returnFocus:y});return(0,r.jsx)(l.q,{...w,withinPortal:k,children:(0,r.jsx)(u.i,{value:{opened:t,onClose:n,closeOnClickOutside:x,transitionProps:{...g,keepMounted:e},getTitleId:()=>`${_}-title`,getBodyId:()=>`${_}-body`,titleMounted:F,bodyMounted:B,setTitleMounted:L,setBodyMounted:D,trapFocus:v,closeOnEscape:b,zIndex:S,unstyled:E},children:(0,r.jsx)(i.Z,{enabled:A&&j,...P,children:(0,r.jsx)(c.x,{ref:N,...R,__vars:{...T,"--mb-z-index":(S||(0,a.w)("modal")).toString(),"--mb-shadow":(0,s.Xj)(I),"--mb-padding":(0,s.bG)(M)},children:C})})})})})},40044: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"}},83147:function(e,t,n){"use strict";n.d(t,{y:function(){return l}});var r=n(52322),o=n(2784),i=n(40489),a=n(28559),s=n(71116),c=n(40044);let l=(0,o.forwardRef)(({className:e,...t},n)=>{let l=function(){let e=(0,s.q)();return(0,o.useEffect)(()=>(e.setBodyMounted(!0),()=>e.setBodyMounted(!1)),[]),e.getBodyId()}(),u=(0,s.q)();return(0,r.jsx)(a.x,{ref:n,...t,id:l,className:(0,i.Z)({[c.Z.body]:!u.unstyled},e)})});l.displayName="@mantine/core/ModalBaseBody"},91403:function(e,t,n){"use strict";n.d(t,{_:function(){return l}});var r=n(52322),o=n(2784),i=n(40489),a=n(2670),s=n(71116),c=n(40044);let l=(0,o.forwardRef)(({className:e,onClick:t,...n},o)=>{let l=(0,s.q)();return(0,r.jsx)(a.P,{ref:o,...n,onClick:e=>{l.onClose(),t?.(e)},className:(0,i.Z)({[c.Z.close]:!l.unstyled},e),unstyled:l.unstyled})});l.displayName="@mantine/core/ModalBaseCloseButton"},91822:function(e,t,n){"use strict";n.d(t,{G:function(){return d}});var r=n(52322),o=n(2784),i=n(40489),a=n(10266),s=n(1198),c=n(96321),l=n(71116),u=n(40044);let d=(0,o.forwardRef)(({transitionProps:e,className:t,innerProps:n,onKeyDown:o,style:d,...p},f)=>{let m=(0,l.q)();return(0,r.jsx)(c.u,{mounted:m.opened,transition:"pop",...m.transitionProps,...e,children:e=>(0,r.jsx)("div",{...n,className:(0,i.Z)({[u.Z.inner]:!m.unstyled},n.className),children:(0,r.jsx)(a.i,{active:m.opened&&m.trapFocus,children:(0,r.jsx)(s.X,{...p,component:"section",role:"dialog",tabIndex:-1,"aria-modal":!0,"aria-describedby":m.bodyMounted?m.getBodyId():void 0,"aria-labelledby":m.titleMounted?m.getTitleId():void 0,ref:f,style:[d,e],className:(0,i.Z)({[u.Z.content]:!m.unstyled},t),unstyled:m.unstyled,children:p.children})})})})})},79208:function(e,t,n){"use strict";n.d(t,{o:function(){return l}});var r=n(52322),o=n(2784),i=n(40489),a=n(28559),s=n(71116),c=n(40044);let l=(0,o.forwardRef)(({className:e,...t},n)=>{let o=(0,s.q)();return(0,r.jsx)(a.x,{component:"header",ref:n,className:(0,i.Z)({[c.Z.header]:!o.unstyled},e),...t})});l.displayName="@mantine/core/ModalBaseHeader"},23461:function(e,t,n){"use strict";n.d(t,{e:function(){return l}});var r=n(52322),o=n(2784),i=n(87170),a=n(96321),s=n(71116);let c={duration:200,timingFunction:"ease",transition:"fade"},l=(0,o.forwardRef)(({onClick:e,transitionProps:t,style:n,...o},l)=>{let u=(0,s.q)(),d=function(e){let t=(0,s.q)();return{...c,...t.transitionProps,...e}}(t);return(0,r.jsx)(a.u,{mounted:u.opened,...d,transition:"fade",children:t=>(0,r.jsx)(i.a,{ref:l,fixed:!0,style:[n,t],zIndex:u.zIndex,unstyled:u.unstyled,onClick:t=>{e?.(t),u.closeOnClickOutside&&u.onClose()},...o})})});l.displayName="@mantine/core/ModalBaseOverlay"},92682:function(e,t,n){"use strict";n.d(t,{q:function(){return l}});var r=n(52322),o=n(2784),i=n(40489),a=n(28559),s=n(71116),c=n(40044);let l=(0,o.forwardRef)(({className:e,...t},n)=>{let l=function(){let e=(0,s.q)();return(0,o.useEffect)(()=>(e.setTitleMounted(!0),()=>e.setTitleMounted(!1)),[]),e.getTitleId()}(),u=(0,s.q)();return(0,r.jsx)(a.x,{component:"h2",ref:n,className:(0,i.Z)({[c.Z.title]:!u.unstyled},e),...t,id:l})});l.displayName="@mantine/core/ModalBaseTitle"},9628:function(e,t,n){"use strict";n.d(t,{Z:function(){return o}});var r=n(52322);function o({children:e}){return(0,r.jsx)(r.Fragment,{children:e})}},12189:function(e,t,n){"use strict";n.d(t,{p:function(){return d}});var r=n(52322);n(2784);var o=n(38483),i=n(82027),a=n(29995),s=n(54178),c=n(73063);function l({data:e}){if("group"in e){let t=e.items.map(e=>(0,r.jsx)(l,{data:e},e.value));return(0,r.jsx)("optgroup",{label:e.group,children:t})}let{value:t,label:n,...o}=e;return(0,r.jsx)("option",{value:e.value,...o,children:e.label},e.value)}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:f,unstyled:m,...h}=(0,o.w)("NativeSelect",u,e),g=(0,a.R)(n).map((e,t)=>(0,r.jsx)(l,{data:e},t));return(0,r.jsx)(c.M,{component:"select",ref:t,...h,__staticSelector:"NativeSelect",size:d,pointer:!0,error:p,unstyled:m,rightSection:f||(0,r.jsx)(s.d,{size:d,error:p,unstyled:m}),children:i||g})});d.classes=c.M.classes,d.displayName="@mantine/core/NativeSelect"},41473:function(e,t,n){"use strict";n.d(t,{P:function(){return g}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(13588),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d=n(2670),p=n(12491),f={root:"m_a513464",icon:"m_a4ceffb",loader:"m_b0920b15",body:"m_a49ed24",title:"m_3feedf16",description:"m_3d733a3a",closeButton:"m_919a4d88"};let m={withCloseButton:!0},h=(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}})),g=(0,u.d)((e,t)=>{let n=(0,s.w)("Notification",m,e),{className:o,color:i,radius:a,loading:u,withCloseButton:g,withBorder:v,title:b,icon:y,children:x,onClose:k,closeButtonProps:w,classNames:j,style:C,styles:S,unstyled:I,variant:M,vars:T,mod:E,...P}=n,R=(0,c.y)({name:"Notification",classes:f,props:n,className:o,style:C,classNames:j,styles:S,unstyled:I,vars:T,varsResolver:h});return(0,r.jsxs)(l.x,{...R("root"),mod:[{"data-with-icon":!!y||u,"data-with-border":v},E],ref:t,variant:M,...P,role:"alert",children:[y&&!u&&(0,r.jsx)("div",{...R("icon"),children:y}),u&&(0,r.jsx)(p.a,{size:28,color:i,...R("loader")}),(0,r.jsxs)("div",{...R("body"),children:[b&&(0,r.jsx)("div",{...R("title"),children:b}),(0,r.jsx)(l.x,{...R("description"),mod:{"data-with-title":!!b},children:x})]}),g&&(0,r.jsx)(d.P,{iconSize:16,color:"gray",...w,unstyled:I,onClick:k,...R("closeButton")})]})});g.classes=f,g.displayName="@mantine/core/Notification"},87170:function(e,t,n){"use strict";n.d(t,{a:function(){return g}});var r=n(52322),o=n(58898);n(2784);var i=n(97263),a=n(91482),s=n(11200),c=n(20754),l=n(38483),u=n(46690),d=n(28559),p=n(33502),f={root:"m_9814e45f"};let m={zIndex:(0,i.w)("modal")},h=(0,s.Z)((e,{gradient:t,color:n,backgroundOpacity:r,blur:i,radius:s,zIndex:l})=>({root:{"--overlay-bg":t||(void 0!==n||void 0!==r)&&(0,c.m)(n||"#000",r??.6)||void 0,"--overlay-filter":i?`blur(${(0,o.h)(i)})`:void 0,"--overlay-radius":void 0===s?void 0:(0,a.H5)(s),"--overlay-z-index":l?.toString()}})),g=(0,p.b)((e,t)=>{let n=(0,l.w)("Overlay",m,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:p,fixed:g,center:v,children:b,radius:y,zIndex:x,gradient:k,blur:w,color:j,backgroundOpacity:C,mod:S,...I}=n,M=(0,u.y)({name:"Overlay",props:n,classes:f,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:p,varsResolver:h});return(0,r.jsx)(d.x,{ref:t,...M("root"),mod:[{center:v,fixed:g},S],...I,children:b})});g.classes=f,g.displayName="@mantine/core/Overlay"},1198:function(e,t,n){"use strict";n.d(t,{X:function(){return f}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(38483),s=n(46690),c=n(28559),l=n(33502),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)}})),f=(0,l.b)((e,t)=>{let n=(0,a.w)("Paper",d,e),{classNames:o,className:i,style:l,styles:f,unstyled:m,withBorder:h,vars:g,radius:v,shadow:b,variant:y,mod:x,...k}=n,w=(0,s.y)({name:"Paper",props:n,classes:u,className:i,style:l,classNames:o,styles:f,unstyled:m,vars:g,varsResolver:p});return(0,r.jsx)(c.x,{ref:t,mod:[{"data-with-border":h},x],...w("root"),variant:y,...k})});f.classes=u,f.displayName="@mantine/core/Paper"},50205:function(e,t,n){"use strict";n.d(t,{J:function(){return O}});var r=n(52322),o=n(2784),i=n(66178),a=n(33303),s=n(97263),c=n(91482),l=n(11200),u=n(38483),d=n(46690),p=n(89027),f=n(71916);let[m,h]=(0,n(89106).R)("Popover component was not found in the tree");var g=n(26565),v=n(70837),b=n(58898);let y=()=>{};var x=n(28559),k=n(82027),w=n(62086),j=n(10266),C=n(71517),S=n(96321),I={dropdown:"m_38a85659",arrow:"m_a31dc6c1"};let M={},T=(0,k.d)((e,t)=>{let n=(0,u.w)("PopoverDropdown",M,e),{className:o,style:i,vars:a,children:s,onKeyDownCapture:c,variant:l,classNames:d,styles:p,...f}=n,m=h(),k=(0,g.u)({opened:m.opened,shouldReturnFocus:m.returnFocus}),I=m.withRoles?{"aria-labelledby":m.getTargetId(),id:m.getDropdownId(),role:"dialog",tabIndex:-1}:{},T=(0,v.Yx)(t,m.floating);return m.disabled?null:(0,r.jsx)(C.q,{...m.portalProps,withinPortal:m.withinPortal,children:(0,r.jsx)(S.u,{mounted:m.opened,...m.transitionProps,transition:m.transitionProps?.transition||"fade",duration:m.transitionProps?.duration??150,keepMounted:m.keepMounted,exitDuration:"number"==typeof m.transitionProps?.exitDuration?m.transitionProps.exitDuration:m.transitionProps?.duration,children:e=>(0,r.jsx)(j.i,{active:m.trapFocus,children:(0,r.jsxs)(x.x,{...I,...f,variant:l,ref:T,onKeyDownCapture:function(e,t={active:!0}){return"function"==typeof e&&t.active?n=>{"Escape"===n.key&&(e(n),t.onTrigger?.())}:t.onKeyDown||y}(m.onClose,{active:m.closeOnEscape,onTrigger:k,onKeyDown:c}),"data-position":m.placement,...m.getStyles("dropdown",{className:o,props:n,classNames:d,styles:p,style:[{...e,zIndex:m.zIndex,top:m.y??0,left:m.x??0,width:"target"===m.width?void 0:(0,b.h)(m.width)},i]}),children:[s,(0,r.jsx)(w.Y,{ref:m.arrowRef,arrowX:m.arrowX,arrowY:m.arrowY,visible:m.withArrow,position:m.placement,arrowSize:m.arrowSize,arrowRadius:m.arrowRadius,arrowOffset:m.arrowOffset,arrowPosition:m.arrowPosition,...m.getStyles("arrow",{props:n,classNames:d,styles:p})})]})})})})});T.classes=I,T.displayName="@mantine/core/PopoverDropdown";var E=n(40489),P=n(98399);let R={refProp:"ref",popupType:"dialog"},N=(0,k.d)((e,t)=>{let{children:n,refProp:r,popupType:i,...a}=(0,u.w)("PopoverTarget",R,e);if(!(0,P.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 s=h(),c=(0,v.Yx)(s.reference,n.ref,t),l=s.withRoles?{"aria-haspopup":i,"aria-expanded":s.opened,"aria-controls":s.getDropdownId(),id:s.getTargetId()}:{};return(0,o.cloneElement)(n,{...a,...l,...s.targetProps,className:(0,E.Z)(s.targetProps.className,a.className,n.props.className),[r]:c,...s.controlled?null:{onClick:s.onToggle}})});N.displayName="@mantine/core/PopoverTarget";var _=n(84061),F=n(75580),B=n(92416),A=n(63607),L=n(9341),D=n(71978),$=n(52630);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,s.w)("popover"),__staticSelector:"Popover",width:"max-content"},H=(0,l.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,u.w)("Popover",z,e),{children:n,position:s,offset:c,onPositionChange:l,positionDependencies:h,opened:g,transitionProps:v,width:b,middlewares:y,withArrow:x,arrowSize:k,arrowOffset:w,arrowRadius:j,arrowPosition:C,unstyled:S,classNames:M,styles:T,closeOnClickOutside:E,withinPortal:P,portalProps:R,closeOnEscape:N,clickOutsideEvents:O,trapFocus:Z,onClose:V,onOpen:G,onChange:W,zIndex:Y,radius:q,shadow:K,id:U,defaultOpened:X,__staticSelector:J,withRoles:Q,disabled:ee,returnFocus:et,variant:en,keepMounted:er,vars:eo,floatingStrategy:ei,...ea}=t,es=(0,d.y)({name:J,props:t,classes:I,classNames:M,styles:T,unstyled:S,rootSelector:"dropdown",vars:eo,varsResolver:H}),ec=(0,o.useRef)(null),[el,eu]=(0,o.useState)(null),[ed,ep]=(0,o.useState)(null),{dir:ef}=(0,p.gm)(),em=(0,i.M)(U),eh=function(e){let[t,n]=(0,L.C)({value:e.opened,defaultValue:e.defaultOpened,finalValue:!1,onChange:e.onChange}),r=(0,A.YF)({strategy:e.strategy,placement:e.position,middleware:function(e,t){let n=function(e){if(void 0===e)return{shift:!0,flip:!0};let t={...e};return void 0===e.shift&&(t.shift=!0),void 0===e.flip&&(t.flip=!0),t}(e.middlewares),r=[(0,_.cv)(e.offset)];return n.shift&&r.push((0,F.uY)("boolean"==typeof n.shift?{limiter:(0,F.dr)(),padding:5}:{limiter:(0,F.dr)(),padding:5,...n.shift})),n.flip&&r.push("boolean"==typeof n.flip?(0,F.RR)():(0,F.RR)(n.flip)),n.inline&&r.push("boolean"==typeof n.inline?(0,F.Qo)():(0,F.Qo)(n.inline)),r.push((0,B.x7)({element:e.arrowRef,padding:e.arrowOffset})),(n.size||"target"===e.width)&&r.push((0,F.dp)({..."boolean"==typeof n.size?{}:n.size,apply({rects:r,availableWidth:o,availableHeight:i}){let a=t(),s=a.refs.floating.current?.style??{};n.size&&Object.assign(s,{maxWidth:`${o}px`,maxHeight:`${i}px`}),"target"===e.width&&Object.assign(s,{width:`${r.reference.width}px`})}})),r}(e,()=>r)});return(0,$.L)({opened:e.opened,position:e.position,positionDependencies:e.positionDependencies||[],floating:r}),(0,D.l)(()=>{e.onPositionChange?.(r.placement)},[r.placement]),(0,D.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:y,width:b,position:(0,f._)(ef,s),offset:"number"==typeof c?c+(x?k/2:0):c,arrowRef:ec,arrowOffset:w,onPositionChange:l,positionDependencies:h,opened:g,defaultOpened:X,onChange:W,onOpen:G,onClose:V,strategy:ei});(0,a.O)(()=>E&&eh.onClose(),O,[el,ed]);let eg=(0,o.useCallback)(e=>{eu(e),eh.floating.refs.setReference(e)},[eh.floating.refs.setReference]),ev=(0,o.useCallback)(e=>{ep(e),eh.floating.refs.setFloating(e)},[eh.floating.refs.setFloating]);return(0,r.jsx)(m,{value:{returnFocus:et,disabled:ee,controlled:eh.controlled,reference:eg,floating:ev,x:eh.floating.x,y:eh.floating.y,arrowX:eh.floating?.middlewareData?.arrow?.x,arrowY:eh.floating?.middlewareData?.arrow?.y,opened:eh.opened,arrowRef:ec,transitionProps:v,width:b,withArrow:x,arrowSize:k,arrowOffset:w,arrowRadius:j,arrowPosition:C,placement:eh.floating.placement,trapFocus:Z,withinPortal:P,portalProps:R,zIndex:Y,radius:q,shadow:K,closeOnEscape:N,onClose:eh.onClose,onToggle:eh.onToggle,getTargetId:()=>`${em}-target`,getDropdownId:()=>`${em}-dropdown`,withRoles:Q,targetProps:ea,__staticSelector:J,classNames:M,styles:T,unstyled:S,variant:en,keepMounted:er,getStyles:es},children:n})}O.Target=N,O.Dropdown=T,O.displayName="@mantine/core/Popover",O.extend=e=>e},71517:function(e,t,n){"use strict";n.d(t,{q:function(){return i}});var r=n(52322),o=n(11649);function i({withinPortal:e=!0,children:t,...n}){return e?(0,r.jsx)(o.h,{...n,children:t}):(0,r.jsx)(r.Fragment,{children:t})}i.displayName="@mantine/core/OptionalPortal"},11649:function(e,t,n){"use strict";n.d(t,{h:function(){return u}});var r=n(52322),o=n(2784),i=n(28316),a=n(64261),s=n(70837),c=n(38483);let l={},u=(0,o.forwardRef)((e,t)=>{let{children:n,target:u,...d}=(0,c.w)("Portal",l,e),[p,f]=(0,o.useState)(!1),m=(0,o.useRef)(null);return((0,a.Y)(()=>(f(!0),m.current=u?"string"==typeof u?document.querySelector(u):u: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}(d),(0,s.kR)(t,m.current),!u&&m.current&&document.body.appendChild(m.current),()=>{!u&&m.current&&document.body.removeChild(m.current)}),[u]),p&&m.current)?(0,i.createPortal)((0,r.jsx)(r.Fragment,{children:n}),m.current):null});u.displayName="@mantine/core/Portal"},38405:function(e,t,n){"use strict";n.d(t,{x:function(){return W}});var r=n(52322),o=n(2784),i=n(58898),a=n(11200),s=n(38483),c=n(46690),l=n(28559),u=n(82027),d=n(89106);let[p,f]=(0,d.R)("ScrollArea.Root component was not found in tree");var m=n(7966),h=n(64261);function g(e,t){let n=(0,m.W)(t);(0,h.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 v=(0,o.forwardRef)((e,t)=>{let{style:n,...i}=e,a=f(),[s,c]=(0,o.useState)(0),[l,u]=(0,o.useState)(0),d=!!(s&&l);return g(a.scrollbarX,()=>{let e=a.scrollbarX?.offsetHeight||0;a.onCornerHeightChange(e),u(e)}),g(a.scrollbarY,()=>{let e=a.scrollbarY?.offsetWidth||0;a.onCornerWidthChange(e),c(e)}),d?(0,r.jsx)("div",{...i,ref:t,style:{...n,width:s,height:l}}):null}),b=(0,o.forwardRef)((e,t)=>{let n=f(),o=!!(n.scrollbarX&&n.scrollbarY);return"scroll"!==n.type&&o?(0,r.jsx)(v,{...e,ref:t}):null});var y=n(70837);let x={scrollHideDelay:1e3,type:"hover"},k=(0,o.forwardRef)((e,t)=>{let{type:n,scrollHideDelay:i,scrollbars:a,...c}=(0,s.w)("ScrollAreaRoot",x,e),[u,d]=(0,o.useState)(null),[f,m]=(0,o.useState)(null),[h,g]=(0,o.useState)(null),[v,b]=(0,o.useState)(null),[k,w]=(0,o.useState)(null),[j,C]=(0,o.useState)(0),[S,I]=(0,o.useState)(0),[M,T]=(0,o.useState)(!1),[E,P]=(0,o.useState)(!1),R=(0,y.Yx)(t,e=>d(e));return(0,r.jsx)(p,{value:{type:n,scrollHideDelay:i,scrollArea:u,viewport:f,onViewportChange:m,content:h,onContentChange:g,scrollbarX:v,onScrollbarXChange:b,scrollbarXEnabled:M,onScrollbarXEnabledChange:T,scrollbarY:k,onScrollbarYChange:w,scrollbarYEnabled:E,onScrollbarYEnabledChange:P,onCornerWidthChange:C,onCornerHeightChange:I},children:(0,r.jsx)(l.x,{...c,ref:R,__vars:{"--sa-corner-width":"xy"!==a?"0px":`${j}px`,"--sa-corner-height":"xy"!==a?"0px":`${S}px`}})})});k.displayName="@mantine/core/ScrollAreaRoot";var w=n(64006),j=n(89027);function C(e,t){let n=e/t;return Number.isNaN(n)?0:n}function S(e){let t=C(e.viewport,e.content),n=e.scrollbar.paddingStart+e.scrollbar.paddingEnd;return Math.max((e.scrollbar.size-n)*t,18)}function I(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 M(e,t,n="ltr"){let r=S(t),o=t.scrollbar.paddingStart+t.scrollbar.paddingEnd,i=t.scrollbar.size-o,a=t.content-t.viewport,s=function(e,[t,n]){return Math.min(n,Math.max(t,e))}(e,"ltr"===n?[0,a]:[-1*a,0]);return I([0,a],[0,i-r])(s)}function T(e){return e?parseInt(e,10):0}function E(e,t,{checkForDefaultPrevented:n=!0}={}){return r=>{e?.(r),!1!==n&&r.defaultPrevented||t?.(r)}}let[P,R]=(0,d.R)("ScrollAreaScrollbar was not found in tree"),N=(0,o.forwardRef)((e,t)=>{let{sizes:n,hasThumb:i,onThumbChange:a,onThumbPointerUp:s,onThumbPointerDown:c,onThumbPositionChange:l,onDragScroll:u,onWheelScroll:d,onResize:p,...h}=e,v=f(),[b,x]=(0,o.useState)(null),k=(0,y.Yx)(t,e=>x(e)),j=(0,o.useRef)(null),C=(0,o.useRef)(""),{viewport:S}=v,I=n.content-n.viewport,M=(0,m.W)(d),T=(0,m.W)(l),R=(0,w.y)(p,10),N=e=>{j.current&&u({x:e.clientX-j.current.left,y:e.clientY-j.current.top})};return(0,o.useEffect)(()=>{let e=e=>{let t=e.target;b?.contains(t)&&M(e,I)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})},[S,b,I,M]),(0,o.useEffect)(T,[n,T]),g(b,R),g(v.content,R),(0,r.jsx)(P,{value:{scrollbar:b,hasThumb:i,onThumbChange:(0,m.W)(a),onThumbPointerUp:(0,m.W)(s),onThumbPositionChange:T,onThumbPointerDown:(0,m.W)(c)},children:(0,r.jsx)("div",{...h,ref:k,style:{position:"absolute",...h.style},onPointerDown:E(e.onPointerDown,e=>{0===e.button&&(e.target.setPointerCapture(e.pointerId),j.current=b.getBoundingClientRect(),C.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",N(e))}),onPointerMove:E(e.onPointerMove,N),onPointerUp:E(e.onPointerUp,e=>{let t=e.target;t.hasPointerCapture(e.pointerId)&&t.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=C.current,j.current=null})})})}),_=(0,o.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:i,style:a,...s}=e,c=f(),[l,u]=(0,o.useState)(),d=(0,o.useRef)(null),p=(0,y.Yx)(t,d,c.onScrollbarXChange);return(0,o.useEffect)(()=>{d.current&&u(getComputedStyle(d.current))},[d]),(0,r.jsx)(N,{"data-orientation":"horizontal",...s,ref:p,sizes:n,style:{...a,"--sa-thumb-width":`${S(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{d.current&&c.viewport&&l&&i({content:c.viewport.scrollWidth,viewport:c.viewport.offsetWidth,scrollbar:{size:d.current.clientWidth,paddingStart:T(l.paddingLeft),paddingEnd:T(l.paddingRight)}})}})}),F=(0,o.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:i,style:a,...s}=e,c=f(),[l,u]=(0,o.useState)(),d=(0,o.useRef)(null),p=(0,y.Yx)(t,d,c.onScrollbarYChange);return(0,o.useEffect)(()=>{d.current&&u(window.getComputedStyle(d.current))},[]),(0,r.jsx)(N,{...s,"data-orientation":"vertical",ref:p,sizes:n,style:{"--sa-thumb-height":`${S(n)}px`,...a},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{d.current&&c.viewport&&l&&i({content:c.viewport.scrollHeight,viewport:c.viewport.offsetHeight,scrollbar:{size:d.current.clientHeight,paddingStart:T(l.paddingTop),paddingEnd:T(l.paddingBottom)}})}})}),B=(0,o.forwardRef)((e,t)=>{let{orientation:n="vertical",...i}=e,{dir:a}=(0,j.gm)(),s=f(),c=(0,o.useRef)(null),l=(0,o.useRef)(0),[u,d]=(0,o.useState)({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),p=C(u.viewport,u.content),m={...i,sizes:u,onSizesChange:d,hasThumb:!!(p>0&&p<1),onThumbChange:e=>{c.current=e},onThumbPointerUp:()=>{l.current=0},onThumbPointerDown:e=>{l.current=e}},h=(e,t)=>(function(e,t,n,r="ltr"){let o=S(n),i=t||o/2,a=n.scrollbar.paddingStart+i,s=n.scrollbar.size-n.scrollbar.paddingEnd-(o-i),c=n.content-n.viewport;return I([a,s],"ltr"===r?[0,c]:[-1*c,0])(e)})(e,l.current,u,t);return"horizontal"===n?(0,r.jsx)(_,{...m,ref:t,onThumbPositionChange:()=>{if(s.viewport&&c.current){let e=M(s.viewport.scrollLeft,u,a);c.current.style.transform=`translate3d(${e}px, 0, 0)`}},onWheelScroll:e=>{s.viewport&&(s.viewport.scrollLeft=e)},onDragScroll:e=>{s.viewport&&(s.viewport.scrollLeft=h(e,a))}}):"vertical"===n?(0,r.jsx)(F,{...m,ref:t,onThumbPositionChange:()=>{if(s.viewport&&c.current){let e=M(s.viewport.scrollTop,u);0===u.scrollbar.size?c.current.style.opacity="0":c.current.style.opacity="1",c.current.style.transform=`translate3d(0, ${e}px, 0)`}},onWheelScroll:e=>{s.viewport&&(s.viewport.scrollTop=e)},onDragScroll:e=>{s.viewport&&(s.viewport.scrollTop=h(e))}}):null}),A=(0,o.forwardRef)((e,t)=>{let n=f(),{forceMount:i,...a}=e,[s,c]=(0,o.useState)(!1),l="horizontal"===e.orientation,u=(0,w.y)(()=>{if(n.viewport){let e=n.viewport.offsetWidth{let{forceMount:n,...i}=e,a=f(),[s,c]=(0,o.useState)(!1);return((0,o.useEffect)(()=>{let{scrollArea:e}=a,t=0;if(e){let n=()=>{window.clearTimeout(t),c(!0)},r=()=>{t=window.setTimeout(()=>c(!1),a.scrollHideDelay)};return e.addEventListener("pointerenter",n),e.addEventListener("pointerleave",r),()=>{window.clearTimeout(t),e.removeEventListener("pointerenter",n),e.removeEventListener("pointerleave",r)}}},[a.scrollArea,a.scrollHideDelay]),n||s)?(0,r.jsx)(A,{"data-state":s?"visible":"hidden",...i,ref:t}):null}),D=(0,o.forwardRef)((e,t)=>{let{forceMount:n,...i}=e,a=f(),s="horizontal"===e.orientation,[c,l]=(0,o.useState)("hidden"),u=(0,w.y)(()=>l("idle"),100);return((0,o.useEffect)(()=>{if("idle"===c){let e=window.setTimeout(()=>l("hidden"),a.scrollHideDelay);return()=>window.clearTimeout(e)}},[c,a.scrollHideDelay]),(0,o.useEffect)(()=>{let{viewport:e}=a,t=s?"scrollLeft":"scrollTop";if(e){let n=e[t],r=()=>{let r=e[t];n!==r&&(l("scrolling"),u()),n=r};return e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}},[a.viewport,s,u]),n||"hidden"!==c)?(0,r.jsx)(B,{"data-state":"hidden"===c?"hidden":"visible",...i,ref:t,onPointerEnter:E(e.onPointerEnter,()=>l("interacting")),onPointerLeave:E(e.onPointerLeave,()=>l("idle"))}):null}),$=(0,o.forwardRef)((e,t)=>{let{forceMount:n,...i}=e,a=f(),{onScrollbarXEnabledChange:s,onScrollbarYEnabledChange:c}=a,l="horizontal"===e.orientation;return(0,o.useEffect)(()=>(l?s(!0):c(!0),()=>{l?s(!1):c(!1)}),[l,s,c]),"hover"===a.type?(0,r.jsx)(L,{...i,ref:t,forceMount:n}):"scroll"===a.type?(0,r.jsx)(D,{...i,ref:t,forceMount:n}):"auto"===a.type?(0,r.jsx)(A,{...i,ref:t,forceMount:n}):"always"===a.type?(0,r.jsx)(B,{...i,ref:t}):null}),z=(0,o.forwardRef)((e,t)=>{let{style:n,...i}=e,a=f(),s=R(),{onThumbPositionChange:c}=s,l=(0,y.Yx)(t,e=>s.onThumbChange(e)),u=(0,o.useRef)(),d=(0,w.y)(()=>{u.current&&(u.current(),u.current=void 0)},100);return(0,o.useEffect)(()=>{let{viewport:e}=a;if(e){let t=()=>{if(d(),!u.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,s=n.top!==i.top;(a||s)&&t(),n=i,r=window.requestAnimationFrame(o)}(),()=>window.cancelAnimationFrame(r)}(e,c);u.current=t,c()}};return c(),e.addEventListener("scroll",t),()=>e.removeEventListener("scroll",t)}},[a.viewport,d,c]),(0,r.jsx)("div",{"data-state":s.hasThumb?"visible":"hidden",...i,ref:l,style:{width:"var(--sa-thumb-width)",height:"var(--sa-thumb-height)",...n},onPointerDownCapture:E(e.onPointerDownCapture,e=>{let t=e.target.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top;s.onThumbPointerDown({x:n,y:r})}),onPointerUp:E(e.onPointerUp,s.onThumbPointerUp)})}),H=(0,o.forwardRef)((e,t)=>{let{forceMount:n,...o}=e,i=R();return n||i.hasThumb?(0,r.jsx)(z,{ref:t,...o}):null}),O=(0,o.forwardRef)(({children:e,style:t,...n},o)=>{let i=f(),a=(0,y.Yx)(o,i.onViewportChange);return(0,r.jsx)(l.x,{...n,ref:a,style:{overflowX:i.scrollbarXEnabled?"scroll":"hidden",overflowY:i.scrollbarYEnabled?"scroll":"hidden",...t},children:(0,r.jsx)("div",{style:{minWidth:"100%",display:"table"},ref:i.onContentChange,children:e})})});O.displayName="@mantine/core/ScrollAreaViewport";var Z={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"},G=(0,a.Z)((e,{scrollbarSize:t})=>({root:{"--scrollarea-scrollbar-size":(0,i.h)(t)}})),W=(0,u.d)((e,t)=>{let n=(0,s.w)("ScrollArea",V,e),{classNames:i,className:a,style:l,styles:u,unstyled:d,scrollbarSize:p,vars:f,type:m,scrollHideDelay:h,viewportProps:g,viewportRef:v,onScrollPositionChange:y,children:x,offsetScrollbars:w,scrollbars:j,...C}=n,[S,I]=(0,o.useState)(!1),M=(0,c.y)({name:"ScrollArea",props:n,classes:Z,className:a,style:l,classNames:i,styles:u,unstyled:d,vars:f,varsResolver:G});return(0,r.jsxs)(k,{type:"never"===m?"always":m,scrollHideDelay:h,ref:t,scrollbars:j,...M("root"),...C,children:[(0,r.jsx)(O,{...g,...M("viewport",{style:g?.style}),ref:v,"data-offset-scrollbars":!0===w?"xy":w||void 0,"data-scrollbars":j||void 0,onScroll:e=>{g?.onScroll?.(e),y?.({x:e.currentTarget.scrollLeft,y:e.currentTarget.scrollTop})},children:x}),("xy"===j||"x"===j)&&(0,r.jsx)($,{...M("scrollbar"),orientation:"horizontal","data-hidden":"never"===m||void 0,forceMount:!0,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1),children:(0,r.jsx)(H,{...M("thumb")})}),("xy"===j||"y"===j)&&(0,r.jsx)($,{...M("scrollbar"),orientation:"vertical","data-hidden":"never"===m||void 0,forceMount:!0,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1),children:(0,r.jsx)(H,{...M("thumb")})}),(0,r.jsx)(b,{...M("corner"),"data-hovered":S||void 0,"data-hidden":"never"===m||void 0})]})});W.displayName="@mantine/core/ScrollArea";let Y=(0,u.d)((e,t)=>{let{children:n,classNames:o,styles:i,scrollbarSize:a,scrollHideDelay:c,type:u,dir:d,offsetScrollbars:p,viewportRef:f,onScrollPositionChange:m,unstyled:h,variant:g,viewportProps:v,scrollbars:b,style:y,vars:x,...k}=(0,s.w)("ScrollAreaAutosize",V,e);return(0,r.jsx)(l.x,{...k,ref:t,style:[{display:"flex",overflow:"auto"},y],children:(0,r.jsx)(l.x,{style:{display:"flex",flexDirection:"column",flex:1},children:(0,r.jsx)(W,{classNames:o,styles:i,scrollHideDelay:c,scrollbarSize:a,type:u,dir:d,offsetScrollbars:p,viewportRef:f,onScrollPositionChange:m,unstyled:h,variant:g,viewportProps:v,vars:x,scrollbars:b,children:n})})})});W.classes=Z,Y.displayName="@mantine/core/ScrollAreaAutosize",Y.classes=Z,W.Autosize=Y},84385:function(e,t,n){"use strict";n.d(t,{s:function(){return k}});var r=n(52322),o=n(2784),i=n(9341),a=n(66178),s=n(70837),c=n(91482),l=n(11200),u=n(13588),d=n(39568),p=n(68755),f=n(38483),m=n(46690),h=n(28559),g=n(82027),v=n(19296),b={root:"m_cf365364",indicator:"m_9e182ccd",label:"m_1738fcb2",input:"m_1714d588",control:"m_69686b9b",innerLabel:"m_78882f40"};let y={withItemsBorders:!0},x=(0,l.Z)((e,{radius:t,color:n,transitionDuration:r,size:o,transitionTimingFunction:i})=>({root:{"--sc-radius":void 0===t?void 0:(0,c.H5)(t),"--sc-color":n?(0,u.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,c.ap)(o,"sc-padding"),"--sc-font-size":(0,c.yv)(o)}})),k=(0,g.d)((e,t)=>{let n=(0,f.w)("SegmentedControl",y,e),{classNames:c,className:l,style:u,styles:g,unstyled:k,vars:w,data:j,value:C,defaultValue:S,onChange:I,size:M,name:T,disabled:E,readOnly:P,fullWidth:R,orientation:N,radius:_,color:F,transitionDuration:B,transitionTimingFunction:A,variant:L,autoContrast:D,withItemsBorders:$,mod:z,...H}=n,O=(0,m.y)({name:"SegmentedControl",props:n,classes:b,className:l,style:u,classNames:c,styles:g,unstyled:k,vars:w,varsResolver:x}),Z=(0,p.rZ)(),V=j.map(e=>"string"==typeof e?{label:e,value:e}:e),G=function(){let[e,t]=(0,o.useState)(!1);return(0,o.useEffect)(()=>t(!0),[]),e}(),[W,Y]=(0,o.useState)(null),[q,K]=(0,o.useState)({}),U=(e,t)=>{q[t]=e,K(q)},[X,J]=(0,i.C)({value:C,defaultValue:S,finalValue:Array.isArray(j)?V.find(e=>!e.disabled)?.value??j[0]?.value??null:null,onChange:I}),Q=(0,a.M)(T),ee=V.map(e=>(0,o.createElement)(h.x,{...O("control"),mod:{active:X===e.value,orientation:N},key:e.value},(0,o.createElement)("input",{...O("input"),disabled:E||e.disabled,type:"radio",name:Q,value:e.value,id:`${Q}-${e.value}`,checked:X===e.value,onChange:()=>!P&&J(e.value),"data-focus-ring":Z.focusRing,key:`${e.value}-input`}),(0,o.createElement)(h.x,{component:"label",...O("label"),mod:{active:X===e.value&&!(E||e.disabled),disabled:E||e.disabled,"read-only":P},htmlFor:`${Q}-${e.value}`,ref:t=>U(t,e.value),__vars:{"--sc-label-color":void 0!==F?(0,d.R)({color:F,theme:Z,autoContrast:D}):void 0},key:`${e.value}-label`},(0,r.jsx)("span",{...O("innerLabel"),children:e.label})))),et=(0,s.Yx)(t,e=>Y(e));return 0===j.length?null:(0,r.jsxs)(h.x,{...O("root"),variant:L,size:M,ref:et,mod:[{"full-width":R,orientation:N,initialized:G,"with-items-borders":$},z],...H,role:"radiogroup",children:["string"==typeof X&&(0,r.jsx)(v.G,{target:q[X],parent:W,component:"span",transitionDuration:"var(--sc-transition-duration)",...O("indicator")}),ee]})});k.classes=b,k.displayName="@mantine/core/SegmentedControl"},56867:function(e,t,n){"use strict";n.d(t,{I:function(){return i},Y:function(){return o}}),n(2784);var r=n(89106);n(52322);let[o,i]=(0,r.R)("SliderProvider was not found in tree")},40908: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"}},73822:function(e,t,n){"use strict";n.d(t,{i:function(){return T}});var r=n(52322),o=n(2784),i=n(9341),a=n(82692),s=n(51438),c=n(70837),l=n(58898),u=n(91482),d=n(11200),p=n(13588),f=n(38483),m=n(46690),h=n(82027),g=n(89027),v=n(56867),b=n(10497),y=n(39172),x=n(77970),k=n(37748),w=n(81515),j=n(49514),C=n(40148),S=n(40908);let I={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},M=(0,d.Z)((e,{size:t,color:n,thumbSize:r,radius:o})=>({root:{"--slider-size":(0,u.ap)(t,"slider-size"),"--slider-color":n?(0,p.p)(n,e):void 0,"--slider-radius":void 0===o?void 0:(0,u.H5)(o),"--slider-thumb-size":void 0!==r?(0,l.h)(r):"calc(var(--slider-size) * 2)"}})),T=(0,h.d)((e,t)=>{let n=(0,f.w)("Slider",I,e),{classNames:l,styles:u,value:d,onChange:p,onChangeEnd:h,size:T,min:E,max:P,step:R,precision:N,defaultValue:_,name:F,marks:B,label:A,labelTransitionProps:L,labelAlwaysOn:D,thumbLabel:$,showLabelOnHover:z,thumbChildren:H,disabled:O,unstyled:Z,scale:V,inverted:G,className:W,style:Y,vars:q,hiddenInputProps:K,...U}=n,X=(0,m.y)({name:"Slider",props:n,classes:S.Z,classNames:l,className:W,styles:u,style:Y,vars:q,varsResolver:M,unstyled:Z}),{dir:J}=(0,g.gm)(),[Q,ee]=(0,o.useState)(!1),[et,en]=(0,i.C)({value:"number"==typeof d?(0,a.u)(d,E,P):d,defaultValue:"number"==typeof _?(0,a.u)(_,E,P):_,finalValue:(0,a.u)(0,E,P),onChange:p}),er=(0,o.useRef)(et),eo=(0,o.useRef)(),ei=(0,o.useRef)(),ea=(0,j.b)({value:et,min:E,max:P}),es=V(et),ec="function"==typeof A?A(es):A,el=N??(0,C.p)(R),eu=(0,o.useCallback)(({x:e})=>{if(!O){let t=(0,k.i)({value:e,min:E,max:P,step:R,precision:el});en(t),er.current=t}},[O,E,P,R,el,en]),{ref:ed,active:ep}=(0,s.r)(eu,{onScrubEnd:()=>h?.(er.current)},J);return(0,r.jsx)(v.Y,{value:{getStyles:X},children:(0,r.jsxs)(b.l,{...U,ref:(0,c.Yx)(t,eo),onKeyDownCapture:e=>{if(!O)switch(e.key){case"ArrowUp":{e.preventDefault(),ei.current?.focus();let t=(0,w.J)(Math.min(Math.max(et+R,E),P),el);en(t),h?.(t);break}case"ArrowRight":{e.preventDefault(),ei.current?.focus();let t=(0,w.J)(Math.min(Math.max("rtl"===J?et-R:et+R,E),P),el);en(t),h?.(t);break}case"ArrowDown":{e.preventDefault(),ei.current?.focus();let t=(0,w.J)(Math.min(Math.max(et-R,E),P),el);en(t),h?.(t);break}case"ArrowLeft":{e.preventDefault(),ei.current?.focus();let t=(0,w.J)(Math.min(Math.max("rtl"===J?et+R:et-R,E),P),el);en(t),h?.(t);break}case"Home":e.preventDefault(),ei.current?.focus(),en(E),h?.(E);break;case"End":e.preventDefault(),ei.current?.focus(),en(P),h?.(P)}},onMouseDownCapture:()=>eo.current?.focus(),size:T,disabled:O,children:[(0,r.jsx)(x.f,{inverted:G,offset:0,filled:ea,marks:B,min:E,max:P,value:es,disabled:O,containerProps:{ref:ed,onMouseEnter:z?()=>ee(!0):void 0,onMouseLeave:z?()=>ee(!1):void 0},children:(0,r.jsx)(y.b,{max:P,min:E,value:es,position:ea,dragging:ep,label:ec,ref:ei,labelTransitionProps:L,labelAlwaysOn:D,thumbLabel:$,showLabelOnHover:z,isHovered:Q,disabled:O,children:H})}),(0,r.jsx)("input",{type:"hidden",name:F,value:es,...K})]})})});T.classes=S.Z,T.displayName="@mantine/core/Slider"},10497:function(e,t,n){"use strict";n.d(t,{l:function(){return s}});var r=n(52322),o=n(2784),i=n(28559),a=n(56867);let s=(0,o.forwardRef)(({size:e,disabled:t,variant:n,color:o,thumbSize:s,radius:c,...l},u)=>{let{getStyles:d}=(0,a.I)();return(0,r.jsx)(i.x,{tabIndex:-1,variant:n,size:e,ref:u,...d("root"),...l})});s.displayName="@mantine/core/SliderRoot"},39172:function(e,t,n){"use strict";n.d(t,{b:function(){return c}});var r=n(52322),o=n(2784),i=n(28559),a=n(96321),s=n(56867);let c=(0,o.forwardRef)(({max:e,min:t,value:n,position:c,label:l,dragging:u,onMouseDown:d,onKeyDownCapture:p,labelTransitionProps:f,labelAlwaysOn:m,thumbLabel:h,onFocus:g,onBlur:v,showLabelOnHover:b,isHovered:y,children:x=null,disabled:k},w)=>{let{getStyles:j}=(0,s.I)(),[C,S]=(0,o.useState)(!1),I=m||u||C||b&&y;return(0,r.jsxs)(i.x,{tabIndex:0,role:"slider","aria-label":h,"aria-valuemax":e,"aria-valuemin":t,"aria-valuenow":n,ref:w,__vars:{"--slider-thumb-offset":`${c}%`},...j("thumb",{focusable:!0}),mod:{dragging:u,disabled:k},onFocus:()=>{S(!0),"function"==typeof g&&g()},onBlur:()=>{S(!1),"function"==typeof v&&v()},onTouchStart:d,onMouseDown:d,onKeyDownCapture:p,onClick:e=>e.stopPropagation(),children:[x,(0,r.jsx)(a.u,{mounted:null!=l&&!!I,transition:"fade",duration:0,...f,children:e=>(0,r.jsx)("div",{...j("label",{style:e}),children:l})})]})});c.displayName="@mantine/core/SliderThumb"},77970:function(e,t,n){"use strict";n.d(t,{f:function(){return l}});var r=n(52322),o=n(2784),i=n(28559),a=n(56867),s=n(49514);function c({marks:e,min:t,max:n,disabled:c,value:l,offset:u,inverted:d}){let{getStyles:p}=(0,a.I)();if(!e)return null;let f=e.map((e,a)=>(0,o.createElement)(i.x,{...p("markWrapper"),__vars:{"--mark-offset":`${(0,s.b)({value:e.value,min:t,max:n})}%`},key:a},(0,r.jsx)(i.x,{...p("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:l,offset:u,inverted:d}),disabled:c}}),e.label&&(0,r.jsx)("div",{...p("markLabel"),children:e.label})));return(0,r.jsx)("div",{children:f})}function l({filled:e,children:t,offset:n,disabled:o,marksOffset:s,inverted:l,containerProps:u,...d}){let{getStyles:p}=(0,a.I)();return(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(i.x,{...p("trackContainer"),mod:{disabled:o},...u,children:(0,r.jsxs)(i.x,{...p("track"),mod:{inverted:l,disabled:o},children:[(0,r.jsx)(i.x,{mod:{inverted:l,disabled:o},__vars:{"--slider-bar-width":`calc(${e}% + var(--slider-size))`,"--slider-bar-offset":`calc(${n}% - var(--slider-size))`},...p("bar")}),t,(0,r.jsx)(c,{...d,offset:s,disabled:o,inverted:l})]})})})}c.displayName="@mantine/core/SliderMarks",l.displayName="@mantine/core/SliderTrack"},37748: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),s=Math.max((0!==a?Math.round(a/o)*o:0)+n,n);return void 0!==i?Number(s.toFixed(i)):s}n.d(t,{i:function(){return r}})},81515:function(e,t,n){"use strict";function r(e,t){return parseFloat(e.toFixed(t))}n.d(t,{J:function(){return r}})},49514: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}})},40148: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}})},65438:function(e,t,n){"use strict";n.d(t,{K:function(){return f}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(38483),s=n(46690),c=n(28559),l=n(82027),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}})),f=(0,l.d)((e,t)=>{let n=(0,a.w)("Stack",d,e),{classNames:o,className:i,style:l,styles:f,unstyled:m,vars:h,align:g,justify:v,gap:b,variant:y,...x}=n,k=(0,s.y)({name:"Stack",props:n,classes:u,className:i,style:l,classNames:o,styles:f,unstyled:m,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{ref:t,...k("root"),variant:y,...x})});f.classes=u,f.displayName="@mantine/core/Stack"},950:function(e,t,n){"use strict";n.d(t,{r:function(){return I}});var r=n(52322),o=n(66178),i=n(9341),a=n(2784),s=n(91482),c=n(11200),l=n(13588),u=n(38483),d=n(46690),p=n(97072),f=n(28559),m=n(82027),h=n(50569);let g=(0,a.createContext)(null),v=g.Provider,b=()=>(0,a.useContext)(g);var y=n(6941),x=n(62770);let k={},w=(0,m.d)((e,t)=>{let{value:n,defaultValue:o,onChange:a,size:s,wrapperProps:c,children:l,readOnly:d,...p}=(0,u.w)("SwitchGroup",k,e),[f,m]=(0,i.C)({value:n,defaultValue:o,finalValue:[],onChange:a});return(0,r.jsx)(v,{value:{value:f,onChange:e=>{let t=e.currentTarget.value;d||m(f.includes(t)?f.filter(e=>e!==t):[...f,t])},size:s},children:(0,r.jsx)(y.I.Wrapper,{size:s,ref:t,...c,...p,labelElement:"div",__staticSelector:"SwitchGroup",children:(0,r.jsx)(x.m,{role:"group",children:l})})})});w.classes=y.I.Wrapper.classes,w.displayName="@mantine/core/SwitchGroup";var j={root:"m_5f93f3bb",input:"m_926b4011",track:"m_9307d992",thumb:"m_93039a1d",trackLabel:"m_8277e082"};let C={labelPosition:"right"},S=(0,c.Z)((e,{radius:t,color:n,size:r})=>({root:{"--switch-radius":void 0===t?void 0:(0,s.H5)(t),"--switch-height":(0,s.ap)(r,"switch-height"),"--switch-width":(0,s.ap)(r,"switch-width"),"--switch-thumb-size":(0,s.ap)(r,"switch-thumb-size"),"--switch-label-font-size":(0,s.ap)(r,"switch-label-font-size"),"--switch-track-label-padding":(0,s.ap)(r,"switch-track-label-padding"),"--switch-color":n?(0,l.p)(n,e):void 0}})),I=(0,m.d)((e,t)=>{let n=(0,u.w)("Switch",C,e),{classNames:a,className:s,style:c,styles:l,unstyled:m,vars:g,color:v,label:y,offLabel:x,onLabel:k,id:w,size:I,radius:M,wrapperProps:T,children:E,thumbIcon:P,checked:R,defaultChecked:N,onChange:_,labelPosition:F,description:B,error:A,disabled:L,variant:D,rootRef:$,mod:z,...H}=n,O=b(),Z=I||O?.size,V=(0,d.y)({name:"Switch",props:n,classes:j,className:s,style:c,classNames:a,styles:l,unstyled:m,vars:g,varsResolver:S}),{styleProps:G,rest:W}=(0,p.c)(H),Y=(0,o.M)(w),q=O?{checked:O.value.includes(W.value),onChange:O.onChange}:{},[K,U]=(0,i.C)({value:q.checked??R,defaultValue:N,finalValue:!1});return(0,r.jsxs)(h.Z,{...V("root"),__staticSelector:"Switch",__stylesApiProps:n,id:Y,size:Z,labelPosition:F,label:y,description:B,error:A,disabled:L,bodyElement:"label",labelElement:"span",classNames:a,styles:l,unstyled:m,"data-checked":q.checked||void 0,variant:D,ref:$,mod:z,...G,...T,children:[(0,r.jsx)("input",{...W,disabled:L,checked:K,onChange:e=>{O?q.onChange?.(e):_?.(e),U(e.currentTarget.checked)},id:Y,ref:t,type:"checkbox",role:"switch",...V("input")}),(0,r.jsxs)(f.x,{"aria-hidden":"true",mod:{error:A,"label-position":F},...V("track"),children:[(0,r.jsx)(f.x,{component:"span",mod:"reduce-motion",...V("thumb"),children:P}),(0,r.jsx)("span",{...V("trackLabel"),children:K?k:x})]})]})});I.classes={...j,...h.J},I.displayName="@mantine/core/Switch",I.Group=w},96242:function(e,t,n){"use strict";n.d(t,{i:function(){return P}});var r=n(52322),o=n(58898);n(2784);var i=n(91482),a=n(11200),s=n(13588),c=n(38483),l=n(46690),u=n(28559),d=n(82027);let[p,f]=(0,n(89106).R)("Table component was not found in the tree");var m={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,c.w)(n,{},o),{classNames:s,className:l,style:d,styles:p,...m}=a,h=f();return(0,r.jsx)(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}(h,t),...h.getStyles(e,{className:l,classNames:s,style:d,styles:p,props:a}),...m})});return o.displayName=`@mantine/core/${n}`,o.classes=m,o}let g=h("th",{columnBorder:!0}),v=h("td",{columnBorder:!0}),b=h("tr",{rowBorder:!0,striped:!0,highlightOnHover:!0}),y=h("thead",{stickyHeader:!0}),x=h("tbody"),k=h("tfoot"),w=h("caption",{captionSide:!0});function j({data:e}){return(0,r.jsxs)(r.Fragment,{children:[e.caption&&(0,r.jsx)(w,{children:e.caption}),e.head&&(0,r.jsx)(y,{children:(0,r.jsx)(b,{children:e.head.map((e,t)=>(0,r.jsx)(g,{children:e},t))})}),e.body&&(0,r.jsx)(x,{children:e.body.map((e,t)=>(0,r.jsx)(b,{children:e.map((e,t)=>(0,r.jsx)(v,{children:e},t))},t))}),e.foot&&(0,r.jsx)(k,{children:(0,r.jsx)(b,{children:e.foot.map((e,t)=>(0,r.jsx)(g,{children:e},t))})})]})}j.displayName="@mantine/core/TableDataRenderer";var C=n(38405);let S={type:"scrollarea"},I=(0,a.Z)((e,{minWidth:t,type:n})=>({scrollContainer:{"--table-min-width":(0,o.h)(t),"--table-overflow":"native"===n?"auto":void 0}})),M=(0,d.d)((e,t)=>{let n=(0,c.w)("TableScrollContainer",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:p,children:f,minWidth:h,type:g,...v}=n,b=(0,l.y)({name:"TableScrollContainer",classes:m,props:n,className:i,style:a,classNames:o,styles:s,unstyled:d,vars:p,varsResolver:I,rootSelector:"scrollContainer"});return(0,r.jsx)(u.x,{component:"scrollarea"===g?C.x:"div",..."scrollarea"===g?{offsetScrollbars:"x"}:{},ref:t,...b("scrollContainer"),...v,children:(0,r.jsx)("div",{...b("scrollContainerInner"),children:f})})});M.classes=m,M.displayName="@mantine/core/TableScrollContainer";let T={withRowBorders:!0,verticalSpacing:7},E=(0,a.Z)((e,{layout:t,captionSide:n,horizontalSpacing:r,verticalSpacing:a,borderColor:c,stripedColor:l,highlightOnHoverColor:u,striped:d,highlightOnHover:p,stickyHeaderOffset:f,stickyHeader:m})=>({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":c?(0,s.p)(c,e):void 0,"--table-striped-color":d&&l?(0,s.p)(l,e):void 0,"--table-highlight-on-hover-color":p&&u?(0,s.p)(u,e):void 0,"--table-sticky-header-offset":m?(0,o.h)(f):void 0}})),P=(0,d.d)((e,t)=>{let n=(0,c.w)("Table",T,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:f,horizontalSpacing:h,verticalSpacing:g,captionSide:v,stripedColor:b,highlightOnHoverColor:y,striped:x,highlightOnHover:k,withColumnBorders:w,withRowBorders:C,withTableBorder:S,borderColor:I,layout:M,variant:P,data:R,children:N,stickyHeader:_,stickyHeaderOffset:F,mod:B,...A}=n,L=(0,l.y)({name:"Table",props:n,className:i,style:a,classes:m,classNames:o,styles:s,unstyled:d,rootSelector:"table",vars:f,varsResolver:E});return(0,r.jsx)(p,{value:{getStyles:L,stickyHeader:_,striped:!0===x?"odd":x||void 0,highlightOnHover:k,withColumnBorders:w,withRowBorders:C,captionSide:v||"bottom"},children:(0,r.jsx)(u.x,{component:"table",variant:P,ref:t,mod:[{"data-with-table-border":S},B],...L("table"),...A,children:N||!!R&&(0,r.jsx)(j,{data:R})})})});P.classes=m,P.displayName="@mantine/core/Table",P.Td=v,P.Th=g,P.Tr=b,P.Thead=y,P.Tbody=x,P.Tfoot=k,P.Caption=w,P.ScrollContainer=M,P.DataRenderer=j},8582:function(e,t,n){"use strict";n.d(t,{x:function(){return h}});var r=n(52322);n(2784);var o=n(91482),i=n(11200),a=n(13588),s=n(51848),c=n(38483),l=n(46690),u=n(28559),d=n(33502),p={root:"m_b6d8b162"};let f={inherit:!1},m=(0,i.Z)((e,{variant:t,lineClamp:n,gradient:r,size:i,color:c})=>({root:{"--text-fz":(0,o.yv)(i),"--text-lh":(0,o.Dp)(i),"--text-gradient":"gradient"===t?(0,s.u)(r,e):void 0,"--text-line-clamp":"number"==typeof n?n.toString():void 0,"--text-color":c?(0,a.p)(c,e):void 0}})),h=(0,d.b)((e,t)=>{let n=(0,c.w)("Text",f,e),{lineClamp:o,truncate:i,inline:a,inherit:s,gradient:d,span:h,__staticSelector:g,vars:v,className:b,style:y,classNames:x,styles:k,unstyled:w,variant:j,mod:C,size:S,...I}=n,M=(0,l.y)({name:["Text",g],props:n,classes:p,className:b,style:y,classNames:x,styles:k,unstyled:w,vars:v,varsResolver:m});return(0,r.jsx)(u.x,{...M("root",{focusable:!0}),ref:t,component:h?"span":"p",variant:j,mod:[{"data-truncate":"start"===i?"start":"end"===i||i?"end":void 0,"data-line-clamp":"number"==typeof o,"data-inline":a,"data-inherit":s},C],size:S,...I})});h.classes=p,h.displayName="@mantine/core/Text"},74770:function(e,t,n){"use strict";n.d(t,{o:function(){return c}});var r=n(52322);n(2784);var o=n(38483),i=n(82027),a=n(73063);let s={},c=(0,i.d)((e,t)=>{let n=(0,o.w)("TextInput",s,e);return(0,r.jsx)(a.M,{component:"input",ref:t,...n,__staticSelector:"TextInput"})});c.classes=a.M.classes,c.displayName="@mantine/core/TextInput"},94120:function(e,t,n){"use strict";n.d(t,{D:function(){return m}});var r=n(52322);n(2784);var o=n(11200),i=n(38483),a=n(46690),s=n(28559),c=n(82027),l=n(58898);let u=["h1","h2","h3","h4","h5","h6"];var d={root:"m_8a5d1357"};let p={order:1},f=(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}}}),m=(0,c.d)((e,t)=>{let n=(0,i.w)("Title",p,e),{classNames:o,className:c,style:l,styles:u,unstyled:m,order:h,vars:g,size:v,variant:b,lineClamp:y,textWrap:x,mod:k,...w}=n,j=(0,a.y)({name:"Title",props:n,classes:d,className:c,style:l,classNames:o,styles:u,unstyled:m,vars:g,varsResolver:f});return[1,2,3,4,5,6].includes(h)?(0,r.jsx)(s.x,{...j("root"),component:`h${h}`,variant:b,ref:t,mod:[{order:h,"data-line-clamp":"number"==typeof y},k],size:v,...w}):null});m.classes=d,m.displayName="@mantine/core/Title"},893:function(e,t,n){"use strict";n.d(t,{u:function(){return Z}});var r=n(52322),o=n(2784),i=n(40489),a=n(70837),s=n(98399),c=n(97263),l=n(91482),u=n(11200),d=n(13588),p=n(38483),f=n(46690),m=n(28559),h=n(82027),g=n(89027),v=n(71916),b=n(62086),y=n(71517),x=n(96321);let k={duration:100,transition:"fade"};var w=n(68755),j=n(6178),C=n(63607),S=n(75580),I=n(10712),M={tooltip:"m_1b3c8819",arrow:"m_f898399f"};let T={refProp:"ref",withinPortal:!0,offset:10,position:"right",zIndex:(0,c.w)("popover")},E=(0,u.Z)((e,{radius:t,color:n})=>({tooltip:{"--tooltip-radius":void 0===t?void 0:(0,l.H5)(t),"--tooltip-bg":n?(0,d.p)(n,e):void 0,"--tooltip-color":n?"var(--mantine-color-white)":void 0}})),P=(0,h.d)((e,t)=>{let n=(0,p.w)("TooltipFloating",T,e),{children:i,refProp:c,withinPortal:l,style:u,className:d,classNames:h,styles:g,unstyled:v,radius:b,color:x,label:k,offset:P,position:R,multiline:N,zIndex:_,disabled:F,variant:B,vars:A,portalProps:L,...D}=n,$=(0,w.rZ)(),z=(0,f.y)({name:"TooltipFloating",props:n,classes:M,className:d,style:u,classNames:h,styles:g,unstyled:v,rootSelector:"tooltip",vars:A,varsResolver:E}),{handleMouseMove:H,x:O,y:Z,opened:V,boundaryRef:G,floating:W,setOpened:Y}=function({offset:e,position:t}){let[n,r]=(0,o.useState)(!1),i=(0,o.useRef)(),{x:a,y:s,elements:c,refs:l,update:u,placement:d}=(0,C.YF)({placement:t,middleware:[(0,S.uY)({crossAxis:!0,padding:5,rootBoundary:"document"})]}),p=d.includes("right")?e:t.includes("left")?-1*e:0,f=d.includes("bottom")?e:t.includes("top")?-1*e:0,m=(0,o.useCallback)(({clientX:e,clientY:t})=>{l.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:e,y:t,left:e+p,top:t+f,right:e,bottom:t})})},[c.reference]);return(0,o.useEffect)(()=>{if(l.floating.current){let e=i.current;e.addEventListener("mousemove",m);let t=(0,I.Kx)(l.floating.current);return t.forEach(e=>{e.addEventListener("scroll",u)}),()=>{e.removeEventListener("mousemove",m),t.forEach(e=>{e.removeEventListener("scroll",u)})}}},[c.reference,l.floating.current,u,m,n]),{handleMouseMove:m,x:a,y:s,opened:n,setOpened:r,boundaryRef:i,floating:l.setFloating}}({offset:P,position:R});if(!(0,s.k)(i))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,a.Yx)(G,i.ref,t);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y.q,{...L,withinPortal:l,children:(0,r.jsx)(m.x,{...D,...z("tooltip",{style:{...(0,j.c)(u,$),zIndex:_,display:!F&&V?"block":"none",top:(Z&&Math.round(Z))??"",left:(O&&Math.round(O))??""}}),variant:B,ref:W,mod:{multiline:N},children:k})}),(0,o.cloneElement)(i,{...i.props,[c]:q,onMouseEnter:e=>{i.props.onMouseEnter?.(e),H(e),Y(!0)},onMouseLeave:e=>{i.props.onMouseLeave?.(e),Y(!1)}})]})});P.classes=M,P.displayName="@mantine/core/TooltipFloating";let R=(0,o.createContext)(!1),N=R.Provider,_=()=>(0,o.useContext)(R),F={openDelay:0,closeDelay:0};function B(e){let{openDelay:t,closeDelay:n,children:o}=(0,p.w)("TooltipGroup",F,e);return(0,r.jsx)(N,{value:!0,children:(0,r.jsx)(C.e0,{delay:{open:t,close:n},children:o})})}B.displayName="@mantine/core/TooltipGroup";var A=n(84061),L=n(92416),D=n(66178),$=n(71978),z=n(52630);let H={position:"top",refProp:"ref",withinPortal:!0,inline:!1,arrowSize:4,arrowOffset:5,arrowRadius:0,arrowPosition:"side",offset:5,transitionProps:{duration:100,transition:"fade"},events:{hover:!0,focus:!1,touch:!1},zIndex:(0,c.w)("popover"),positionDependencies:[]},O=(0,u.Z)((e,{radius:t,color:n})=>({tooltip:{"--tooltip-radius":void 0===t?void 0:(0,l.H5)(t),"--tooltip-bg":n?(0,d.p)(n,e):void 0,"--tooltip-color":n?"var(--mantine-color-white)":void 0}})),Z=(0,h.d)((e,t)=>{var n;let c=(0,p.w)("Tooltip",H,e),{children:l,position:u,refProp:d,label:h,openDelay:w,closeDelay:j,onPositionChange:I,opened:T,withinPortal:E,radius:P,color:R,classNames:N,styles:F,unstyled:B,style:Z,className:V,withArrow:G,arrowSize:W,arrowOffset:Y,arrowRadius:q,arrowPosition:K,offset:U,transitionProps:X,multiline:J,events:Q,zIndex:ee,disabled:et,positionDependencies:en,onClick:er,onMouseEnter:eo,onMouseLeave:ei,inline:ea,variant:es,keepMounted:ec,vars:el,portalProps:eu,mod:ed,floatingStrategy:ep,...ef}=(0,p.w)("Tooltip",H,c),{dir:em}=(0,g.gm)(),eh=(0,o.useRef)(null),eg=function(e){let[t,n]=(0,o.useState)(!1),r="boolean"==typeof e.opened?e.opened:t,i=_(),a=(0,D.M)(),{delay:s,currentId:c,setCurrentId:l}=(0,C.tj)(),u=(0,o.useCallback)(e=>{n(e),e&&l(a)},[l,a]),{x:d,y:p,context:f,refs:m,update:h,placement:g,middlewareData:{arrow:{x:v,y:b}={}}}=(0,C.YF)({strategy:e.strategy,placement:e.position,open:r,onOpenChange:u,middleware:[(0,A.cv)(e.offset),(0,S.uY)({padding:8}),(0,S.RR)(),(0,L.x7)({element:e.arrowRef,padding:e.arrowOffset}),...e.inline?[(0,S.Qo)()]:[]]}),{getReferenceProps:y,getFloatingProps:x}=(0,C.NI)([(0,C.XI)(f,{enabled:e.events?.hover,delay:i?s:{open:e.openDelay,close:e.closeDelay},mouseOnly:!e.events?.touch}),(0,C.KK)(f,{enabled:e.events?.focus,visibleOnly:!0}),(0,C.qs)(f,{role:"tooltip"}),(0,C.bQ)(f,{enabled:void 0===e.opened}),(0,C.Qu)(f,{id:a})]);(0,z.L)({opened:r,position:e.position,positionDependencies:e.positionDependencies,floating:{refs:m,update:h}}),(0,$.l)(()=>{e.onPositionChange?.(g)},[g]);let k=r&&c&&c!==a;return{x:d,y:p,arrowX:v,arrowY:b,reference:m.setReference,floating:m.setFloating,getFloatingProps:x,getReferenceProps:y,isGroupPhase:k,opened:r,placement:g}}({position:(0,v._)(em,u),closeDelay:j,openDelay:w,onPositionChange:I,opened:T,events:Q,arrowRef:eh,arrowOffset:Y,offset:"number"==typeof U?U+(G?W/2:0):U,positionDependencies:[...en,l],inline:ea,strategy:ep}),ev=(0,f.y)({name:"Tooltip",props:c,classes:M,className:V,style:Z,classNames:N,styles:F,unstyled:B,rootSelector:"tooltip",vars:el,varsResolver:O});if(!(0,s.k)(l))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 eb=(0,a.Yx)(eg.reference,l.ref,t),ey=(n={duration:100,transition:"fade"},{...k,...n,...X});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y.q,{...eu,withinPortal:E,children:(0,r.jsx)(x.u,{...ey,keepMounted:ec,mounted:!et&&!!eg.opened,duration:eg.isGroupPhase?10:ey.duration,children:e=>(0,r.jsxs)(m.x,{...ef,variant:es,mod:[{multiline:J},ed],...eg.getFloatingProps({ref:eg.floating,className:ev("tooltip").className,style:{...ev("tooltip").style,...e,zIndex:ee,top:eg.y??0,left:eg.x??0}}),children:[h,(0,r.jsx)(b.Y,{ref:eh,arrowX:eg.arrowX,arrowY:eg.arrowY,visible:G,position:eg.placement,arrowSize:W,arrowOffset:Y,arrowRadius:q,arrowPosition:K,...ev("arrow")})]})})}),(0,o.cloneElement)(l,eg.getReferenceProps({onClick:er,onMouseEnter:eo,onMouseLeave:ei,onMouseMove:c.onMouseMove,onPointerDown:c.onPointerDown,onPointerEnter:c.onPointerEnter,[d]:eb,className:(0,i.Z)(V,l.props.className),...l.props}))]})});Z.classes=M,Z.displayName="@mantine/core/Tooltip",Z.Floating=P,Z.Group=B},96321:function(e,t,n){"use strict";n.d(t,{u:function(){return d}});var r=n(52322),o=n(82245);let i={entering:"in",entered:"in",exiting:"out",exited:"out","pre-exiting":"out","pre-entering":"out"};var a=n(2784),s=n(28316),c=n(98045),l=n(71978),u=n(68755);function d({keepMounted:e,transition:t="fade",duration:n=250,exitDuration:d=n,mounted:p,children:f,timingFunction:m="ease",onExit:h,onEntered:g,onEnter:v,onExited:b}){let{transitionDuration:y,transitionStatus:x,transitionTimingFunction:k}=function({duration:e,exitDuration:t,timingFunction:n,mounted:r,onEnter:o,onExit:i,onEntered:d,onExited:p}){let f=(0,u.rZ)(),m=(0,c.J)(),h=!!f.respectReducedMotion&&m,[g,v]=(0,a.useState)(h?0:e),[b,y]=(0,a.useState)(r?"entered":"exited"),x=(0,a.useRef)(-1),k=(0,a.useRef)(-1),w=n=>{let r=n?o:i,a=n?d:p;window.clearTimeout(x.current);let c=h?0:n?e:t;v(c),0===c?("function"==typeof r&&r(),"function"==typeof a&&a(),y(n?"entered":"exited")):k.current=requestAnimationFrame(()=>{s.flushSync(()=>{y(n?"pre-entering":"pre-exiting")}),k.current=requestAnimationFrame(()=>{"function"==typeof r&&r(),y(n?"entering":"exiting"),x.current=window.setTimeout(()=>{"function"==typeof a&&a(),y(n?"entered":"exited")},c)})})};return(0,l.l)(()=>{w(r)},[r]),(0,a.useEffect)(()=>()=>{window.clearTimeout(x.current),cancelAnimationFrame(k.current)},[]),{transitionDuration:g,transitionStatus:b,transitionTimingFunction:n||"ease"}}({mounted:p,exitDuration:d,duration:n,timingFunction:m,onExit:h,onEntered:g,onEnter:v,onExited:b});return 0===y?p?(0,r.jsx)(r.Fragment,{children:f({})}):e?f({display:"none"}):null:"exited"===x?e?f({display:"none"}):null:(0,r.jsx)(r.Fragment,{children:f(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:x,timingFunction:k}))})}d.displayName="@mantine/core/Transition"},82245:function(e,t,n){"use strict";n.d(t,{p:function(){return i}});var r=n(58898);n(2784),n(52322);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"},"fade-up":{in:{opacity:1,transform:"translateY(0)"},out:{opacity:0,transform:`translateY(${(0,r.h)(30)}`},transitionProperty:"opacity, transform"},"fade-down":{in:{opacity:1,transform:"translateY(0)"},out:{opacity:0,transform:`translateY(${(0,r.h)(-30)}`},transitionProperty:"opacity, transform"},"fade-left":{in:{opacity:1,transform:"translateX(0)"},out:{opacity:0,transform:`translateX(${(0,r.h)(30)}`},transitionProperty:"opacity, transform"},"fade-right":{in:{opacity:1,transform:"translateX(0)"},out:{opacity:0,transform:`translateX(${(0,r.h)(-30)}`},transitionProperty:"opacity, transform"},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"}}}},63409:function(e,t,n){"use strict";n.d(t,{k:function(){return u}});var r=n(52322);n(2784);var o=n(38483),i=n(46690),a=n(28559),s=n(33502),c={root:"m_87cf2631"};let l={__staticSelector:"UnstyledButton"},u=(0,s.b)((e,t)=>{let n=(0,o.w)("UnstyledButton",l,e),{className:s,component:u="button",__staticSelector:d,unstyled:p,classNames:f,styles:m,style:h,...g}=n,v=(0,i.y)({name:d,props:n,classes:c,className:s,style:h,classNames:f,styles:m,unstyled:p});return(0,r.jsx)(a.x,{...v("root",{focusable:!0}),component:u,ref:t,type:"button"===u?"button":void 0,...g})});u.classes=c,u.displayName="@mantine/core/UnstyledButton"},1767:function(e,t,n){"use strict";n.d(t,{T:function(){return u}});var r=n(52322);n(2784);var o=n(38483),i=n(46690),a=n(28559),s=n(82027),c={root:"m_515a97f8"};let l={},u=(0,s.d)((e,t)=>{let n=(0,o.w)("VisuallyHidden",l,e),{classNames:s,className:u,style:d,styles:p,unstyled:f,vars:m,...h}=n,g=(0,i.y)({name:"VisuallyHidden",classes:c,props:n,className:u,style:d,classNames:s,styles:p,unstyled:f});return(0,r.jsx)(a.x,{component:"span",ref:t,...g("root"),...h})});u.classes=c,u.displayName="@mantine/core/VisuallyHidden"},28559:function(e,t,n){"use strict";n.d(t,{x:function(){return b}});var r=n(52322),o=n(2784),i=n(40489),a=n(11306),s=n(9437),c=n(82087),l=n(75461),u=n(68755);function d(e){return e.startsWith("data-")?e:`data-${e}`}function p(e,t){return Array.isArray(e)?[...e].reduce((e,n)=>({...e,...p(n,t)}),{}):"function"==typeof e?e(t):null==e?{}:e}var f=n(97072),m=n(58272),h=n(53515),g=n(12063);let v=(0,o.forwardRef)(({component:e,style:t,__vars:n,className:o,variant:a,mod:v,size:b,hiddenFrom:y,visibleFrom:x,lightHidden:k,darkHidden:w,renderRoot:j,__size:C,...S},I)=>{let M=(0,u.rZ)(),{styleProps:T,rest:E}=(0,f.c)(S),P=(0,l.dv)(),R=P?.()?.(T.sx),N=(0,g.m)(),_=(0,h.n)({styleProps:T,theme:M,data:m.p}),F={ref:I,style:function({theme:e,style:t,vars:n,styleProps:r}){let o=p(t,e),i=p(n,e);return{...o,...i,...r}}({theme:M,style:t,vars:n,styleProps:_.inlineStyles}),className:(0,i.Z)(o,R,{[N]:_.hasResponsiveStyles,"mantine-light-hidden":k,"mantine-dark-hidden":w,[`mantine-hidden-from-${y}`]:y,[`mantine-visible-from-${x}`]:x}),"data-variant":a,"data-size":(0,c.s)(b)?void 0:b||void 0,size:C,...function e(t){return t?"string"==typeof t?{[d(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[d(n)]=t[n]),e},{}):null}(v),...E};return(0,r.jsxs)(r.Fragment,{children:[_.hasResponsiveStyles&&(0,r.jsx)(s.f,{selector:`.${N}`,styles:_.styles,media:_.media}),"function"==typeof j?j(F):(0,r.jsx)(e||"div",{...F})]})});v.displayName="@mantine/core/Box";let b=(0,a.F)(v)},6178: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}}})},97072:function(e,t,n){"use strict";n.d(t,{c:function(){return o}});var r=n(40580);function o(e){let{m:t,mx:n,my:o,mt:i,mb:a,ml:s,mr:c,me:l,ms:u,p:d,px:p,py:f,pt:m,pb:h,pl:g,pr:v,pe:b,ps:y,bd:x,bg:k,c:w,opacity:j,ff:C,fz:S,fw:I,lts:M,ta:T,lh:E,fs:P,tt:R,td:N,w:_,miw:F,maw:B,h:A,mih:L,mah:D,bgsz:$,bgp:z,bgr:H,bga:O,pos:Z,top:V,left:G,bottom:W,right:Y,inset:q,display:K,flex:U,hiddenFrom:X,visibleFrom:J,lightHidden:Q,darkHidden:ee,sx:et,...en}=e;return{styleProps:(0,r.L)({m:t,mx:n,my:o,mt:i,mb:a,ml:s,mr:c,me:l,ms:u,p:d,px:p,py:f,pt:m,pb:h,pl:g,pr:v,pe:b,ps:y,bd:x,bg:k,c:w,opacity:j,ff:C,fz:S,fw:I,lts:M,ta:T,lh:E,fs:P,tt:R,td:N,w:_,miw:F,maw:B,h:A,mih:L,mah:D,bgsz:$,bgp:z,bgr:H,bga:O,pos:Z,top:V,left:G,bottom:W,right:Y,inset:q,display:K,flex:U,hiddenFrom:X,visibleFrom:J,lightHidden:Q,darkHidden:ee,sx:et}),rest:en}}n(2784),n(52322)},53515:function(e,t,n){"use strict";n.d(t,{n:function(){return f}});var r=n(98446);n(2784),n(52322);var o=n(58898),i=n(82253),a=n(46403);function s(e,t){let n=(0,a.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 c={text:"var(--mantine-font-family)",mono:"var(--mantine-font-family-monospace)",monospace:"var(--mantine-font-family-monospace)",heading:"var(--mantine-font-family-headings)",headings:"var(--mantine-font-family-headings)"},l=["h1","h2","h3","h4","h5","h6"],u=["h1","h2","h3","h4","h5","h6"],d={color:s,textColor:function(e,t){let n=(0,a.E)({color:e,theme:t});return n.isThemeColor&&void 0===n.shade?`var(--mantine-color-${n.color}-text)`:s(e,t)},fontSize:function(e,t){return"string"==typeof e&&e in t.fontSizes?`var(--mantine-font-size-${e})`:"string"==typeof e&&l.includes(e)?`var(--mantine-${e}-font-size)`:"number"==typeof e||"string"==typeof e?(0,o.h)(e):e},spacing:function(e,t){if("number"==typeof e)return(0,o.h)(e);if("string"==typeof e){let n=e.replace("-","");if(!(n in t.spacing))return(0,o.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,o.h)(e):e},lineHeight:function(e,t){return"string"==typeof e&&e in t.lineHeights?`var(--mantine-line-height-${e})`:"string"==typeof e&&u.includes(e)?`var(--mantine-${e}-line-height)`:e},fontFamily:function(e){return"string"==typeof e&&e in c?c[e]:e},border:function(e,t){if("number"==typeof e)return(0,o.h)(e);if("string"==typeof e){let[n,r,...a]=e.split(" ").filter(e=>""!==e.trim()),c=`${(0,o.h)(n)}`;return r&&(c+=` ${r}`),i.k.length>0&&(c+=` ${s(a.join(" "),t)}`),c.trim()}return e}};function p(e){return e.replace("(min-width: ","").replace("em)","")}function f({styleProps:e,data:t,theme:n}){return function({media:e,...t}){let n=Object.keys(e).sort((e,t)=>Number(p(e))-Number(p(t))).map(t=>({query:t,styles:e[t]}));return{...t,media:n}}((0,r.X)(e).reduce((o,i)=>{var a,s;if("hiddenFrom"===i||"visibleFrom"===i||"sx"===i)return o;let c=t[i],l=Array.isArray(c.property)?c.property:[c.property],u="object"==typeof(s=e[i])&&null!==s?"base"in s?s.base:void 0:s;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 l.forEach(e=>{o.inlineStyles[e]=d[c.type](u,n)}),o;o.hasResponsiveStyles=!0;let p="object"==typeof(a=e[i])&&null!==a?(0,r.X)(a).filter(e=>"base"!==e):[];return l.forEach(t=>{u&&(o.styles[t]=d[c.type](u,n)),p.forEach(r=>{var a;let s=`(min-width: ${n.breakpoints[r]})`;o.media[s]={...o.media[s],[t]:d[c.type]("object"==typeof(a=e[i])&&null!==a&&r in a?a[r]:a,n)}})}),o},{hasResponsiveStyles:!1,styles:{},inlineStyles:{},media:{}}))}},58272: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"},ms:{type:"spacing",property:"marginInlineStart"},me:{type:"spacing",property:"marginInlineEnd"},mx:{type:"spacing",property:"marginInline"},my:{type:"spacing",property:"marginBlock"},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"},ps:{type:"spacing",property:"paddingInlineStart"},pe:{type:"spacing",property:"paddingInlineEnd"},px:{type:"spacing",property:"paddingInline"},py:{type:"spacing",property:"paddingBlock"},bd:{type:"border",property:"border"},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"}}},12063:function(e,t,n){"use strict";n.d(t,{m:function(){return o}});var r=n(2784);function o(){let e=(0,r.useId)().replace(/:/g,"");return`__m__-${e}`}},89027:function(e,t,n){"use strict";n.d(t,{_9:function(){return c},gm:function(){return s}});var r=n(52322),o=n(2784),i=n(64261);let a=(0,o.createContext)({dir:"ltr",toggleDirection:()=>{},setDirection:()=>{}});function s(){return(0,o.useContext)(a)}function c({children:e,initialDirection:t="ltr",detectDirection:n=!0}){let[s,c]=(0,o.useState)(t),l=e=>{c(e),document.documentElement.setAttribute("dir",e)};return(0,i.Y)(()=>{if(n){let e=document.documentElement.getAttribute("dir");("rtl"===e||"ltr"===e)&&l(e)}},[]),(0,r.jsx)(a.Provider,{value:{dir:s,toggleDirection:()=>l("ltr"===s?"rtl":"ltr"),setDirection:l},children:e})}},9437:function(e,t,n){"use strict";n.d(t,{f:function(){return s}});var r=n(52322);n(2784);var o=n(75461),i=n(98446);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 s(e){let t=(0,o.R7)();return(0,r.jsx)("style",{"data-mantine-styles":"inline",nonce:t?.(),dangerouslySetInnerHTML:{__html:function({selector:e,styles:t,media:n,container:r}){let o=t?a(t):"",i=Array.isArray(n)?n.map(t=>`@media${t.query}{${e}{${a(t.styles)}}}`):[],s=Array.isArray(r)?r.map(t=>`@container ${t.query}{${e}{${a(t.styles)}}}`):[];return`${o?`${e}{${o}}`:""}${i.join("")}${s.join("")}`.trim()}(e)}})}},75461:function(e,t,n){"use strict";n.d(t,{DE:function(){return u},Nu:function(){return l},R7:function(){return c},Sm:function(){return a},XD:function(){return o},dv:function(){return d},sZ:function(){return p},uK:function(){return s},wB:function(){return i}});var r=n(2784);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 s(){return i().classNamesPrefix}function c(){return i().getStyleNonce}function l(){return i().withStaticClasses}function u(){return i().headless}function d(){return i().stylesTransform?.sx}function p(){return i().stylesTransform?.styles}},53379:function(e,t,n){"use strict";n.d(t,{m:function(){return d}});var r=n(98446),o=n(58898);n(2784),n(52322);var i=n(87722),a=n(39568),s=n(20754);function c({theme:e,color:t,colorScheme:n,name:r=t,withColorValues:o=!0}){if(!e.colors[t])return{};if("light"===n){let n=(0,i.j)(e,"light"),a={[`--mantine-color-${r}-text`]:`var(--mantine-color-${r}-filled)`,[`--mantine-color-${r}-filled`]:`var(--mantine-color-${r}-${n})`,[`--mantine-color-${r}-filled-hover`]:`var(--mantine-color-${r}-${9===n?8:n+1})`,[`--mantine-color-${r}-light`]:(0,s.F)(e.colors[t][n],.1),[`--mantine-color-${r}-light-hover`]:(0,s.F)(e.colors[t][n],.12),[`--mantine-color-${r}-light-color`]:`var(--mantine-color-${r}-${n})`,[`--mantine-color-${r}-outline`]:`var(--mantine-color-${r}-${n})`,[`--mantine-color-${r}-outline-hover`]:(0,s.F)(e.colors[t][n],.05)};return o?{[`--mantine-color-${r}-0`]:e.colors[t][0],[`--mantine-color-${r}-1`]:e.colors[t][1],[`--mantine-color-${r}-2`]:e.colors[t][2],[`--mantine-color-${r}-3`]:e.colors[t][3],[`--mantine-color-${r}-4`]:e.colors[t][4],[`--mantine-color-${r}-5`]:e.colors[t][5],[`--mantine-color-${r}-6`]:e.colors[t][6],[`--mantine-color-${r}-7`]:e.colors[t][7],[`--mantine-color-${r}-8`]:e.colors[t][8],[`--mantine-color-${r}-9`]:e.colors[t][9],...a}:a}let a=(0,i.j)(e,"dark"),c={[`--mantine-color-${r}-text`]:`var(--mantine-color-${r}-4)`,[`--mantine-color-${r}-filled`]:`var(--mantine-color-${r}-${a})`,[`--mantine-color-${r}-filled-hover`]:`var(--mantine-color-${r}-${9===a?8:a+1})`,[`--mantine-color-${r}-light`]:(0,s.F)(e.colors[t][Math.max(0,a-2)],.15),[`--mantine-color-${r}-light-hover`]:(0,s.F)(e.colors[t][Math.max(0,a-2)],.2),[`--mantine-color-${r}-light-color`]:`var(--mantine-color-${r}-${Math.max(a-5,0)})`,[`--mantine-color-${r}-outline`]:`var(--mantine-color-${r}-${Math.max(a-4,0)})`,[`--mantine-color-${r}-outline-hover`]:(0,s.F)(e.colors[t][Math.max(a-4,0)],.05)};return o?{[`--mantine-color-${r}-0`]:e.colors[t][0],[`--mantine-color-${r}-1`]:e.colors[t][1],[`--mantine-color-${r}-2`]:e.colors[t][2],[`--mantine-color-${r}-3`]:e.colors[t][3],[`--mantine-color-${r}-4`]:e.colors[t][4],[`--mantine-color-${r}-5`]:e.colors[t][5],[`--mantine-color-${r}-6`]:e.colors[t][6],[`--mantine-color-${r}-7`]:e.colors[t][7],[`--mantine-color-${r}-8`]:e.colors[t][8],[`--mantine-color-${r}-9`]:e.colors[t][9],...c}:c}var l=n(74106);function u(e,t,n){(0,r.X)(t).forEach(r=>Object.assign(e,{[`--mantine-${n}-${r}`]:t[r]}))}let d=e=>{let t=(0,i.j)(e,"light"),n=e.defaultRadius in e.radius?e.radius[e.defaultRadius]:(0,o.h)(e.defaultRadius),s={variables:{"--mantine-scale":e.scale.toString(),"--mantine-cursor-type":e.cursorType,"--mantine-color-scheme":"light dark","--mantine-webkit-font-smoothing":e.fontSmoothing?"antialiased":"unset","--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":n,"--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,a.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}-${t})`,"--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)","--mantine-color-dimmed":"var(--mantine-color-gray-6)"},dark:{"--mantine-primary-color-contrast":(0,a.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)","--mantine-color-dimmed":"var(--mantine-color-dark-2)"}};u(s.variables,e.breakpoints,"breakpoint"),u(s.variables,e.spacing,"spacing"),u(s.variables,e.fontSizes,"font-size"),u(s.variables,e.lineHeights,"line-height"),u(s.variables,e.shadows,"shadow"),u(s.variables,e.radius,"radius"),e.colors[e.primaryColor].forEach((t,n)=>{s.variables[`--mantine-primary-color-${n}`]=`var(--mantine-color-${e.primaryColor}-${n})`}),(0,r.X)(e.colors).forEach(t=>{let n=e.colors[t];if((0,l.y)(n)){Object.assign(s.light,c({theme:e,name:n.name,color:n.light,colorScheme:"light",withColorValues:!0})),Object.assign(s.dark,c({theme:e,name:n.name,color:n.dark,colorScheme:"dark",withColorValues:!0}));return}n.forEach((e,n)=>{s.variables[`--mantine-color-${t}-${n}`]=e}),Object.assign(s.light,c({theme:e,color:t,colorScheme:"light",withColorValues:!1})),Object.assign(s.dark,c({theme:e,color:t,colorScheme:"dark",withColorValues:!1}))});let d=e.headings.sizes;return(0,r.X)(d).forEach(t=>{s.variables[`--mantine-${t}-font-size`]=d[t].fontSize,s.variables[`--mantine-${t}-line-height`]=d[t].lineHeight,s.variables[`--mantine-${t}-font-weight`]=d[t].fontWeight||e.headings.fontWeight}),s}},74106:function(e,t,n){"use strict";n.d(t,{R:function(){return o},y:function(){return i}}),n(2784),n(52322);var r=n(82253);function o(e){let t=(0,r.k)(Array.from({length:10}).map((t,n)=>`var(--mantine-color-${e.name}-${n})`));return Object.defineProperty(t,"mantine-virtual-color",{enumerable:!1,writable:!1,configurable:!1,value:!0}),Object.defineProperty(t,"dark",{enumerable:!1,writable:!1,configurable:!1,value:e.dark}),Object.defineProperty(t,"light",{enumerable:!1,writable:!1,configurable:!1,value:e.light}),Object.defineProperty(t,"name",{enumerable:!1,writable:!1,configurable:!1,value:e.name}),t}function i(e){return!!e&&"object"==typeof e&&"mantine-virtual-color"in e}},15759:function(e,t,n){"use strict";n.d(t,{M:function(){return k}});var r=n(52322);function o(e){return"auto"===e||"dark"===e||"light"===e}var i=n(75461),a=n(98446),s=n(65744),c=n(58898),l=n(2784),u=n(68755);function d(){let e=(0,u.rZ)(),t=(0,i.R7)(),n=(0,a.X)(e.breakpoints).reduce((t,n)=>{let r=e.breakpoints[n].includes("px"),o=(0,s.px)(e.breakpoints[n]),i=r?`${o-.1}px`:(0,c.em)(o-.1),a=r?`${o}px`:(0,c.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(0,r.jsx)("style",{"data-mantine-styles":"classes",nonce:t?.(),dangerouslySetInnerHTML:{__html:n}})}function p(e){return Object.entries(e).map(([e,t])=>`${e}: ${t};`).join("")}function f(e,t){return(Array.isArray(e)?e:[e]).reduce((e,t)=>`${t}{${e}}`,t)}var m=n(51324),h=n(53379),g=n(87744);let v=(0,h.m)(g.t);function b({cssVariablesSelector:e,deduplicateCssVariables:t}){let n=(0,u.rZ)(),o=(0,i.R7)(),s=function({theme:e,generator:t}){let n=(0,h.m)(e),r=t?.(e);return r?(0,m.R)(n,r):n}({theme:n,generator:(0,i.Sm)()}),c=":root"===e&&t,l=function(e,t){let n=p(e.variables),r=n?f(t,n):"",o=p(e.dark),i=o?f(`${t}[data-mantine-color-scheme="dark"]`,o):"",a=p(e.light),s=a?f(`${t}[data-mantine-color-scheme="light"]`,a):"";return`${r}${i}${s}`}(c?function(e){let t={variables:{},light:{},dark:{}};return(0,a.X)(e.variables).forEach(n=>{v.variables[n]!==e.variables[n]&&(t.variables[n]=e.variables[n])}),(0,a.X)(e.light).forEach(n=>{v.light[n]!==e.light[n]&&(t.light[n]=e.light[n])}),(0,a.X)(e.dark).forEach(n=>{v.dark[n]!==e.dark[n]&&(t.dark[n]=e.dark[n])}),t}(s):s,e);return l?(0,r.jsx)("style",{"data-mantine-styles":!0,nonce:o?.(),dangerouslySetInnerHTML:{__html:`${l}${c?"":` - ${e}[data-mantine-color-scheme="dark"] { --mantine-color-scheme: dark; } - ${e}[data-mantine-color-scheme="light"] { --mantine-color-scheme: light; } -`}`}}):null}b.displayName="@mantine/CssVariables";var y=n(64261);function x(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,withStaticClasses:a=!0,withGlobalClasses:s=!0,deduplicateCssVariables:c=!0,withCssVariables:p=!0,cssVariablesSelector:f=":root",classNamesPrefix:m="mantine",colorSchemeManager:h=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:g="light",getRootElement:v=()=>document.documentElement,cssVariablesResolver:k,forceColorScheme:w,stylesTransform:j}){let{colorScheme:C,setColorScheme:S,clearColorScheme:I}=function({manager:e,defaultColorScheme:t,getRootElement:n,forceColorScheme:r}){let o=(0,l.useRef)(),[i,a]=(0,l.useState)(()=>e.get(t)),s=r||i,c=(0,l.useCallback)(t=>{r||(x(t,n),a(t),e.set(t))},[e.set,s,r]),u=(0,l.useCallback)(()=>{a(t),x(t,n),e.clear()},[e.clear,t]);return(0,l.useEffect)(()=>(e.subscribe(c),e.unsubscribe),[e.subscribe,e.unsubscribe]),(0,y.Y)(()=>{x(e.get(t),n)},[]),(0,l.useEffect)(()=>{if(r)return x(r,n),()=>{};void 0===r&&x(i,n),o.current=window.matchMedia("(prefers-color-scheme: dark)");let e=e=>{"auto"===i&&x(e.matches?"dark":"light",n)};return o.current?.addEventListener("change",e),()=>o.current?.removeEventListener("change",e)},[i,r]),{colorScheme:s,setColorScheme:c,clearColorScheme:u}}({defaultColorScheme:g,forceColorScheme:w,manager:h,getRootElement:v});return!function({respectReducedMotion:e,getRootElement:t}){(0,y.Y)(()=>{e&&t()?.setAttribute("data-respect-reduced-motion","true")},[e])}({respectReducedMotion:e?.respectReducedMotion||!1,getRootElement:v}),(0,r.jsx)(i.XD.Provider,{value:{colorScheme:C,setColorScheme:S,clearColorScheme:I,getRootElement:v,classNamesPrefix:m,getStyleNonce:n,cssVariablesResolver:k,cssVariablesSelector:f,withStaticClasses:a,stylesTransform:j},children:(0,r.jsxs)(u.M2,{theme:e,children:[p&&(0,r.jsx)(b,{cssVariablesSelector:f,deduplicateCssVariables:c}),s&&(0,r.jsx)(d,{}),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"},68755:function(e,t,n){"use strict";n.d(t,{M2:function(){return p},rZ:function(){return d}});var r=n(52322),o=n(2784),i=n(87744),a=n(51324);function s(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&&(!s(e.primaryShade.dark)||!s(e.primaryShade.light))||"number"==typeof e.primaryShade&&!s(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 l=(0,o.createContext)(null),u=()=>(0,o.useContext)(l)||i.t;function d(){let e=(0,o.useContext)(l);if(!e)throw Error("@mantine/core: MantineProvider was not found in component tree, make sure you have it in your app");return e}function p({theme:e,children:t,inherit:n=!0}){let s=u(),d=(0,o.useMemo)(()=>(function(e,t){if(!t)return c(e),e;let n=(0,a.R)(e,t);return t.fontFamily&&!t.headings?.fontFamily&&(n.headings.fontFamily=t.fontFamily),c(n),n})(n?s:i.t,e),[e,s,n]);return(0,r.jsx)(l.Provider,{value:d,children:t})}p.displayName="@mantine/core/MantineThemeProvider"},82253:function(e,t,n){"use strict";function r(e){return Array.isArray(e)?e:Array(10).fill(e)}n.d(t,{k:function(){return r}})},8943:function(e,t,n){"use strict";n.d(t,{_:function(){return o}});var r=n(65401);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),s=1-t,c=e=>Math.round(e*s);return`rgba(${c(n)}, ${c(o)}, ${c(i)}, ${a})`}},9197:function(e,t,n){"use strict";n.d(t,{B:function(){return c}});var r=n(58898);n(2784),n(52322);var o=n(8943),i=n(51848),a=n(46403),s=n(20754);let c=({color:e,theme:t,variant:n,gradient:c,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,s.m)(n,.1),hover:(0,s.m)(n,.12),color:`var(--mantine-color-${u.color}-${Math.min(u.shade,6)})`,border:`${(0,r.h)(1)} solid transparent`}}return{background:(0,s.m)(e,.1),hover:(0,s.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,s.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,s.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,s.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,s.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)(c,t),hover:(0,i.u)(c,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)`}:{}}},90006:function(e,t,n){"use strict";function r(e,t){return"boolean"==typeof e?e:t.autoContrast}n.d(t,{o:function(){return r}})},39568:function(e,t,n){"use strict";n.d(t,{R:function(){return i},a:function(){return a}});var r=n(87722),o=n(46403);function i({color:e,theme:t,autoContrast:n}){return("boolean"==typeof n?n:t.autoContrast)&&(0,o.E)({color:e||t.primaryColor,theme:t}).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})}},51848:function(e,t,n){"use strict";n.d(t,{u:function(){return o}});var r=n(13588);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%)`}},87722: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}})},13588:function(e,t,n){"use strict";n.d(t,{p:function(){return o}});var r=n(46403);function o(e,t){let n=(0,r.E)({color:e||t.primaryColor,theme:t});return n.variable?`var(${n.variable})`:e}},37360:function(e,t,n){"use strict";n.d(t,{e:function(){return i}});var r=n(65401);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);return .2126*o(t/255)+.7152*o(n/255)+.0722*o(i/255)}(e)>t}},46403:function(e,t,n){"use strict";n.d(t,{E:function(){return i}});var r=n(87722),o=n(37360);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("."),s=a?Number(a):void 0,c=i in t.colors;if(c){let e=void 0!==s?t.colors[i][s]:t.colors[i][(0,r.j)(t,n||"light")];return{color:i,value:e,shade:s,isThemeColor:c,isLight:(0,o.e)(e,t.luminanceThreshold),variable:a?`--mantine-color-${i}-${s}`:`--mantine-color-${i}-filled`}}return{color:e,value:e,isThemeColor:c,isLight:(0,o.e)(e,t.luminanceThreshold),shade:s,variable:void 0}}},20754:function(e,t,n){"use strict";n.d(t,{F:function(){return i},m:function(){return o}});var r=n(65401);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})`}let i=o},65401: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,s=parseInt(o[3],10)/100,c=o[5]?parseFloat(o[5]):void 0,l=(1-Math.abs(2*s-1))*a,u=i/60,d=l*(1-Math.abs(u%2-1)),p=s-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:c||1}}(e):{r:0,g:0,b:0,a:1}}n.d(t,{c:function(){return r}})},60231:function(e,t,n){"use strict";function r(e){return e}n.d(t,{j:function(){return r}})},87744:function(e,t,n){"use strict";n.d(t,{t:function(){return a}});var r=n(58898);n(2784),n(52322);var o=n(9197);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:{}}},68893:function(e,t,n){"use strict";n.d(t,{l:function(){return i}});var r=n(67588),o=n(58092);function i(e,t={getInitialValueInEffect:!0}){let n=(0,r.t)(e,t),{colorScheme:i}=(0,o.X)();return"auto"===i?n:i}},58092:function(e,t,n){"use strict";n.d(t,{X:function(){return s}});var r=n(2784),o=n(67588),i=n(75461);function a(e){let t=document.createElement("style");return t.setAttribute("data-mantine-styles","inline"),t.innerHTML="*, *::before, *::after {transition: none !important;}",t.setAttribute("data-mantine-disable-transition","true"),e&&t.setAttribute("nonce",e),document.head.appendChild(t),()=>document.querySelectorAll("[data-mantine-disable-transition]").forEach(e=>e.remove())}function s({keepTransitions:e}={}){let t=(0,r.useRef)(),n=(0,r.useRef)(),s=(0,r.useContext)(i.XD),c=(0,i.R7)(),l=(0,r.useRef)(c?.());if(!s)throw Error("[@mantine/core] MantineProvider was not found in tree");let u=r=>{s.setColorScheme(r),t.current=e?()=>{}:a(l.current),window.clearTimeout(n.current),n.current=window.setTimeout(()=>{t.current?.()},10)},d=(0,o.t)("light",{getInitialValueInEffect:!1}),p="auto"===s.colorScheme?d:s.colorScheme,f=(0,r.useCallback)(()=>u("light"===p?"dark":"light"),[u,p]);return(0,r.useEffect)(()=>()=>{t.current?.(),window.clearTimeout(n.current)},[]),{colorScheme:s.colorScheme,setColorScheme:u,clearColorScheme:()=>{s.clearColorScheme(),t.current=e?()=>{}:a(l.current),window.clearTimeout(n.current),n.current=window.setTimeout(()=>{t.current?.()},10)},toggleColorScheme:f}}},38483:function(e,t,n){"use strict";n.d(t,{w:function(){return i}});var r=n(40580);n(2784),n(52322);var o=n(68755);function i(e,t,n){let i=(0,o.rZ)(),a=i.components[e]?.defaultProps,s="function"==typeof a?a(i):a;return{...t,...s,...(0,r.L)(n)}}},11306:function(e,t,n){"use strict";function r(e){return e}n.d(t,{F:function(){return r}})},82027:function(e,t,n){"use strict";n.d(t,{d:function(){return i},y:function(){return o}});var r=n(2784);function o(e){return e}function i(e){let t=(0,r.forwardRef)(e);return t.extend=o,t}},33502:function(e,t,n){"use strict";n.d(t,{b:function(){return i}});var r=n(2784),o=n(82027);function i(e){let t=(0,r.forwardRef)(e);return t.extend=o.y,t}},11200:function(e,t,n){"use strict";function r(e){return e}n.d(t,{Z:function(){return r}})},51477:function(e,t,n){"use strict";n.d(t,{h:function(){return a}}),n(2784),n(52322);var r=n(68755),o=n(54834),i=n(80495);function a({classNames:e,styles:t,props:n,stylesCtx:a}){let s=(0,r.rZ)();return{resolvedClassNames:(0,o.m)({theme:s,classNames:e,props:n,stylesCtx:a||void 0}),resolvedStyles:(0,i.i)({theme:s,styles:t,props:n,stylesCtx:a||void 0})}}},79289:function(e,t,n){"use strict";n.d(t,{C:function(){return o},_:function(){return i}});var r=n(40489);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)}},54834:function(e,t,n){"use strict";n.d(t,{m:function(){return i}});var r=n(40489);let o={};function i({theme:e,classNames:t,props:n,stylesCtx:i}){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}((Array.isArray(t)?t:[t]).map(t=>"function"==typeof t?t(e,n,i):t||o))}},80495:function(e,t,n){"use strict";function r({theme:e,styles:t,props:n,stylesCtx:r}){return(Array.isArray(t)?t:[t]).reduce((t,o)=>"function"==typeof o?{...t,...o(e,n,r)}:{...t,...o},{})}n.d(t,{i:function(){return r}})},46690:function(e,t,n){"use strict";n.d(t,{y:function(){return p}}),n(2784),n(52322);var r=n(75461),o=n(68755),i=n(40489),a=n(79289),s=n(54834);function c({selector:e,stylesCtx:t,theme:n,classNames:r,props:o}){return(0,s.m)({theme:n,classNames:r,props:o,stylesCtx:t})[e]}var l=n(80495);function u({style:e,theme:t}){return Array.isArray(e)?[...e].reduce((e,n)=>({...e,...u({style:n,theme:t})}),{}):"function"==typeof e?e(t):null==e?{}:e}var d=n(40580);function p({name:e,classes:t,props:n,stylesCtx:p,className:f,style:m,rootSelector:h="root",unstyled:g,classNames:v,styles:b,vars:y,varsResolver:x}){let k=(0,o.rZ)(),w=(0,r.uK)(),j=(0,r.Nu)(),C=(0,r.DE)(),S=(Array.isArray(e)?e:[e]).filter(e=>e),{withStylesTransform:I,getTransformedStyles:M}=function({props:e,stylesCtx:t,themeName:n}){let i=(0,o.rZ)(),a=r.sZ()?.();return{getTransformedStyles:r=>a?[...r.map(n=>a(n,{props:e,theme:i,ctx:t})),...n.map(n=>a(i.components[n]?.styles,{props:e,theme:i,ctx:t}))].filter(Boolean):[],withStylesTransform:!!a}}({props:n,stylesCtx:p,themeName:S});return(e,r)=>({className:function({theme:e,options:t,themeName:n,selector:r,classNamesPrefix:o,classNames:l,classes:u,unstyled:d,className:p,rootSelector:f,props:m,stylesCtx:h,withStaticClasses:g,headless:v,transformedStyles:b}){return(0,i.Z)((0,a._)({theme:e,options:t,unstyled:d||v}),function({themeName:e,theme:t,selector:n,props:r,stylesCtx:o}){return e.map(e=>s.m({theme:t,classNames:t.components[e]?.classNames,props:r,stylesCtx:o})?.[n])}({theme:e,themeName:n,selector:r,props:m,stylesCtx:h}),function({options:e,classes:t,selector:n,unstyled:r}){return e?.variant&&!r?t[`${n}--${e.variant}`]:void 0}({options:t,classes:u,selector:r,unstyled:d}),c({selector:r,stylesCtx:h,theme:e,classNames:l,props:m}),c({selector:r,stylesCtx:h,theme:e,classNames:b,props:m}),function({selector:e,stylesCtx:t,options:n,props:r,theme:o}){return(0,s.m)({theme:o,classNames:n?.classNames,props:n?.props||r,stylesCtx:t})[e]}({selector:r,stylesCtx:h,options:t,props:m,theme:e}),function({rootSelector:e,selector:t,className:n}){return e===t?n:void 0}({rootSelector:f,selector:r,className:p}),function({selector:e,classes:t,unstyled:n}){return n?void 0:t[e]}({selector:r,classes:u,unstyled:d||v}),g&&!v&&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:S,selector:e,classNamesPrefix:w,classNames:v,classes:t,unstyled:g,className:f,rootSelector:h,props:n,stylesCtx:p,withStaticClasses:j,headless:C,transformedStyles:M([r?.styles,b])}),style:function({theme:e,themeName:t,selector:n,options:r,props:o,stylesCtx:i,rootSelector:a,styles:s,style:c,vars:p,varsResolver:f,headless:m,withStylesTransform:h}){return{...!h&&function({theme:e,themeName:t,props:n,stylesCtx:r,selector:o}){return t.map(t=>(0,l.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}),...!h&&(0,l.i)({theme:e,styles:s,props:o,stylesCtx:i})[n],...!h&&(0,l.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,headless:s}){return[s?{}: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,d.L)(t[n])}}),e),{})?.[i]}({theme:e,props:o,stylesCtx:i,vars:p,varsResolver:f,selector:n,themeName:t,headless:m}),...a===n?u({style:c,theme:e}):null,...u({style:r?.style,theme:e})}}({theme:k,themeName:S,selector:e,options:r,props:n,stylesCtx:p,rootSelector:h,styles:b,style:m,vars:y,varsResolver:x,headless:C,withStylesTransform:I})})}},98498:function(e,t,n){"use strict";function r(e,t){return n=>{e?.(n),t?.(n)}}n.d(t,{x:function(){return r}})},75336:function(e,t,n){"use strict";n.d(t,{V:function(){return i}});var r=n(52322),o=n(2784);function i(e=null){let t=(0,o.createContext)(e);return[({children:e,value:n})=>(0,r.jsx)(t.Provider,{value:n,children:e}),()=>(0,o.useContext)(t)]}},89106:function(e,t,n){"use strict";n.d(t,{R:function(){return i}});var r=n(52322),o=n(2784);function i(e){let t=(0,o.createContext)(null);return[({children:e,value:n})=>(0,r.jsx)(t.Provider,{value:n,children:e}),()=>{let n=(0,o.useContext)(t);if(null===n)throw Error(e);return n}]}},38288:function(e,t,n){"use strict";n.d(t,{R:function(){return o}});var r=n(73491);function o({parentSelector:e,siblingSelector:t,onKeyDown:n,loop:o=!0,activateOnFocus:i=!1,dir:a="rtl",orientation:s}){return c=>{n?.(c);let l=Array.from(r.p(c.currentTarget,e)?.querySelectorAll(t)||[]).filter(t=>{var n;return n=c.currentTarget,(0,r.p)(n,e)===(0,r.p)(t,e)}),u=l.findIndex(e=>c.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),f="rtl"===a?p:d,m="rtl"===a?d:p;switch(c.key){case"ArrowRight":"horizontal"===s&&(c.stopPropagation(),c.preventDefault(),l[f].focus(),i&&l[f].click());break;case"ArrowLeft":"horizontal"===s&&(c.stopPropagation(),c.preventDefault(),l[m].focus(),i&&l[m].click());break;case"ArrowUp":"vertical"===s&&(c.stopPropagation(),c.preventDefault(),l[p].focus(),i&&l[p].click());break;case"ArrowDown":"vertical"===s&&(c.stopPropagation(),c.preventDefault(),l[d].focus(),i&&l[d].click());break;case"Home":c.stopPropagation(),c.preventDefault(),l[0].disabled||l[0].focus();break;case"End":{c.stopPropagation(),c.preventDefault();let e=l.length-1;l[e].disabled||l[e].focus()}}}}},51324: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}}})},40580: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}})},73491: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}})},97263: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]}},66596:function(e,t,n){"use strict";n.d(t,{d:function(){return o}});var r=n(34406);function o(){return void 0!==r&&r.env?"production":"development"}},91482:function(e,t,n){"use strict";n.d(t,{Dp:function(){return l},H5:function(){return s},Xj:function(){return u},ap:function(){return i},bG:function(){return a},yv:function(){return c}});var r=n(82087),o=n(58898);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 s(e){return void 0===e?"var(--mantine-radius-default)":i(e,"mantine-radius")}function c(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)}},98399:function(e,t,n){"use strict";n.d(t,{k:function(){return o}});var r=n(2784);function o(e){return!Array.isArray(e)&&null!==e&&"object"==typeof e&&e.type!==r.Fragment}},82087: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}})},98446:function(e,t,n){"use strict";function r(e){return Object.keys(e)}n.d(t,{X:function(){return r}})},65744: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}})},58898:function(e,t,n){"use strict";function r(e){return"0rem"===e?"0rem":`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||o.startsWith("calc(")||o.startsWith("clamp(")||o.includes("rgba("))return o;if(o.includes(","))return o.split(",").map(e=>n(e)).join(",");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")},29021:function(e,t,n){"use strict";n.d(t,{Nl:function(){return u},S2:function(){return l}});var r,o=n(52322),i=n(2784),a=n(2107);n(74251),n(82668);var s=i.createContext("undefined"!=typeof HTMLElement?(0,a.Z)({key:"css"}):null);s.Provider;let c=(0,i.createContext)(null);function l(){let e=(0,i.useContext)(c);if(null===e)throw Error("Emotion cache is not available in context, make sure that you have MantineEmotionProvider in the component tree");return e}let u=(r=({children:e,cache:t},n)=>(0,o.jsx)(c.Provider,{value:t||n,children:e}),(0,i.forwardRef)(function(e,t){return r(e,(0,i.useContext)(s),t)}))},7966:function(e,t,n){"use strict";n.d(t,{W:function(){return o}});var r=n(2784);function o(e){let t=(0,r.useRef)(e);return(0,r.useEffect)(()=>{t.current=e}),(0,r.useMemo)(()=>(...e)=>t.current?.(...e),[])}},33303:function(e,t,n){"use strict";n.d(t,{O:function(){return i}});var r=n(2784);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;n.every(e=>!!e&&!t.composedPath().includes(e))&&!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}},78574:function(e,t,n){"use strict";n.d(t,{V:function(){return o}});var r=n(2784);function o({timeout:e=2e3}={}){let[t,n]=(0,r.useState)(null),[o,i]=(0,r.useState)(!1),[a,s]=(0,r.useState)(null),c=t=>{window.clearTimeout(a),s(window.setTimeout(()=>i(!1),e)),i(t)};return{copy:e=>{"clipboard"in navigator?navigator.clipboard.writeText(e).then(()=>c(!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}}},67588:function(e,t,n){"use strict";n.d(t,{t:function(){return o}});var r=n(27780);function o(e,t){return(0,r.a)("(prefers-color-scheme: dark)","dark"===e,t)?"dark":"light"}},64006:function(e,t,n){"use strict";n.d(t,{y:function(){return i}});var r=n(2784),o=n(7966);function i(e,t){let n=(0,o.W)(e),i=(0,r.useRef)(0);return(0,r.useEffect)(()=>()=>window.clearTimeout(i.current),[]),(0,r.useCallback)((...e)=>{window.clearTimeout(i.current),i.current=window.setTimeout(()=>n(...e),t)},[n,t])}},71978:function(e,t,n){"use strict";n.d(t,{l:function(){return o}});var r=n(2784);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)}},26565:function(e,t,n){"use strict";n.d(t,{u:function(){return i}});var r=n(2784),o=n(71978);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}},59114:function(e,t,n){"use strict";n.d(t,{N:function(){return i}});var r=n(2784);let o=e=>(e+1)%1e6;function i(){let[,e]=(0,r.useReducer)(o,0);return e}},34192: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:s}=e,{altKey:c,ctrlKey:l,metaKey:u,shiftKey:d,key:p}=t;if(n!==c)return!1;if(i){if(!l&&!u)return!1}else if(r!==l||o!==u)return!1;return a===d&&!!s&&(p.toLowerCase()===s.toLowerCase()||t.code.replace("Key","").toLowerCase()===s.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}})},78297:function(e,t,n){"use strict";n.d(t,{A:function(){return i}});var r=n(2784),o=n(34192);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])}},66178:function(e,t,n){"use strict";n.d(t,{M:function(){return s}});var r=n(2784),o=n(64261),i=n(73533);let a=r["useId".toString()]||(()=>void 0);function s(e){let t=function(){let e=a();return e?`mantine-${e.replace(/:/g,"")}`:""}(),[n,s]=(0,r.useState)(t);return((0,o.Y)(()=>{s((0,i.k)())},[]),"string"==typeof e)?e:"undefined"==typeof window?t:n}},64261:function(e,t,n){"use strict";n.d(t,{Y:function(){return o}});var r=n(2784);let o="undefined"!=typeof document?r.useLayoutEffect:r.useEffect},97654:function(e,t,n){"use strict";n.d(t,{I:function(){return s}});var r=n(2784),o=n(65695);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 s(e){return(function(e,t){let n="localStorage"===e?"mantine-local-storage":"mantine-session-storage",{getItem:s,setItem:c,removeItem:l}=a(e);return function({key:a,defaultValue:u,getInitialValueInEffect:d=!0,deserialize:p=i,serialize:f=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 m=(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=s(a);return null!==r?p(r):u},[a,u]),[h,g]=(0,r.useState)(m(d)),v=(0,r.useCallback)(e=>{e instanceof Function?g(t=>{let r=e(t);return c(a,f(r)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e(t)}})),r}):(c(a,f(e)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e}})),g(e))},[a]),b=(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&&g(p(t.newValue??void 0))}),(0,o.s)(n,e=>{e.detail.key===a&&g(e.detail.value)}),(0,r.useEffect)(()=>{void 0!==u&&void 0===h&&v(u)},[u,h,v]),(0,r.useEffect)(()=>{let e=m();void 0!==e&&v(e)},[]),[void 0===h?u:h,v,b]}})("localStorage","use-local-storage")(e)}!function(e){let{getItem:t}=a(e)}("localStorage")},27780:function(e,t,n){"use strict";n.d(t,{a:function(){return o}});var r=n(2784);function o(e,t,{getInitialValueInEffect:n}={getInitialValueInEffect:!0}){let[o,i]=(0,r.useState)(n?t:!!("undefined"!=typeof window&&"matchMedia"in window)&&window.matchMedia(e).matches),a=(0,r.useRef)();return(0,r.useEffect)(()=>{if("matchMedia"in window)return a.current=window.matchMedia(e),i(a.current.matches),function(e,t){try{return e.addEventListener("change",t),()=>e.removeEventListener("change",t)}catch(n){return e.addListener(t),()=>e.removeListener(t)}}(a.current,e=>i(e.matches))},[e]),o}},70837:function(e,t,n){"use strict";n.d(t,{Yx:function(){return a},kR:function(){return o},lq:function(){return i}});var r=n(2784);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)}},51438:function(e,t,n){"use strict";n.d(t,{E:function(){return i},r:function(){return a}});var r=n(2784),o=n(82692);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),s=(0,r.useRef)(!1),c=(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(c.current),c.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",h),document.addEventListener("mouseup",f),document.addEventListener("touchmove",v),document.addEventListener("touchend",f)},d=()=>{document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",f),document.removeEventListener("touchmove",v),document.removeEventListener("touchend",f)},p=()=>{!s.current&&a.current&&(s.current=!0,"function"==typeof t?.onScrubStart&&t.onScrubStart(),u(!0),l())},f=()=>{s.current&&a.current&&(s.current=!1,u(!1),d(),setTimeout(()=>{"function"==typeof t?.onScrubEnd&&t.onScrubEnd()},0))},m=e=>{p(),e.preventDefault(),h(e)},h=e=>r({x:e.clientX,y:e.clientY}),g=e=>{e.cancelable&&e.preventDefault(),p(),v(e)},v=e=>{e.cancelable&&e.preventDefault(),r({x:e.changedTouches[0].clientX,y:e.changedTouches[0].clientY})};return i.current?.addEventListener("mousedown",m),i.current?.addEventListener("touchstart",g,{passive:!1}),()=>{i.current&&(i.current.removeEventListener("mousedown",m),i.current.removeEventListener("touchstart",g))}},[n,e]),{ref:i,active:l}}},96339:function(e,t,n){"use strict";n.d(t,{I:function(){return o}});var r=n(2784);function o(e,t,n){let o=(0,r.useRef)(),i=(0,r.useRef)(null);return(0,r.useEffect)(()=>{let r="function"==typeof n?n():n;return(r||i.current)&&(o.current=new MutationObserver(e),o.current.observe(r||i.current,t)),()=>{o.current?.disconnect()}},[e,t]),i}},98045:function(e,t,n){"use strict";n.d(t,{J:function(){return o}});var r=n(27780);function o(e,t){return(0,r.a)("(prefers-reduced-motion: reduce)",e,t)}},8246:function(e,t,n){"use strict";n.d(t,{K:function(){return o}});var r=n(2784);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}}},9341:function(e,t,n){"use strict";n.d(t,{C:function(){return o}});var r=n(2784);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]}},65695:function(e,t,n){"use strict";n.d(t,{s:function(){return o}});var r=n(2784);function o(e,t,n){(0,r.useEffect)(()=>(window.addEventListener(e,t,n),()=>window.removeEventListener(e,t,n)),[e,t])}},82692: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}})},73533:function(e,t,n){"use strict";function r(){return`mantine-${Math.random().toString(36).slice(2,11)}`}n.d(t,{k:function(){return r}})},75751: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}})},2807:function(e,t,n){"use strict";n.d(t,{qk:function(){return l},Ro:function(){return i}});var r,o=n(64261);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}))}}]),s=a("openModal"),c=a("closeModal"),l={open:s,close:c,closeAll:a("closeAllModals"),openConfirmModal:a("openConfirmModal"),openContextModal:e=>a("openContextModal")(e)}},60048:function(e,t,n){"use strict";n.d(t,{N9:function(){return l},Ps:function(){return i},yK:function(){return c},zn:function(){return a}});var r=n(73533),o=n(86769);let i=(0,o.M)({notifications:[],queue:[],limit:5}),a=(e=i)=>(0,o.o)(e);function s(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 c(e,t=i){return s(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 s(t,t=>e.id&&t.some(t=>t.id===e.id)?t:[...t,{...e,id:n}]),n},hide:c,update:function(e,t=i){return s(t,t=>t.map(t=>t.id===e.id?{...t,...e}:t)),e.id},clean:function(e=i){s(e,()=>[])},cleanQueue:function(e=i){s(e,t=>t.slice(0,e.getState().limit))},updateState:s}},72278:function(e,t,n){"use strict";n.d(t,{$:function(){return O}});var r=n(52322),o=n(97263),i=n(82027),a=n(38483),s=n(9341);function c(e){return void 0!==e.group&&Array.isArray(e.actions)}var l=n(91349),u=n(52286),d=n(63409),p=n(28559);let[f,m]=(0,n(89106).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 g={dimmedSections:!0,highlightQuery:!1},v=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,id:c,description:f,label:h,leftSection:v,rightSection:b,children:y,dimmedSections:x,highlightQuery:k,highlightColor:w,closeSpotlightOnTrigger:j,onClick:C,onMouseDown:S,keywords:I,vars:M,...T}=(0,a.w)("SpotlightAction",g,e),E=m(),P={classNames:i,styles:s},R=k&&"string"==typeof h?(0,r.jsx)(u.y,{component:"span",highlight:E.query,color:w,...E.getStyles("actionLabel",P),children:h}):(0,r.jsx)("span",{...E.getStyles("actionLabel",P),children:h});return(0,r.jsx)(d.k,{ref:t,"data-action":!0,...E.getStyles("action",{className:n,style:o,...P}),...T,onMouseDown:e=>{e.preventDefault(),S?.(e)},onClick:e=>{C?.(e),(j??E.closeOnActionTrigger)&&l.j5.close(E.store)},tabIndex:-1,children:y||(0,r.jsxs)(r.Fragment,{children:[v&&(0,r.jsx)(p.x,{component:"span",mod:{position:"left",dimmed:x},...E.getStyles("actionSection",P),children:v}),(0,r.jsxs)("span",{...E.getStyles("actionBody",P),children:[R,(0,r.jsx)("span",{...E.getStyles("actionDescription",P),children:f})]}),b&&(0,r.jsx)(p.x,{component:"span",mod:{position:"right",dimmed:x},...E.getStyles("actionSection",P),children:b})]})})});v.classes=h,v.displayName="@mantine/spotlight/SpotlightAction";let b={},y=(0,i.d)((e,t)=>{let{className:n,style:o,styles:i,classNames:s,label:c,children:l,...u}=(0,a.w)("SpotlightActionsGroup",b,e),d=m();return(0,r.jsx)(p.x,{...d.getStyles("actionsGroup",{className:n,style:o,classNames:s,styles:i}),ref:t,...u,__vars:{"--spotlight-label":`'${c}'`},children:l})});y.classes=h,y.displayName="@mantine/core/SpotlightActionsGroup";var x=n(2784),k=n(38405);let w={},j=(0,i.d)((e,t)=>{let{className:n,style:o,id:i,children:s,vars:c,classNames:u,styles:d,...p}=(0,a.w)("SpotlightActionsList",w,e),f=m(),h=`mantine-${(0,x.useId)().replace(/:/g,"")}`,g=i||h;return(0,x.useEffect)(()=>(l.j5.setListId(g,f.store),()=>l.j5.setListId("",f.store)),[]),(0,r.jsx)(k.x.Autosize,{...f.getStyles("actionsList",{className:n,style:o,classNames:u,styles:d}),ref:t,type:"scroll",scrollbarSize:"var(--spotlight-actions-list-padding)",offsetScrollbars:"y",id:g,...p,children:s})});j.classes=h,j.displayName="@mantine/spotlight/SpotlightActionsList";let C={},S=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,...c}=(0,a.w)("SpotlightEmpty",C,e),l=m();return(0,r.jsx)(p.x,{ref:t,...l.getStyles("empty",{classNames:i,styles:s,className:n,style:o}),...c})});S.classes=h,S.displayName="@mantine/spotlight/SpotlightEmpty";let I={},M=(0,i.d)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,...c}=(0,a.w)("SpotlightFooter",I,e),l=m();return(0,r.jsx)(p.x,{ref:t,...l.getStyles("footer",{className:n,classNames:i,style:o,styles:s}),...c})});M.classes=h,M.displayName="@mantine/spotlight/SpotlightFooter";var T=n(68755),E=n(46690),P=n(78222),R=n(54834),N=n(80495),_=n(58898),F=n(78297),B=n(71978);let A={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",A,e),{classNames:o,className:i,style:s,styles:c,unstyled:u,vars:d,store:p,children:m,query:g,onQueryChange:v,transitionProps:b,clearQueryOnClose:y,shortcut:x,tagsToIgnore:k,triggerOnContentEditable:w,disabled:j,onSpotlightOpen:C,onSpotlightClose:S,forceOpened:I,closeOnActionTrigger:M,maxHeight:L,scrollable:D,...$}=n,z=(0,T.rZ)(),{opened:H,query:O}=(0,l.QP)(p),Z=e=>{v?.(e),l.j5.setQuery(e,p)},V=(0,E.y)({name:"Spotlight",classes:h,props:n,className:i,style:s,classNames:o,styles:c,unstyled:u});return((0,F.A)(function(e,t){if(!e)return[];let n=()=>l.j5.open(t);return Array.isArray(e)?e.map(e=>[e,n]):[[e,n]]}(x,p),k,w),(0,B.l)(()=>{H?C?.():S?.()},[H]),j)?null:(0,r.jsx)(f,{value:{getStyles:V,query:g||O,setQuery:Z,store:p,closeOnActionTrigger:M},children:(0,r.jsx)(P.u,{ref:t,...$,withCloseButton:!1,opened:H||!!I,padding:0,onClose:()=>l.j5.close(p),className:i,style:s,classNames:(0,R.m)({theme:z,classNames:[h,o],props:n,stylesCtx:void 0}),styles:(0,N.i)({theme:z,styles:c,props:n,stylesCtx:void 0}),transitionProps:{...b,onExited:()=>{y&&Z(""),l.j5.clearSpotlightState({clearQuery:y},p),b?.onExited?.()}},__vars:{"--spotlight-max-height":D?(0,_.h)(L):void 0},__staticSelector:"Spotlight","data-scrollable":D||void 0,children:m})})});L.classes=h,L.displayName="@mantine/spotlight/SpotlightRoot";var D=n(6941);let $={size:"lg"},z=(0,i.d)((e,t)=>{let{classNames:n,styles:o,onKeyDown:i,onChange:s,vars:c,value:u,...d}=(0,a.w)("SpotlightSearch",$,e),p=m(),f=p.getStyles("search"),[h,g]=(0,x.useState)(!1);return(0,r.jsx)(D.I,{ref:t,classNames:[{input:f.className},n],styles:[{input:f.style},o],...d,value:u??p.query,onChange:e=>{p.setQuery(e.currentTarget.value),s?.(e)},onKeyDown:e=>{i?.(e),h||("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:()=>g(!0),onCompositionEnd:()=>g(!1)})});z.classes=h,z.displayName="@mantine/spotlight/SpotlightSearch";let H={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=[[],[]];return t.reduce((e,t)=>"actions"in t?[...e,...t.actions.map(e=>({...e,group:t.group}))]:[...e,t],[]).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},O=(0,i.d)((e,t)=>{let{searchProps:n,filter:o,query:i,onQueryChange:l,actions:u,nothingFound:d,highlightQuery:p,limit:f,...m}=(0,a.w)("Spotlight",H,e),[h,g]=(0,s.C)({value:i,defaultValue:"",finalValue:"",onChange:l}),b=(function e(t,n){let r=[];if(!Array.isArray(t))return[];for(let o=0;o=n)break;c(i)&&r.push({group:i.group,actions:e(i.actions,n-r.length)}),c(i)||r.push(i)}return r})(o(h,u),f).map(e=>{if(c(e)){let t=e.actions.map(({id:e,...t})=>(0,r.jsx)(v,{highlightQuery:p,...t},e));return(0,r.jsx)(y,{label:e.group,children:t},e.group)}return(0,r.jsx)(v,{highlightQuery:p,...e},e.id)});return(0,r.jsxs)(L,{...m,query:h,onQueryChange:g,ref:t,children:[(0,r.jsx)(z,{...n}),(0,r.jsxs)(j,{children:[b,0===b.length&&d&&(0,r.jsx)(S,{children:d})]})]})});O.classes=h,O.displayName="@mantine/spotlight/Spotlight",O.Search=z,O.ActionsList=j,O.Action=v,O.Empty=S,O.ActionsGroup=y,O.Footer=M,O.Root=L,O.open=l.US.open,O.close=l.US.close,O.toggle=l.US.toggle},91349:function(e,t,n){"use strict";n.d(t,{Gv:function(){return m},QP:function(){return a},US:function(){return g},j5:function(){return f},x9:function(){return h}});var r=n(82692),o=n(86769);let i=()=>(0,o.M)({opened:!1,empty:!1,selected:-1,listId:"",query:"",registeredActions:new Set}),a=e=>(0,o.o)(e);function s(e,t){let n=t.getState();t.setState({...n,...e(t.getState())})}function c(e){s(()=>({opened:!0,selected:-1}),e)}function l(e){s(()=>({opened:!1}),e)}function u(e){s(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]")??[],s=-1===e?a.length-1:e===a.length?0:e,c=(0,r.u)(s,0,a.length-1);return i?.removeAttribute("data-selected"),a[c]?.scrollIntoView({block:"nearest"}),a[c]?.setAttribute("data-selected","true"),d(c,t),c}let f={open:c,close:l,toggle:u,updateState:s,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){s(()=>({query:e}),t),Promise.resolve().then(()=>{p(0,t),s(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 m(){let e=i();return[e,{open:()=>c(e),close:()=>l(e),toggle:()=>u(e)}]}let[h,g]=m(),{open:v,close:b,toggle:y}=g},86769:function(e,t,n){"use strict";n.d(t,{M:function(){return o},o:function(){return i}});var r=n(2784);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())}},25777:function(e,t,n){"use strict";n.d(t,{B:function(){return V}});var r=n(52322),o=n(28559),i=n(58898);function a({withPadding:e=!0,centered:t,maxWidth:n,minHeight:a,children:s,dimmed:c,striped:l}){return(0,r.jsx)(o.x,{className:"m_a3c6e060",mod:{"with-padding":e,centered:t,dimmed:c,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},children:(0,r.jsx)("div",{className:"m_ad8eb9d6",children:s})})}var s=n(22651),c=n(44964),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(0,r.jsx)(r.Fragment,{children:n&&(0,r.jsx)(c.Q,{code:n,className:l.code,getFileIcon:s.g,withExpandButton:!0,defaultExpanded:t})})}var d=n(40489);function p({className:e,...t}){return(0,r.jsx)("div",{className:(0,d.Z)("m_761fa02a",e),...t})}function f({code:e,children:t,withPadding:n,centered:o,defaultExpanded:i=!0,maxWidth:s,minHeight:c,dimmed:l,striped:d}){return(0,r.jsxs)(p,{children:[(0,r.jsx)(a,{withPadding:n,centered:o,maxWidth:s,minHeight:c,dimmed:l,striped:d,children:t}),(0,r.jsx)(u,{code:e,defaultExpanded:i})]})}var m=n(2784),h=n(65438),g=n(8582),v={columns:"m_df4e856a",controls:"m_de00ac9",header:"m_c4d78f60"};function b({children:e,withPadding:t,centered:n,maxWidth:o,minHeight:i,title:s,description:c,controls:l,dimmed:u,striped:d}){return(0,r.jsxs)("div",{className:v.columns,children:[(0,r.jsx)(a,{withPadding:t,maxWidth:o,minHeight:i,centered:n,dimmed:u,striped:d,children:e}),(0,r.jsxs)("div",{className:v.controls,children:[s&&(0,r.jsxs)("div",{className:v.header,children:[(0,r.jsx)(g.x,{fw:500,fz:"sm",mb:5,children:s}),c&&(0,r.jsx)(g.x,{c:"dimmed",fz:11,lh:1.45,children:c})]}),l]})]})}var y=n(950),x=n(75751);function k(e){return(0,x.j)(e.replace(/([a-z])([A-Z])/g,"$1 $2").toLowerCase())}var w=n(6941),j=n(84385);function C(e){return e.map(e=>"string"==typeof e?{label:(0,x.j)(e),value:e}:{value:e.value,label:(0,x.j)(e.label)})}var S=n(87744),I=n(27009),M=n(40284),T=n(93010),E=n(50205),P=n(63409),R=n(37574),N=n(74770);function _(){return(0,r.jsxs)("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)},children:[(0,r.jsx)("path",{fill:"#FF5178",d:"M100 0a100 100 0 00-50 13.398l30 51.961A40 40 0 01100 60V0z"}),(0,r.jsx)("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"}),(0,r.jsx)("path",{fill:"#FFD23B",d:"M13.386 50.02A100 100 0 000 100.025l60-.014a40 40 0 015.354-20.002L13.386 50.021z"}),(0,r.jsx)("path",{fill:"#89C247",d:"M0 100a99.999 99.999 0 0013.398 50l51.961-30A40.001 40.001 0 0160 100H0z"}),(0,r.jsx)("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"}),(0,r.jsx)("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"}),(0,r.jsx)("path",{fill:"#3EC3FF",d:"M100 200c17.554 0 34.798-4.621 50-13.397l-30-51.962A40 40 0 01100 140v60z"}),(0,r.jsx)("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"}),(0,r.jsx)("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"}),(0,r.jsx)("path",{fill:"#622876",d:"M200 100c0-17.554-4.621-34.798-13.397-50l-51.962 30A39.997 39.997 0 01140 100h60z"}),(0,r.jsx)("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"}),(0,r.jsx)("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 F={swatch:"m_5e1a038c",check:"m_f9decbb8",colorControl:"m_2f5f7bca"},B=n(12189),A=n(73822);let L=[{value:0,label:"xs"},{value:25,label:"sm"},{value:50,label:"md"},{value:75,label:"lg"},{value:100,label:"xl"}];function D(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 $({code:e,controls:t,state:n}){return"function"==typeof e?e(D(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}}","")}return 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}`}).trim().replace("\n\n","\n")}(D(t,n),e)}let z={boolean:function({value:e,onChange:t,prop:n,...o}){return(0,r.jsx)(y.r,{checked:e,onChange:e=>t(e.currentTarget.checked),label:k(n),...o})},segmented:function({data:e,value:t,onChange:n,prop:o,transformLabel:i=!0,...a}){return(0,r.jsx)(w.I.Wrapper,{labelElement:"div",label:k(o),...a,children:(0,r.jsx)(j.s,{data:i?C(e):e,value:t,onChange:n,fullWidth:!0,transitionDuration:150})})},color:function({value:e,onChange:t,prop:n,...o}){let[i,a]=(0,m.useState)("#fff"),s=e=>{a(e),t(e)},c=Object.keys(S.t.colors).filter(e=>"dark"!==e).map(n=>(0,r.jsx)(I.b,{color:`var(--mantine-color-${n}-filled)`,component:"button",onClick:()=>t(n),radius:"sm",className:F.swatch,"aria-label":n,children:e===n&&(0,r.jsx)(M.n,{className:F.check})},n));return(0,r.jsx)(w.I.Wrapper,{labelElement:"div",label:k(n),...o,children:(0,r.jsxs)(T.Z,{gap:2,mt:2,wrap:"wrap",children:[c,(0,r.jsxs)(E.J,{radius:"md",position:"bottom-end",shadow:"md",children:[(0,r.jsx)(E.J.Target,{children:(0,r.jsx)(P.k,{className:F.colorControl,"aria-label":"Pick color",children:(0,r.jsx)(_,{})})}),(0,r.jsxs)(E.J.Dropdown,{p:8,children:[(0,r.jsx)(R.z,{value:i,onChange:s,format:"rgba"}),(0,r.jsx)(N.o,{value:i,onChange:e=>s(e.currentTarget.value),placeholder:"Enter color",radius:"md",size:"xs",mt:"xs"})]})]})]})})},string:function({value:e,onChange:t,prop:n,...o}){return(0,r.jsx)(N.o,{value:e,onChange:e=>t(e.currentTarget.value),label:k(n),placeholder:"Enter prop value",...o})},select:function({value:e,onChange:t,prop:n,data:o,...i}){return(0,r.jsx)(B.p,{value:e,onChange:e=>t(e.currentTarget.value),label:k(n),data:C(o),...i})},size:function({value:e,onChange:t,prop:n,...o}){let i=L.find(t=>t.label===e).value;return(0,r.jsx)(w.I.Wrapper,{labelElement:"div",label:k(n),...o,children:(0,r.jsx)(A.i,{value:i,onChange:e=>t(L.find(t=>t.value===e).label),label:e=>L.find(t=>t.value===e).label,step:25,marks:L,styles:{markLabel:{display:"none"}},thumbLabel:"Size"})})},number:function({value:e,onChange:t,prop:n,step:o,min:i,max:a,...s}){return(0,r.jsx)(w.I.Wrapper,{labelElement:"div",label:k(n),...s,children:(0,r.jsx)(A.i,{value:e,onChange:t,step:o,min:i,max:a,thumbLabel:"Size"})})}};function H({code:e,controls:t,children:n,centered:o,maxWidth:i,minHeight:a,withPadding:s,dimmed:c,striped:l}){let d=t.reduce((e,t)=>(e[t.prop]=t.initialValue,e),{}),[f,g]=(0,m.useState)(d),v=(e,t)=>g(n=>({...n,[e]:t})),y=t.map(e=>{let t=z[e.type],{initialValue:n,libraryValue:o,...i}=e;return(0,r.jsx)(t,{value:f[e.prop],onChange:t=>v(e.prop,t),...i},e.prop)});return(0,r.jsxs)(p,{children:[(0,r.jsx)(b,{controls:(0,r.jsx)(h.K,{className:"m_b14e0e0b",gap:"sm",children:y}),centered:o,withPadding:s,maxWidth:i,minHeight:a,dimmed:c,striped:l,children:(0,m.cloneElement)(n,f)}),(0,r.jsx)(u,{code:function({code:e,controls:t,state:n}){if("string"==typeof e||"function"==typeof e)return[{fileName:"Demo.tsx",language:"tsx",code:$({code:e,controls:t,state:n})}];if(Array.isArray(e))return e.map(e=>({fileName:e.fileName||"Demo.tsx",language:e.language||"tsx",code:$({code:e.code,controls:t,state:n})}));throw Error("Unexpected code format in configurator")}({code:e,controls:t,state:f})})]})}function O(e){return e?`.${e} { - outline: 2px solid #fe0d45; - outline-offset: -2px; -} -`:"/*\n * Hover over selectors to apply outline styles\n *\n */"}function Z({data:e,code:t,withPadding:n,maxWidth:o,centered:i,children:a,dimmed:s,striped:c}){let[l,d]=(0,m.useState)(null),f=Object.keys(e.selectors),h=f.map(t=>(0,r.jsxs)(P.k,{className:"m_22105db1",onMouseEnter:()=>d(t),onMouseLeave:()=>d(null),children:[(0,r.jsx)(g.x,{mb:2,children:t}),(0,r.jsx)(g.x,{fz:11,c:"dimmed",children:e.selectors[t]})]},t)),v=l?` classNames={{ ${l}: classes.${l} }}`:"";return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:O(l)}}),(0,r.jsxs)(p,{children:[(0,r.jsx)(b,{withPadding:n,maxWidth:o,centered:i,controls:h,dimmed:s,striped:c,title:"Component Styles API",description:"Hover over selectors to highlight corresponding elements",children:(0,m.cloneElement)(a,{classNames:f.reduce((e,t)=>(e[t]=t,e),{})})}),(0,r.jsx)(u,{code:[{fileName:"Demo.module.css",language:"scss",code:O(l)},{fileName:"Demo.tsx",language:"tsx",code:t.replace("{{props}}",v)}]})]})]})}function V({data:e}){let{component:t}=e;switch(e.type){case"code":return(0,r.jsx)(f,{...e,children:(0,r.jsx)(t,{})});case"configurator":return(0,r.jsx)(H,{...e,children:(0,r.jsx)(t,{})});case"styles-api":return(0,r.jsx)(Z,{...e,children:(0,r.jsx)(t,{})});default:return null}}},60934:function(e,t,n){"use strict";n.d(t,{L:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsxs)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 48 48",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],...n,children:[(0,r.jsx)("path",{fill:"#0277BD",d:"M41 5H7l3 34 14 4 14-4 3-34z"}),(0,r.jsx)("path",{fill:"#039BE5",d:"M24 8v31.9l11.2-3.2L37.7 8z"}),(0,r.jsx)("path",{fill:"#FFF",d:"M33.1 13H24v4h4.9l-.3 4H24v4h4.4l-.3 4.5-4.1 1.4v4.2l7.9-2.6.7-11.5z"}),(0,r.jsx)("path",{fill:"#EEE",d:"M24 13v4h-8.9l-.3-4H24zm-4.6 8l.2 4H24v-4h-4.6zm.4 6h-4l.3 5.5 7.9 2.6v-4.2l-4.1-1.4-.1-2.5z"})]})}},51878:function(e,t,n){"use strict";n.d(t,{D:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsx)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 256 199",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],...n,children:(0,r.jsx)("path",{fill:"currentColor",d:"M216.856 16.597A208.5 208.5 0 00164.042 0c-2.275 4.113-4.933 9.646-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.4-4.55-9.933-6.846-14.046a207.807 207.807 0 00-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.13 161.13 0 0079.735 175.3a136.374 136.374 0 01-21.846-10.632 108.542 108.542 0 005.356-4.237c42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237a136.011 136.011 0 01-21.886 10.653c4.006 8.02 8.638 15.671 13.873 22.848 21.142-6.581 42.646-16.637 64.815-33.213 5.316-56.288-9.081-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18z"})})}},13444:function(e,t,n){"use strict";n.d(t,{E:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsx)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],fill:"currentColor",...n,children:(0,r.jsx)("path",{fillRule:"evenodd",d:"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"})})}},82106:function(e,t,n){"use strict";n.d(t,{_:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsxs)(o.x,{component:"svg",...n,preserveAspectRatio:"xMidYMid",viewBox:"0 0 256 256",xmlns:"http://www.w3.org/2000/svg",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],children:[(0,r.jsx)("path",{d:"M0 256V0h256v256z",fill:"#C12127"}),(0,r.jsx)("path",{d:"M48 48h160v160h-32V80h-48v128H48z",fill:"#FFF"})]})}},55709:function(e,t,n){"use strict";n.d(t,{s:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsxs)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 256 256",preserveAspectRatio:"xMidYMid",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],...n,children:[(0,r.jsx)("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"}),(0,r.jsx)("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"})]})}},60142:function(e,t,n){"use strict";n.d(t,{K:function(){return a}});var r=n(52322),o=n(28559),i=n(58898);function a({size:e,style:t,...n}){return(0,r.jsxs)(o.x,{component:"svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 48 48",style:[{width:(0,i.h)(e),height:(0,i.h)(e)},t],...n,children:[(0,r.jsx)("path",{fill:"#1976d2",d:"M6 6h36v36H6z"}),(0,r.jsx)("path",{fill:"#fff",d:"M27.49 22H14.227v3.264h4.757V40h3.769V25.264h4.737zM39.194 26.084s-1.787-1.192-3.807-1.192-2.747.96-2.747 1.986c0 2.648 7.381 2.383 7.381 7.712 0 8.209-11.254 4.568-11.254 4.568V35.22s2.152 1.622 4.733 1.622 2.483-1.688 2.483-1.92c0-2.449-7.315-2.449-7.315-7.878 0-7.381 10.658-4.469 10.658-4.469l-.132 3.509z"})]})}},22651:function(e,t,n){"use strict";n.d(t,{g:function(){return a}});var r=n(52322),o=n(60934),i=n(60142);function a(e){return e.endsWith(".ts")||e.endsWith(".tsx")?(0,r.jsx)(i.K,{size:18}):e.endsWith(".css")||e.endsWith(".scss")?(0,r.jsx)(o.L,{size:18}):null}},48158:function(e,t,n){"use strict";n.d(t,{D:function(){return d}});var r=n(52322),o=n(58898),i=n(68755),a=n(46403);function s({color:e,inverted:t}){let n=(0,i.rZ)(),r=(0,a.E)({color:e||"blue",theme:n}),o=r.isThemeColor?n.colors[r.color][5]:e;return{background:t?n.white:o,color:t?o:n.white}}function c({size:e,color:t,variant:n,inverted:i,style:a,...c}){let l=s({color:t,inverted:i});return(0,r.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 163 163",style:{width:(0,o.h)(e),height:(0,o.h)(e),...a},...c,children:[(0,r.jsx)("path",{fill:l.background,d:"M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"}),(0,r.jsx)("path",{fill:l.color,d:"M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.145 6.145 0 00-1.616 1.786 6.21 6.21 0 00-.694 4.693 6.21 6.21 0 001.028 2.186 6.151 6.151 0 006.457 2.319 6.154 6.154 0 002.177-1.035 50.083 50.083 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.165 49.165 0 004.071-19.69 49.167 49.167 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.112 50.112 0 00-7.952-7.397 6.15 6.15 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"}),(0,r.jsx)("path",{fill:l.color,fillRule:"evenodd",d:"M56.236 79.391a9.342 9.342 0 01.632-3.608 9.262 9.262 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.145 9.145 0 012.995 2.063 9.262 9.262 0 011.967 3.077 9.339 9.339 0 01-2.125 10.003 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.3 9.3 0 01-2.755-6.395z",clipRule:"evenodd"})]})}var l=n(40489);function u({size:e,color:t,variant:n,inverted:i,style:a,className:c,...u}){let d=s({color:t,inverted:i});return(0,r.jsx)("svg",{...u,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 623 163",style:{height:(0,o.h)(e),...a},className:(0,l.Z)("m_2075ec07",{m_36ceca49:"ui.mantine.dev"===n},c),children:(0,r.jsxs)("g",{fill:"none",fillRule:"evenodd",children:[(0,r.jsx)("path",{style:{fill:"ui.mantine.dev"===n?"var(--mantine-logo-fill)":void 0},fill:d.background,fillRule:"nonzero",d:"M162.162 81.5c0-45.011-36.301-81.5-81.08-81.5C36.301 0 0 36.489 0 81.5 0 126.51 36.301 163 81.081 163s81.081-36.49 81.081-81.5z"}),(0,r.jsxs)("g",{fill:d.color,style:{fill:"ui.mantine.dev"===n?"var(--mantine-logo-color)":void 0},children:[(0,r.jsx)("path",{fillRule:"nonzero",d:"M65.983 43.049a6.234 6.234 0 00-.336 6.884 6.14 6.14 0 001.618 1.786c9.444 7.036 14.866 17.794 14.866 29.52 0 11.726-5.422 22.484-14.866 29.52a6.142 6.142 0 00-1.616 1.786 6.211 6.211 0 00-.694 4.693c.197.79.546 1.533 1.028 2.186a6.154 6.154 0 008.634 1.284 50.112 50.112 0 007.947-7.39h17.493c3.406 0 6.174-2.772 6.174-6.194s-2.762-6.194-6.174-6.194h-9.655a49.166 49.166 0 004.071-19.69 49.166 49.166 0 00-4.07-19.692h9.66c3.406 0 6.173-2.771 6.173-6.194 0-3.422-2.762-6.193-6.173-6.193H82.574a50.11 50.11 0 00-7.952-7.397 6.149 6.149 0 00-4.578-1.153 6.189 6.189 0 00-4.055 2.438h-.006z"}),(0,r.jsx)("path",{d:"M56.236 79.391a9.342 9.342 0 01.632-3.608 9.261 9.261 0 011.967-3.077 9.143 9.143 0 012.994-2.063 9.06 9.06 0 017.103 0 9.144 9.144 0 012.995 2.063 9.261 9.261 0 011.967 3.077 9.34 9.34 0 01.63 3.608 9.299 9.299 0 01-2.755 6.395 9.094 9.094 0 01-6.388 2.63 9.094 9.094 0 01-6.39-2.63 9.299 9.299 0 01-2.755-6.395z"})]}),(0,r.jsx)("path",{fill:"currentColor",fillRule:"nonzero",d:"M291.736 126.644c1.984 0 3.823-.434 5.518-1.302 1.695-.868 2.542-2.129 2.542-3.782v-77.5c0-2.976-.827-5.063-2.48-6.262-1.653-1.199-3.513-1.798-5.58-1.798-1.901 0-3.555.207-4.96.62-1.405.413-2.666 1.24-3.782 2.48s-2.418 3.059-3.906 5.456l-15.252 27.776-15.128-27.776c-1.323-2.397-2.583-4.216-3.782-5.456-1.199-1.24-2.48-2.067-3.844-2.48-1.364-.413-3.038-.62-5.022-.62-1.984 0-3.823.6-5.518 1.798-1.695 1.199-2.542 3.286-2.542 6.262v77.5c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302 2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V67.248l14.26 26.784c.744 1.24 1.591 2.087 2.542 2.542.95.455 1.88.682 2.79.682.992 0 1.984-.248 2.976-.744s1.86-1.323 2.604-2.48l14.384-25.792v53.32c0 1.653.847 2.914 2.542 3.782 1.695.868 3.534 1.302 5.518 1.302zm34.375 1.116c4.298 0 7.956-.992 10.974-2.976 3.017-1.984 5.642-4.257 7.874-6.82v3.596c0 1.405.682 2.604 2.046 3.596 1.364.992 3.08 1.488 5.146 1.488 2.232 0 4.092-.496 5.58-1.488 1.488-.992 2.232-2.19 2.232-3.596V91.18c0-4.216-.889-8.143-2.666-11.78-1.778-3.637-4.609-6.613-8.494-8.928-3.886-2.315-9.052-3.472-15.5-3.472-2.894 0-5.87.372-8.928 1.116-3.059.744-5.642 1.798-7.75 3.162-2.108 1.364-3.162 2.914-3.162 4.65 0 1.819.475 3.596 1.426 5.332.95 1.736 2.294 2.604 4.03 2.604 1.074 0 2.066-.33 2.976-.992.91-.661 2.211-1.302 3.906-1.922 1.694-.62 4.112-.93 7.254-.93 2.81 0 4.98.579 6.51 1.736 1.53 1.157 2.645 2.604 3.348 4.34a14.092 14.092 0 011.054 5.332v1.612h-5.084c-5.704 0-10.726.537-15.066 1.612-4.34 1.075-7.73 2.935-10.168 5.58-2.439 2.645-3.658 6.324-3.658 11.036 0 5.621 1.591 9.775 4.774 12.462 3.182 2.687 6.964 4.03 11.346 4.03zm6.448-11.904c-1.819 0-3.369-.537-4.65-1.612-1.282-1.075-1.922-2.77-1.922-5.084 0-2.315.764-4.03 2.294-5.146 1.53-1.116 3.534-1.84 6.014-2.17 2.48-.33 5.084-.496 7.812-.496h1.86v2.604c0 1.984-.6 3.885-1.798 5.704-1.199 1.819-2.666 3.307-4.402 4.464-1.736 1.157-3.472 1.736-5.208 1.736zm84.169 10.788c2.067 0 3.927-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.971-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114C410.9 68.137 407.345 67 403.46 67c-4.133 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.183-1.364 4.836-1.364 1.984 0 3.803.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.432 0c2.315 0 4.03-.703 5.146-2.108 1.116-1.405 1.674-2.976 1.674-4.712 0-1.653-.558-3.183-1.674-4.588-1.116-1.405-2.831-2.108-5.146-2.108h-4.836c-2.563 0-4.36-.496-5.394-1.488-1.033-.992-1.55-2.687-1.55-5.084V79.4h14.632c1.323 0 2.335-.6 3.038-1.798.703-1.199 1.054-2.542 1.054-4.03 0-1.488-.351-2.831-1.054-4.03-.703-1.199-1.715-1.798-3.038-1.798H452.38V46.416c0-1.488-.847-2.687-2.542-3.596-1.695-.91-3.534-1.364-5.518-1.364-1.819 0-3.596.455-5.332 1.364-1.736.91-2.604 2.108-2.604 3.596v60.14c0 6.944 1.963 12.028 5.89 15.252 3.927 3.224 9.61 4.836 17.05 4.836h4.836zM487.232 54.6c2.397 0 4.443-.806 6.138-2.418 1.695-1.612 2.542-3.41 2.542-5.394 0-2.15-.847-3.989-2.542-5.518-1.695-1.53-3.74-2.294-6.138-2.294-2.397 0-4.464.765-6.2 2.294-1.736 1.53-2.604 3.369-2.604 5.518 0 1.984.868 3.782 2.604 5.394 1.736 1.612 3.803 2.418 6.2 2.418zm0 72.044c2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V72.704c0-1.488-.785-2.687-2.356-3.596-1.57-.91-3.472-1.364-5.704-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612zm65.247 0c2.066 0 3.926-.434 5.58-1.302 1.653-.868 2.48-2.129 2.48-3.782V92.172c0-4.63-.972-8.845-2.914-12.648-1.943-3.803-4.526-6.84-7.75-9.114-3.224-2.273-6.779-3.41-10.664-3.41-4.134 0-7.626.971-10.478 2.914-2.852 1.943-4.898 4.113-6.138 6.51v-3.72c0-1.488-.682-2.687-2.046-3.596-1.364-.91-3.038-1.364-5.022-1.364-2.315 0-4.216.455-5.704 1.364-1.488.91-2.232 2.108-2.232 3.596v48.856c0 1.24.744 2.397 2.232 3.472 1.488 1.075 3.39 1.612 5.704 1.612 2.232 0 4.133-.537 5.704-1.612 1.57-1.075 2.356-2.232 2.356-3.472V92.172c0-2.315.496-4.299 1.488-5.952.992-1.653 2.273-2.935 3.844-3.844 1.57-.91 3.182-1.364 4.836-1.364 1.984 0 3.802.558 5.456 1.674 1.653 1.116 2.955 2.5 3.906 4.154a10.52 10.52 0 011.426 5.332v29.388c0 1.653.868 2.914 2.604 3.782 1.736.868 3.513 1.302 5.332 1.302zm47.68 1.116c4.464 0 8.328-.558 11.594-1.674 3.265-1.116 5.786-2.48 7.564-4.092 1.777-1.612 2.666-3.12 2.666-4.526 0-.827-.248-1.798-.744-2.914a8.641 8.641 0 00-2.108-2.914c-.91-.827-1.984-1.24-3.224-1.24-1.158 0-2.398.372-3.72 1.116-1.323.744-2.894 1.53-4.712 2.356-1.819.827-4.092 1.24-6.82 1.24-4.299 0-7.792-1.095-10.478-3.286-2.687-2.19-4.03-5.063-4.03-8.618v-1.86h25.172c1.901 0 3.74-.186 5.518-.558 1.777-.372 3.244-1.323 4.402-2.852 1.157-1.53 1.736-4.071 1.736-7.626 0-4.63-1.199-8.68-3.596-12.152-2.398-3.472-5.518-6.2-9.362-8.184-3.844-1.984-8.08-2.976-12.71-2.976-5.043 0-9.61 1.137-13.702 3.41-4.092 2.273-7.358 5.29-9.796 9.052-2.439 3.761-3.658 7.874-3.658 12.338v10.54c0 5.043 1.281 9.486 3.844 13.33 2.562 3.844 6.096 6.82 10.602 8.928 4.505 2.108 9.692 3.162 15.562 3.162zm4.092-35.836h-18.104v-3.472c0-1.984.516-3.7 1.55-5.146 1.033-1.447 2.376-2.563 4.03-3.348 1.653-.785 3.43-1.178 5.332-1.178 1.984 0 3.802.413 5.456 1.24 1.653.827 2.976 1.984 3.968 3.472s1.488 3.183 1.488 5.084c0 1.323-.269 2.211-.806 2.666-.538.455-1.509.682-2.914.682z"})]})})}function d({type:e,...t}){return"mark"===e?(0,r.jsx)(c,{...t}):(0,r.jsx)(u,{...t})}},10962:function(e,t,n){"use strict";n.d(t,{$:function(){return r}});let r={docsLink:"https://mantine.dev",uiLink:"https://ui.mantine.dev/",discordLink:"https://discord.gg/wbH82zuWMN",twitterLink:"https://twitter.com/mantinedev",npmLink:"https://www.npmjs.com/org/mantine",discordColor:"#5865f2",twitterColor:"#1C8CD8",gitHubLinks:{mantine:"https://github.com/mantinedev/mantine",mantineUi:"https://github.com/mantinedev/ui.mantine.dev",discussions:"https://github.com/mantinedev/mantine/discussions",organization:"https://github.com/mantinedev",releases:"https://github.com/mantinedev/mantine/releases"}}},80508:function(e,t,n){"use strict";n.d(t,{P:function(){return g}});var r=n(52322),o=n(82027),i=n(38483),a=n(46690),s=n(28559),c=n(87385),l=n(893),u=n(54813),d=n(38405),p=n(90336),f=n(70980),m=n(98483);let h={copyLabel:"Copy code",copiedLabel:"Copied",language:"tsx",withCopyButton:!0},g=(0,o.d)((e,t)=>{let n=(0,i.w)("CodeHighlight",h,e),{classNames:o,className:g,style:v,styles:b,unstyled:y,vars:x,children:k,code:w,copiedLabel:j,copyLabel:C,language:S,withCopyButton:I,highlightOnClient:M,...T}=n,E=(0,a.y)({name:"CodeHighlight",props:n,classes:m.Z,className:g,style:v,classNames:o,styles:b,unstyled:y}),P=(0,f.Y)()(w.trim(),S||"tsx");return(0,r.jsxs)(s.x,{...E("root"),ref:t,...T,dir:"ltr",children:[I&&(0,r.jsx)(c.q,{value:w.trim(),children:({copied:e,copy:t})=>(0,r.jsx)(l.u,{label:e?j:C,fz:"sm",position:"left",children:(0,r.jsx)(u.A,{onClick:t,variant:"none",...E("copy"),children:(0,r.jsx)(p.T,{copied:e})})})}),(0,r.jsx)(d.x,{type:"hover",dir:"ltr",offsetScrollbars:!1,children:P.highlighted?(0,r.jsx)("div",{"data-mantine-code":S||"tsx",dangerouslySetInnerHTML:{__html:P.code}}):(0,r.jsx)("pre",{...E("pre"),children:(0,r.jsx)("code",{"data-mantine-code":S||"tsx",...E("code"),children:w.trim()})})})]})});g.displayName="@mantine/core/CodeHighlight",g.classes=m.Z},44964:function(e,t,n){"use strict";n.d(t,{Q:function(){return C}});var r=n(52322),o=n(2784),i=n(58898),a=n(11200),s=n(82027),c=n(38483),l=n(46690),u=n(63409),d=n(28559),p=n(38405),f=n(893),m=n(54813),h=n(87385),g=n(9341),v=n(90336);function b({expanded:e,style:t,...n}){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,i.h)(18),height:(0,i.h)(18),...t},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...n,children:e?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("path",{d:"M12 13v-8l-3 3m6 0l-3 -3"}),(0,r.jsx)("path",{d:"M9 17l1 0"}),(0,r.jsx)("path",{d:"M14 17l1 0"}),(0,r.jsx)("path",{d:"M19 17l1 0"}),(0,r.jsx)("path",{d:"M4 17l1 0"})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("path",{d:"M12 11v8l3 -3m-6 0l3 3"}),(0,r.jsx)("path",{d:"M9 7l1 0"}),(0,r.jsx)("path",{d:"M14 7l1 0"}),(0,r.jsx)("path",{d:"M19 7l1 0"}),(0,r.jsx)("path",{d:"M4 7l1 0"})]})})}function y({fileIcon:e,fileName:t,getFileIcon:n,className:o,style:i}){return e?(0,r.jsx)("span",{className:o,style:i,children:e}):n&&t?(0,r.jsx)("span",{className:o,style:i,children:n(t)}):null}var x=n(70980),k=n(98483);let w={withHeader:!0,copyLabel:"Copy code",copiedLabel:"Copied",maxCollapsedHeight:(0,i.h)("8rem"),expandCodeLabel:"Expand code",collapseCodeLabel:"Collapse code"},j=(0,a.Z)((e,{maxCollapsedHeight:t})=>({root:{"--ch-max-collapsed-height":(0,i.h)(t)}})),C=(0,s.d)((e,t)=>{let n=(0,c.w)("CodeHighlightTabs",w,e),{classNames:i,className:a,style:s,styles:C,unstyled:S,vars:I,children:M,code:T,defaultActiveTab:E,activeTab:P,onTabChange:R,withHeader:N,copiedLabel:_,copyLabel:F,getFileIcon:B,maxCollapsedHeight:A,expanded:L,defaultExpanded:D,onExpandedChange:$,expandCodeLabel:z,collapseCodeLabel:H,withExpandButton:O,mod:Z,...V}=n,G=(0,l.y)({name:"CodeHighlightTabs",props:n,classes:k.Z,className:a,style:s,classNames:i,styles:C,unstyled:S,vars:I,varsResolver:j}),[W,Y]=(0,g.C)({defaultValue:E,value:P,finalValue:0,onChange:R}),[q,K]=(0,g.C)({defaultValue:D,value:L,finalValue:!0,onChange:$}),U=Array.isArray(T)?T:[T],X=U[W],J=(0,x.Y)()(X.code.trim(),X.language||"tsx"),Q=U.map((e,t)=>(0,o.createElement)(u.k,{...G("file"),key:e.fileName,mod:{active:t===W},onClick:()=>Y(t)},(0,r.jsx)(y,{fileIcon:e.icon,getFileIcon:B,fileName:e.fileName,...G("fileIcon")},"file-icon"),(0,r.jsx)("span",{children:e.fileName},"file-name")));return(0,r.jsxs)(d.x,{...G("root"),mod:[{collapsed:!q},Z],ref:t,...V,dir:"ltr",children:[N&&(0,r.jsxs)("div",{...G("header"),children:[(0,r.jsx)(p.x,{type:"never",dir:"ltr",offsetScrollbars:!1,children:(0,r.jsx)("div",{...G("files"),children:Q})}),(0,r.jsxs)("div",{...G("controls"),children:[O&&(0,r.jsx)(f.u,{label:q?H:z,fz:"sm",position:"left",children:(0,r.jsx)(m.A,{onClick:()=>K(!q),variant:"none","aria-label":q?H:z,...G("control"),children:(0,r.jsx)(b,{expanded:q})})}),(0,r.jsx)(h.q,{value:X.code.trim(),children:({copied:e,copy:t})=>(0,r.jsx)(f.u,{label:e?_:F,fz:"sm",position:"left",children:(0,r.jsx)(m.A,{onClick:t,variant:"none",...G("control"),"aria-label":e?_:F,children:(0,r.jsx)(v.T,{copied:e})})})})]})]}),(0,r.jsx)(p.x,{type:"auto",dir:"ltr",offsetScrollbars:!1,children:(0,r.jsx)(d.x,{...G("codeWrapper"),mod:{expanded:q},children:J.highlighted?(0,r.jsx)("div",{"data-mantine-code":X.language||"tsx",dangerouslySetInnerHTML:{__html:J.code}}):(0,r.jsx)("pre",{...G("pre"),children:(0,r.jsx)("code",{"data-mantine-code":X.language||"tsx",...G("code"),children:J.code})})})}),(0,r.jsx)(u.k,{...G("showCodeButton"),mod:{hidden:q},onClick:()=>K(!0),children:z})]})});C.displayName="@mantine/core/CodeHighlightTabs",C.classes=k.Z},90336:function(e,t,n){"use strict";n.d(t,{T:function(){return i}});var r=n(52322),o=n(58898);function i({copied:e,style:t,...n}){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:(0,o.h)(18),height:(0,o.h)(18),...t},viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...n,children:e?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("path",{d:"M5 12l5 5l10 -10"})]}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,r.jsx)("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"}),(0,r.jsx)("path",{d:"M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"})]})})}i.displayName="@mantine/code-highlight/CopyIcon"},98483:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={code:"m_5d0899e8",pre:"m_348cdb48",header:"m_4543bbc8",controls:"m_23f2bd31",copy:"m_5d089b70",control:"m_6c83b382",file:"m_5d09e177",files:"m_44324ddc",codeWrapper:"m_e42c0d8b",showCodeButton:"m_d9142897",root:"m_5d0f6cdd",fileIcon:"m_19e0fe90"}},70980:function(e,t,n){"use strict";n.d(t,{U:function(){return u},Y:function(){return d}});var r=n(52322),o=n(2784),i=n(68893);let a={colors:{"activityBar.activeBorder":"#fd8c73","activityBar.background":"#ffffff","activityBar.border":"#d0d7de","activityBar.foreground":"#1f2328","activityBar.inactiveForeground":"#656d76","activityBarBadge.background":"#0969da","activityBarBadge.foreground":"#ffffff","badge.background":"#0969da","badge.foreground":"#ffffff","breadcrumb.activeSelectionForeground":"#656d76","breadcrumb.focusForeground":"#1f2328","breadcrumb.foreground":"#656d76","breadcrumbPicker.background":"#ffffff","button.background":"#1f883d","button.foreground":"#ffffff","button.hoverBackground":"#1a7f37","button.secondaryBackground":"#ebecf0","button.secondaryForeground":"#24292f","button.secondaryHoverBackground":"#f3f4f6","checkbox.background":"#f6f8fa","checkbox.border":"#d0d7de","debugConsole.errorForeground":"#cf222e","debugConsole.infoForeground":"#57606a","debugConsole.sourceForeground":"#9a6700","debugConsole.warningForeground":"#7d4e00","debugConsoleInputIcon.foreground":"#6639ba","debugIcon.breakpointForeground":"#cf222e","debugTokenExpression.boolean":"#116329","debugTokenExpression.error":"#a40e26","debugTokenExpression.name":"#0550ae","debugTokenExpression.number":"#116329","debugTokenExpression.string":"#0a3069","debugTokenExpression.value":"#0a3069","debugToolBar.background":"#ffffff",descriptionForeground:"#656d76","diffEditor.insertedLineBackground":"#aceebb4d","diffEditor.insertedTextBackground":"#6fdd8b80","diffEditor.removedLineBackground":"#ffcecb4d","diffEditor.removedTextBackground":"#ff818266","dropdown.background":"#ffffff","dropdown.border":"#d0d7de","dropdown.foreground":"#1f2328","dropdown.listBackground":"#ffffff","editor.background":"#ffffff","editor.findMatchBackground":"#bf8700","editor.findMatchHighlightBackground":"#fae17d80","editor.focusedStackFrameHighlightBackground":"#4ac26b66","editor.foldBackground":"#6e77811a","editor.foreground":"#1f2328","editor.lineHighlightBackground":"#eaeef280","editor.linkedEditingBackground":"#0969da12","editor.selectionHighlightBackground":"#4ac26b40","editor.stackFrameHighlightBackground":"#d4a72c66","editor.wordHighlightBackground":"#eaeef280","editor.wordHighlightBorder":"#afb8c199","editor.wordHighlightStrongBackground":"#afb8c14d","editor.wordHighlightStrongBorder":"#afb8c199","editorBracketHighlight.foreground1":"#0969da","editorBracketHighlight.foreground2":"#1a7f37","editorBracketHighlight.foreground3":"#9a6700","editorBracketHighlight.foreground4":"#cf222e","editorBracketHighlight.foreground5":"#bf3989","editorBracketHighlight.foreground6":"#8250df","editorBracketHighlight.unexpectedBracket.foreground":"#656d76","editorBracketMatch.background":"#4ac26b40","editorBracketMatch.border":"#4ac26b99","editorCursor.foreground":"#0969da","editorGroup.border":"#d0d7de","editorGroupHeader.tabsBackground":"#f6f8fa","editorGroupHeader.tabsBorder":"#d0d7de","editorGutter.addedBackground":"#4ac26b66","editorGutter.deletedBackground":"#ff818266","editorGutter.modifiedBackground":"#d4a72c66","editorIndentGuide.activeBackground":"#1f23283d","editorIndentGuide.background":"#1f23281f","editorInlayHint.background":"#afb8c133","editorInlayHint.foreground":"#656d76","editorInlayHint.paramBackground":"#afb8c133","editorInlayHint.paramForeground":"#656d76","editorInlayHint.typeBackground":"#afb8c133","editorInlayHint.typeForeground":"#656d76","editorLineNumber.activeForeground":"#1f2328","editorLineNumber.foreground":"#8c959f","editorOverviewRuler.border":"#ffffff","editorWhitespace.foreground":"#afb8c1","editorWidget.background":"#ffffff",errorForeground:"#cf222e",focusBorder:"#0969da",foreground:"#1f2328","gitDecoration.addedResourceForeground":"#1a7f37","gitDecoration.conflictingResourceForeground":"#bc4c00","gitDecoration.deletedResourceForeground":"#cf222e","gitDecoration.ignoredResourceForeground":"#6e7781","gitDecoration.modifiedResourceForeground":"#9a6700","gitDecoration.submoduleResourceForeground":"#656d76","gitDecoration.untrackedResourceForeground":"#1a7f37","icon.foreground":"#656d76","input.background":"#ffffff","input.border":"#d0d7de","input.foreground":"#1f2328","input.placeholderForeground":"#6e7781","keybindingLabel.foreground":"#1f2328","list.activeSelectionBackground":"#afb8c133","list.activeSelectionForeground":"#1f2328","list.focusBackground":"#ddf4ff","list.focusForeground":"#1f2328","list.highlightForeground":"#0969da","list.hoverBackground":"#eaeef280","list.hoverForeground":"#1f2328","list.inactiveFocusBackground":"#ddf4ff","list.inactiveSelectionBackground":"#afb8c133","list.inactiveSelectionForeground":"#1f2328","minimapSlider.activeBackground":"#8c959f47","minimapSlider.background":"#8c959f33","minimapSlider.hoverBackground":"#8c959f3d","notificationCenterHeader.background":"#f6f8fa","notificationCenterHeader.foreground":"#656d76","notifications.background":"#ffffff","notifications.border":"#d0d7de","notifications.foreground":"#1f2328","notificationsErrorIcon.foreground":"#cf222e","notificationsInfoIcon.foreground":"#0969da","notificationsWarningIcon.foreground":"#9a6700","panel.background":"#f6f8fa","panel.border":"#d0d7de","panelInput.border":"#d0d7de","panelTitle.activeBorder":"#fd8c73","panelTitle.activeForeground":"#1f2328","panelTitle.inactiveForeground":"#656d76","pickerGroup.border":"#d0d7de","pickerGroup.foreground":"#656d76","progressBar.background":"#0969da","quickInput.background":"#ffffff","quickInput.foreground":"#1f2328","scrollbar.shadow":"#6e778133","scrollbarSlider.activeBackground":"#8c959f47","scrollbarSlider.background":"#8c959f33","scrollbarSlider.hoverBackground":"#8c959f3d","settings.headerForeground":"#1f2328","settings.modifiedItemIndicator":"#d4a72c66","sideBar.background":"#f6f8fa","sideBar.border":"#d0d7de","sideBar.foreground":"#1f2328","sideBarSectionHeader.background":"#f6f8fa","sideBarSectionHeader.border":"#d0d7de","sideBarSectionHeader.foreground":"#1f2328","sideBarTitle.foreground":"#1f2328","statusBar.background":"#ffffff","statusBar.border":"#d0d7de","statusBar.debuggingBackground":"#cf222e","statusBar.debuggingForeground":"#ffffff","statusBar.focusBorder":"#0969da80","statusBar.foreground":"#656d76","statusBar.noFolderBackground":"#ffffff","statusBarItem.activeBackground":"#1f23281f","statusBarItem.focusBorder":"#0969da","statusBarItem.hoverBackground":"#1f232814","statusBarItem.prominentBackground":"#afb8c133","statusBarItem.remoteBackground":"#eaeef2","statusBarItem.remoteForeground":"#1f2328","symbolIcon.arrayForeground":"#953800","symbolIcon.booleanForeground":"#0550ae","symbolIcon.classForeground":"#953800","symbolIcon.colorForeground":"#0a3069","symbolIcon.constantForeground":"#116329","symbolIcon.constructorForeground":"#3e1f79","symbolIcon.enumeratorForeground":"#953800","symbolIcon.enumeratorMemberForeground":"#0550ae","symbolIcon.eventForeground":"#57606a","symbolIcon.fieldForeground":"#953800","symbolIcon.fileForeground":"#7d4e00","symbolIcon.folderForeground":"#7d4e00","symbolIcon.functionForeground":"#6639ba","symbolIcon.interfaceForeground":"#953800","symbolIcon.keyForeground":"#0550ae","symbolIcon.keywordForeground":"#a40e26","symbolIcon.methodForeground":"#6639ba","symbolIcon.moduleForeground":"#a40e26","symbolIcon.namespaceForeground":"#a40e26","symbolIcon.nullForeground":"#0550ae","symbolIcon.numberForeground":"#116329","symbolIcon.objectForeground":"#953800","symbolIcon.operatorForeground":"#0a3069","symbolIcon.packageForeground":"#953800","symbolIcon.propertyForeground":"#953800","symbolIcon.referenceForeground":"#0550ae","symbolIcon.snippetForeground":"#0550ae","symbolIcon.stringForeground":"#0a3069","symbolIcon.structForeground":"#953800","symbolIcon.textForeground":"#0a3069","symbolIcon.typeParameterForeground":"#0a3069","symbolIcon.unitForeground":"#0550ae","symbolIcon.variableForeground":"#953800","tab.activeBackground":"#ffffff","tab.activeBorder":"#ffffff","tab.activeBorderTop":"#fd8c73","tab.activeForeground":"#1f2328","tab.border":"#d0d7de","tab.hoverBackground":"#ffffff","tab.inactiveBackground":"#f6f8fa","tab.inactiveForeground":"#656d76","tab.unfocusedActiveBorder":"#ffffff","tab.unfocusedActiveBorderTop":"#d0d7de","tab.unfocusedHoverBackground":"#eaeef280","terminal.ansiBlack":"#24292f","terminal.ansiBlue":"#0969da","terminal.ansiBrightBlack":"#57606a","terminal.ansiBrightBlue":"#218bff","terminal.ansiBrightCyan":"#3192aa","terminal.ansiBrightGreen":"#1a7f37","terminal.ansiBrightMagenta":"#a475f9","terminal.ansiBrightRed":"#a40e26","terminal.ansiBrightWhite":"#8c959f","terminal.ansiBrightYellow":"#633c01","terminal.ansiCyan":"#1b7c83","terminal.ansiGreen":"#116329","terminal.ansiMagenta":"#8250df","terminal.ansiRed":"#cf222e","terminal.ansiWhite":"#6e7781","terminal.ansiYellow":"#4d2d00","terminal.foreground":"#1f2328","textBlockQuote.background":"#f6f8fa","textBlockQuote.border":"#d0d7de","textCodeBlock.background":"#afb8c133","textLink.activeForeground":"#0969da","textLink.foreground":"#0969da","textPreformat.foreground":"#656d76","textSeparator.foreground":"#d8dee4","titleBar.activeBackground":"#ffffff","titleBar.activeForeground":"#656d76","titleBar.border":"#d0d7de","titleBar.inactiveBackground":"#f6f8fa","titleBar.inactiveForeground":"#656d76","tree.indentGuidesStroke":"#d8dee4","welcomePage.buttonBackground":"#f6f8fa","welcomePage.buttonHoverBackground":"#f3f4f6"},displayName:"GitHub Light Default",semanticHighlighting:!0,tokenColors:[{scope:["comment","punctuation.definition.comment","string.comment"],settings:{foreground:"#6e7781"}},{scope:["constant.other.placeholder","constant.character"],settings:{foreground:"#cf222e"}},{scope:["constant","entity.name.constant","variable.other.constant","variable.other.enummember","variable.language","entity"],settings:{foreground:"#0550ae"}},{scope:["entity.name","meta.export.default","meta.definition.variable"],settings:{foreground:"#953800"}},{scope:["variable.parameter.function","meta.jsx.children","meta.block","meta.tag.attributes","entity.name.constant","meta.object.member","meta.embedded.expression"],settings:{foreground:"#1f2328"}},{scope:"entity.name.function",settings:{foreground:"#8250df"}},{scope:["entity.name.tag","support.class.component"],settings:{foreground:"#116329"}},{scope:"keyword",settings:{foreground:"#cf222e"}},{scope:["storage","storage.type"],settings:{foreground:"#cf222e"}},{scope:["storage.modifier.package","storage.modifier.import","storage.type.java"],settings:{foreground:"#1f2328"}},{scope:["string","string punctuation.section.embedded source"],settings:{foreground:"#0a3069"}},{scope:"support",settings:{foreground:"#0550ae"}},{scope:"meta.property-name",settings:{foreground:"#0550ae"}},{scope:"variable",settings:{foreground:"#953800"}},{scope:"variable.other",settings:{foreground:"#1f2328"}},{scope:"invalid.broken",settings:{fontStyle:"italic",foreground:"#82071e"}},{scope:"invalid.deprecated",settings:{fontStyle:"italic",foreground:"#82071e"}},{scope:"invalid.illegal",settings:{fontStyle:"italic",foreground:"#82071e"}},{scope:"invalid.unimplemented",settings:{fontStyle:"italic",foreground:"#82071e"}},{scope:"carriage-return",settings:{background:"#cf222e",content:"^M",fontStyle:"italic underline",foreground:"#f6f8fa"}},{scope:"message.error",settings:{foreground:"#82071e"}},{scope:"string variable",settings:{foreground:"#0550ae"}},{scope:["source.regexp","string.regexp"],settings:{foreground:"#0a3069"}},{scope:["string.regexp.character-class","string.regexp constant.character.escape","string.regexp source.ruby.embedded","string.regexp string.regexp.arbitrary-repitition"],settings:{foreground:"#0a3069"}},{scope:"string.regexp constant.character.escape",settings:{fontStyle:"bold",foreground:"#116329"}},{scope:"support.constant",settings:{foreground:"#0550ae"}},{scope:"support.variable",settings:{foreground:"#0550ae"}},{scope:"support.type.property-name.json",settings:{foreground:"#116329"}},{scope:"meta.module-reference",settings:{foreground:"#0550ae"}},{scope:"punctuation.definition.list.begin.markdown",settings:{foreground:"#953800"}},{scope:["markup.heading","markup.heading entity.name"],settings:{fontStyle:"bold",foreground:"#0550ae"}},{scope:"markup.quote",settings:{foreground:"#116329"}},{scope:"markup.italic",settings:{fontStyle:"italic",foreground:"#1f2328"}},{scope:"markup.bold",settings:{fontStyle:"bold",foreground:"#1f2328"}},{scope:["markup.underline"],settings:{fontStyle:"underline"}},{scope:["markup.strikethrough"],settings:{fontStyle:"strikethrough"}},{scope:"markup.inline.raw",settings:{foreground:"#0550ae"}},{scope:["markup.deleted","meta.diff.header.from-file","punctuation.definition.deleted"],settings:{background:"#ffebe9",foreground:"#82071e"}},{scope:["punctuation.section.embedded"],settings:{foreground:"#cf222e"}},{scope:["markup.inserted","meta.diff.header.to-file","punctuation.definition.inserted"],settings:{background:"#dafbe1",foreground:"#116329"}},{scope:["markup.changed","punctuation.definition.changed"],settings:{background:"#ffd8b5",foreground:"#953800"}},{scope:["markup.ignored","markup.untracked"],settings:{background:"#0550ae",foreground:"#eaeef2"}},{scope:"meta.diff.range",settings:{fontStyle:"bold",foreground:"#8250df"}},{scope:"meta.diff.header",settings:{foreground:"#0550ae"}},{scope:"meta.separator",settings:{fontStyle:"bold",foreground:"#0550ae"}},{scope:"meta.output",settings:{foreground:"#0550ae"}},{scope:["brackethighlighter.tag","brackethighlighter.curly","brackethighlighter.round","brackethighlighter.square","brackethighlighter.angle","brackethighlighter.quote"],settings:{foreground:"#57606a"}},{scope:"brackethighlighter.unmatched",settings:{foreground:"#82071e"}},{scope:["constant.other.reference.link","string.other.link"],settings:{foreground:"#0a3069"}}],type:"light"},s={colors:{"activityBar.activeBorder":"#f78166","activityBar.background":"#0d1117","activityBar.border":"#30363d","activityBar.foreground":"#e6edf3","activityBar.inactiveForeground":"#7d8590","activityBarBadge.background":"#1f6feb","activityBarBadge.foreground":"#ffffff","badge.background":"#1f6feb","badge.foreground":"#ffffff","breadcrumb.activeSelectionForeground":"#7d8590","breadcrumb.focusForeground":"#e6edf3","breadcrumb.foreground":"#7d8590","breadcrumbPicker.background":"#161b22","button.background":"#238636","button.foreground":"#ffffff","button.hoverBackground":"#2ea043","button.secondaryBackground":"#282e33","button.secondaryForeground":"#c9d1d9","button.secondaryHoverBackground":"#30363d","checkbox.background":"#161b22","checkbox.border":"#30363d","debugConsole.errorForeground":"#ffa198","debugConsole.infoForeground":"#8b949e","debugConsole.sourceForeground":"#e3b341","debugConsole.warningForeground":"#d29922","debugConsoleInputIcon.foreground":"#bc8cff","debugIcon.breakpointForeground":"#f85149","debugTokenExpression.boolean":"#56d364","debugTokenExpression.error":"#ffa198","debugTokenExpression.name":"#79c0ff","debugTokenExpression.number":"#56d364","debugTokenExpression.string":"#a5d6ff","debugTokenExpression.value":"#a5d6ff","debugToolBar.background":"#161b22",descriptionForeground:"#7d8590","diffEditor.insertedLineBackground":"#23863626","diffEditor.insertedTextBackground":"#3fb9504d","diffEditor.removedLineBackground":"#da363326","diffEditor.removedTextBackground":"#ff7b724d","dropdown.background":"#161b22","dropdown.border":"#30363d","dropdown.foreground":"#e6edf3","dropdown.listBackground":"#161b22","editor.background":"#0d1117","editor.findMatchBackground":"#9e6a03","editor.findMatchHighlightBackground":"#f2cc6080","editor.focusedStackFrameHighlightBackground":"#2ea04366","editor.foldBackground":"#6e76811a","editor.foreground":"#e6edf3","editor.lineHighlightBackground":"#6e76811a","editor.linkedEditingBackground":"#2f81f712","editor.selectionHighlightBackground":"#3fb95040","editor.stackFrameHighlightBackground":"#bb800966","editor.wordHighlightBackground":"#6e768180","editor.wordHighlightBorder":"#6e768199","editor.wordHighlightStrongBackground":"#6e76814d","editor.wordHighlightStrongBorder":"#6e768199","editorBracketHighlight.foreground1":"#79c0ff","editorBracketHighlight.foreground2":"#56d364","editorBracketHighlight.foreground3":"#e3b341","editorBracketHighlight.foreground4":"#ffa198","editorBracketHighlight.foreground5":"#ff9bce","editorBracketHighlight.foreground6":"#d2a8ff","editorBracketHighlight.unexpectedBracket.foreground":"#7d8590","editorBracketMatch.background":"#3fb95040","editorBracketMatch.border":"#3fb95099","editorCursor.foreground":"#2f81f7","editorGroup.border":"#30363d","editorGroupHeader.tabsBackground":"#010409","editorGroupHeader.tabsBorder":"#30363d","editorGutter.addedBackground":"#2ea04366","editorGutter.deletedBackground":"#f8514966","editorGutter.modifiedBackground":"#bb800966","editorIndentGuide.activeBackground":"#e6edf33d","editorIndentGuide.background":"#e6edf31f","editorInlayHint.background":"#8b949e33","editorInlayHint.foreground":"#7d8590","editorInlayHint.paramBackground":"#8b949e33","editorInlayHint.paramForeground":"#7d8590","editorInlayHint.typeBackground":"#8b949e33","editorInlayHint.typeForeground":"#7d8590","editorLineNumber.activeForeground":"#e6edf3","editorLineNumber.foreground":"#6e7681","editorOverviewRuler.border":"#010409","editorWhitespace.foreground":"#484f58","editorWidget.background":"#161b22",errorForeground:"#f85149",focusBorder:"#1f6feb",foreground:"#e6edf3","gitDecoration.addedResourceForeground":"#3fb950","gitDecoration.conflictingResourceForeground":"#db6d28","gitDecoration.deletedResourceForeground":"#f85149","gitDecoration.ignoredResourceForeground":"#6e7681","gitDecoration.modifiedResourceForeground":"#d29922","gitDecoration.submoduleResourceForeground":"#7d8590","gitDecoration.untrackedResourceForeground":"#3fb950","icon.foreground":"#7d8590","input.background":"#0d1117","input.border":"#30363d","input.foreground":"#e6edf3","input.placeholderForeground":"#6e7681","keybindingLabel.foreground":"#e6edf3","list.activeSelectionBackground":"#6e768166","list.activeSelectionForeground":"#e6edf3","list.focusBackground":"#388bfd26","list.focusForeground":"#e6edf3","list.highlightForeground":"#2f81f7","list.hoverBackground":"#6e76811a","list.hoverForeground":"#e6edf3","list.inactiveFocusBackground":"#388bfd26","list.inactiveSelectionBackground":"#6e768166","list.inactiveSelectionForeground":"#e6edf3","minimapSlider.activeBackground":"#8b949e47","minimapSlider.background":"#8b949e33","minimapSlider.hoverBackground":"#8b949e3d","notificationCenterHeader.background":"#161b22","notificationCenterHeader.foreground":"#7d8590","notifications.background":"#161b22","notifications.border":"#30363d","notifications.foreground":"#e6edf3","notificationsErrorIcon.foreground":"#f85149","notificationsInfoIcon.foreground":"#2f81f7","notificationsWarningIcon.foreground":"#d29922","panel.background":"#010409","panel.border":"#30363d","panelInput.border":"#30363d","panelTitle.activeBorder":"#f78166","panelTitle.activeForeground":"#e6edf3","panelTitle.inactiveForeground":"#7d8590","peekViewEditor.background":"#6e76811a","peekViewEditor.matchHighlightBackground":"#bb800966","peekViewResult.background":"#0d1117","peekViewResult.matchHighlightBackground":"#bb800966","pickerGroup.border":"#30363d","pickerGroup.foreground":"#7d8590","progressBar.background":"#1f6feb","quickInput.background":"#161b22","quickInput.foreground":"#e6edf3","scrollbar.shadow":"#484f5833","scrollbarSlider.activeBackground":"#8b949e47","scrollbarSlider.background":"#8b949e33","scrollbarSlider.hoverBackground":"#8b949e3d","settings.headerForeground":"#e6edf3","settings.modifiedItemIndicator":"#bb800966","sideBar.background":"#010409","sideBar.border":"#30363d","sideBar.foreground":"#e6edf3","sideBarSectionHeader.background":"#010409","sideBarSectionHeader.border":"#30363d","sideBarSectionHeader.foreground":"#e6edf3","sideBarTitle.foreground":"#e6edf3","statusBar.background":"#0d1117","statusBar.border":"#30363d","statusBar.debuggingBackground":"#da3633","statusBar.debuggingForeground":"#ffffff","statusBar.focusBorder":"#1f6feb80","statusBar.foreground":"#7d8590","statusBar.noFolderBackground":"#0d1117","statusBarItem.activeBackground":"#e6edf31f","statusBarItem.focusBorder":"#1f6feb","statusBarItem.hoverBackground":"#e6edf314","statusBarItem.prominentBackground":"#6e768166","statusBarItem.remoteBackground":"#30363d","statusBarItem.remoteForeground":"#e6edf3","symbolIcon.arrayForeground":"#f0883e","symbolIcon.booleanForeground":"#58a6ff","symbolIcon.classForeground":"#f0883e","symbolIcon.colorForeground":"#79c0ff","symbolIcon.constantForeground":["#aff5b4","#7ee787","#56d364","#3fb950","#2ea043","#238636","#196c2e","#0f5323","#033a16","#04260f"],"symbolIcon.constructorForeground":"#d2a8ff","symbolIcon.enumeratorForeground":"#f0883e","symbolIcon.enumeratorMemberForeground":"#58a6ff","symbolIcon.eventForeground":"#6e7681","symbolIcon.fieldForeground":"#f0883e","symbolIcon.fileForeground":"#d29922","symbolIcon.folderForeground":"#d29922","symbolIcon.functionForeground":"#bc8cff","symbolIcon.interfaceForeground":"#f0883e","symbolIcon.keyForeground":"#58a6ff","symbolIcon.keywordForeground":"#ff7b72","symbolIcon.methodForeground":"#bc8cff","symbolIcon.moduleForeground":"#ff7b72","symbolIcon.namespaceForeground":"#ff7b72","symbolIcon.nullForeground":"#58a6ff","symbolIcon.numberForeground":"#3fb950","symbolIcon.objectForeground":"#f0883e","symbolIcon.operatorForeground":"#79c0ff","symbolIcon.packageForeground":"#f0883e","symbolIcon.propertyForeground":"#f0883e","symbolIcon.referenceForeground":"#58a6ff","symbolIcon.snippetForeground":"#58a6ff","symbolIcon.stringForeground":"#79c0ff","symbolIcon.structForeground":"#f0883e","symbolIcon.textForeground":"#79c0ff","symbolIcon.typeParameterForeground":"#79c0ff","symbolIcon.unitForeground":"#58a6ff","symbolIcon.variableForeground":"#f0883e","tab.activeBackground":"#0d1117","tab.activeBorder":"#0d1117","tab.activeBorderTop":"#f78166","tab.activeForeground":"#e6edf3","tab.border":"#30363d","tab.hoverBackground":"#0d1117","tab.inactiveBackground":"#010409","tab.inactiveForeground":"#7d8590","tab.unfocusedActiveBorder":"#0d1117","tab.unfocusedActiveBorderTop":"#30363d","tab.unfocusedHoverBackground":"#6e76811a","terminal.ansiBlack":"#484f58","terminal.ansiBlue":"#58a6ff","terminal.ansiBrightBlack":"#6e7681","terminal.ansiBrightBlue":"#79c0ff","terminal.ansiBrightCyan":"#56d4dd","terminal.ansiBrightGreen":"#56d364","terminal.ansiBrightMagenta":"#d2a8ff","terminal.ansiBrightRed":"#ffa198","terminal.ansiBrightWhite":"#ffffff","terminal.ansiBrightYellow":"#e3b341","terminal.ansiCyan":"#39c5cf","terminal.ansiGreen":"#3fb950","terminal.ansiMagenta":"#bc8cff","terminal.ansiRed":"#ff7b72","terminal.ansiWhite":"#b1bac4","terminal.ansiYellow":"#d29922","terminal.foreground":"#e6edf3","textBlockQuote.background":"#010409","textBlockQuote.border":"#30363d","textCodeBlock.background":"#6e768166","textLink.activeForeground":"#2f81f7","textLink.foreground":"#2f81f7","textPreformat.foreground":"#7d8590","textSeparator.foreground":"#21262d","titleBar.activeBackground":"#0d1117","titleBar.activeForeground":"#7d8590","titleBar.border":"#30363d","titleBar.inactiveBackground":"#010409","titleBar.inactiveForeground":"#7d8590","tree.indentGuidesStroke":"#21262d","welcomePage.buttonBackground":"#21262d","welcomePage.buttonHoverBackground":"#30363d"},displayName:"GitHub Dark Default",semanticHighlighting:!0,tokenColors:[{scope:["comment","punctuation.definition.comment","string.comment"],settings:{foreground:"#8b949e"}},{scope:["constant.other.placeholder","constant.character"],settings:{foreground:"#ff7b72"}},{scope:["constant","entity.name.constant","variable.other.constant","variable.other.enummember","variable.language","entity"],settings:{foreground:"#79c0ff"}},{scope:["entity.name","meta.export.default","meta.definition.variable"],settings:{foreground:"#ffa657"}},{scope:["variable.parameter.function","meta.jsx.children","meta.block","meta.tag.attributes","entity.name.constant","meta.object.member","meta.embedded.expression"],settings:{foreground:"#e6edf3"}},{scope:"entity.name.function",settings:{foreground:"#d2a8ff"}},{scope:["entity.name.tag","support.class.component"],settings:{foreground:"#7ee787"}},{scope:"keyword",settings:{foreground:"#ff7b72"}},{scope:["storage","storage.type"],settings:{foreground:"#ff7b72"}},{scope:["storage.modifier.package","storage.modifier.import","storage.type.java"],settings:{foreground:"#e6edf3"}},{scope:["string","string punctuation.section.embedded source"],settings:{foreground:"#a5d6ff"}},{scope:"support",settings:{foreground:"#79c0ff"}},{scope:"meta.property-name",settings:{foreground:"#79c0ff"}},{scope:"variable",settings:{foreground:"#ffa657"}},{scope:"variable.other",settings:{foreground:"#e6edf3"}},{scope:"invalid.broken",settings:{fontStyle:"italic",foreground:"#ffa198"}},{scope:"invalid.deprecated",settings:{fontStyle:"italic",foreground:"#ffa198"}},{scope:"invalid.illegal",settings:{fontStyle:"italic",foreground:"#ffa198"}},{scope:"invalid.unimplemented",settings:{fontStyle:"italic",foreground:"#ffa198"}},{scope:"carriage-return",settings:{background:"#ff7b72",content:"^M",fontStyle:"italic underline",foreground:"#f0f6fc"}},{scope:"message.error",settings:{foreground:"#ffa198"}},{scope:"string variable",settings:{foreground:"#79c0ff"}},{scope:["source.regexp","string.regexp"],settings:{foreground:"#a5d6ff"}},{scope:["string.regexp.character-class","string.regexp constant.character.escape","string.regexp source.ruby.embedded","string.regexp string.regexp.arbitrary-repitition"],settings:{foreground:"#a5d6ff"}},{scope:"string.regexp constant.character.escape",settings:{fontStyle:"bold",foreground:"#7ee787"}},{scope:"support.constant",settings:{foreground:"#79c0ff"}},{scope:"support.variable",settings:{foreground:"#79c0ff"}},{scope:"support.type.property-name.json",settings:{foreground:"#7ee787"}},{scope:"meta.module-reference",settings:{foreground:"#79c0ff"}},{scope:"punctuation.definition.list.begin.markdown",settings:{foreground:"#ffa657"}},{scope:["markup.heading","markup.heading entity.name"],settings:{fontStyle:"bold",foreground:"#79c0ff"}},{scope:"markup.quote",settings:{foreground:"#7ee787"}},{scope:"markup.italic",settings:{fontStyle:"italic",foreground:"#e6edf3"}},{scope:"markup.bold",settings:{fontStyle:"bold",foreground:"#e6edf3"}},{scope:["markup.underline"],settings:{fontStyle:"underline"}},{scope:["markup.strikethrough"],settings:{fontStyle:"strikethrough"}},{scope:"markup.inline.raw",settings:{foreground:"#79c0ff"}},{scope:["markup.deleted","meta.diff.header.from-file","punctuation.definition.deleted"],settings:{background:"#490202",foreground:"#ffa198"}},{scope:["punctuation.section.embedded"],settings:{foreground:"#ff7b72"}},{scope:["markup.inserted","meta.diff.header.to-file","punctuation.definition.inserted"],settings:{background:"#04260f",foreground:"#7ee787"}},{scope:["markup.changed","punctuation.definition.changed"],settings:{background:"#5a1e02",foreground:"#ffa657"}},{scope:["markup.ignored","markup.untracked"],settings:{background:"#79c0ff",foreground:"#161b22"}},{scope:"meta.diff.range",settings:{fontStyle:"bold",foreground:"#d2a8ff"}},{scope:"meta.diff.header",settings:{foreground:"#79c0ff"}},{scope:"meta.separator",settings:{fontStyle:"bold",foreground:"#79c0ff"}},{scope:"meta.output",settings:{foreground:"#79c0ff"}},{scope:["brackethighlighter.tag","brackethighlighter.curly","brackethighlighter.round","brackethighlighter.square","brackethighlighter.angle","brackethighlighter.quote"],settings:{foreground:"#8b949e"}},{scope:"brackethighlighter.unmatched",settings:{foreground:"#ffa198"}},{scope:["constant.other.reference.link","string.other.link"],settings:{foreground:"#a5d6ff"}}],type:"dark"};var c=n(98483);let l=(0,o.createContext)(null);function u({children:e,loadShiki:t}){let[n,u]=(0,o.useState)(null),d=(0,i.l)("light");(0,o.useEffect)(()=>{t().then(e=>u(e))},[t]);let p=(0,o.useCallback)((e,t="tsx")=>n?{code:n.codeToHtml(e,{lang:t,theme:"light"===d?a:s}).replaceAll('tabindex="0"',"").replace("",``).replaceAll('class="shiki "',`class="${c.Z.pre}"`).replaceAll('style="background-color:#ffffff;color:#1f2328"',"").replaceAll('style="background-color:#0d1117;color:#e6edf3',""),highlighted:!0}:{code:e,highlighted:!1},[n,d]);return(0,r.jsx)(l.Provider,{value:p,children:e})}function d(){return(0,o.useContext)(l)||(e=>({code:e,highlighted:!1}))}}},function(e){var t=function(t){return e(e.s=t)};e.O(0,[49774,40179],function(){return t(86570),t(69442)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/changelog/7-5-0-e769e91337d16e72.js b/_next/static/chunks/pages/changelog/7-5-0-d5bccd965eaad022.js similarity index 88% rename from _next/static/chunks/pages/changelog/7-5-0-e769e91337d16e72.js rename to _next/static/chunks/pages/changelog/7-5-0-d5bccd965eaad022.js index e0d4e535fdb..ac51a534d05 100644 --- a/_next/static/chunks/pages/changelog/7-5-0-e769e91337d16e72.js +++ b/_next/static/chunks/pages/changelog/7-5-0-d5bccd965eaad022.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[47642],{79618:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/changelog/7-5-0",function(){return n(2962)}])},2962:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return x}});var a=n(52322),r=n(45392),o=n(10103),i=n(72600),l=n(65328),s=n(71812),c=n(94884),d=n(19055),h=n(22611),u=n(25071),p=n(15019);let m=(0,u.A)(p.us.Changelog750);function f(e){let t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{Demo:n}=t;return n||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"donutchart-component",children:"DonutChart component"}),"\n",(0,a.jsxs)(t.p,{children:["New ",(0,a.jsx)(t.a,{href:"/charts/donut-chart",children:"DonutChart"})," component:"]}),"\n",(0,a.jsx)(n,{data:o.j}),"\n",(0,a.jsx)(t.h2,{id:"piechart-component",children:"PieChart component"}),"\n",(0,a.jsxs)(t.p,{children:["New ",(0,a.jsx)(t.a,{href:"/charts/pie-chart",children:"PieChart"})," component:"]}),"\n",(0,a.jsx)(n,{data:i.j}),"\n",(0,a.jsx)(t.h2,{id:"mantinedates-value-formatter",children:"@mantine/dates value formatter"}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.a,{href:"/dates/date-picker-input",children:"DatePickerInput"}),", ",(0,a.jsx)(t.a,{href:"/dates/month-picker-input",children:"MonthPickerInput"})," and\n",(0,a.jsx)(t.a,{href:"/dates/year-picker-input",children:"YearPickerInput"})," now support ",(0,a.jsx)(t.code,{children:"valueFormatter"})," prop."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.code,{children:"valueFormatter"})," is a more powerful alternative to ",(0,a.jsx)(t.code,{children:"valueFormat"})," prop.\nIt allows formatting value label with a custom function.\nThe function is the same for all component types (",(0,a.jsx)(t.code,{children:"default"}),", ",(0,a.jsx)(t.code,{children:"multiple"})," and ",(0,a.jsx)(t.code,{children:"range"}),")\n– you need to perform additional checks inside the function to handle different types."]}),"\n",(0,a.jsxs)(t.p,{children:["Example of using a custom formatter function with ",(0,a.jsx)(t.code,{children:'type="multiple"'}),":"]}),"\n",(0,a.jsx)(n,{data:l.wD}),"\n",(0,a.jsx)(t.h2,{id:"mantinedates-consistent-weeks",children:"@mantine/dates consistent weeks"}),"\n",(0,a.jsxs)(t.p,{children:["You can now force each month to have 6 weeks by setting ",(0,a.jsx)(t.code,{children:"consistentWeeks: true"})," on\n",(0,a.jsx)(t.a,{href:"/dates/getting-started",children:"DatesProvider"}),". This is useful if you want to avoid layout\nshifts when month changes."]}),"\n",(0,a.jsx)(n,{data:s.U}),"\n",(0,a.jsx)(t.h2,{id:"charts-series-label",children:"Charts series label"}),"\n",(0,a.jsxs)(t.p,{children:["It is now possible to change series labels with ",(0,a.jsx)(t.code,{children:"label"})," property\nin ",(0,a.jsx)(t.code,{children:"series"})," object. This feature is supported in ",(0,a.jsx)(t.a,{href:"/charts/area-chart",children:"AreaChart"}),",\n",(0,a.jsx)(t.a,{href:"/charts/bar-chart",children:"BarChart"})," and ",(0,a.jsx)(t.a,{href:"/charts/line-chart",children:"LineChart"})," components."]}),"\n",(0,a.jsx)(n,{data:c.Z}),"\n",(0,a.jsx)(t.h2,{id:"charts-value-formatter",children:"Charts value formatter"}),"\n",(0,a.jsxs)(t.p,{children:["All ",(0,a.jsx)(t.code,{children:"@mantine/charts"})," components now support ",(0,a.jsx)(t.code,{children:"valueFormatter"})," prop, which allows\nformatting value that is displayed on the y axis and inside the tooltip."]}),"\n",(0,a.jsx)(n,{data:d.w}),"\n",(0,a.jsx)(t.h2,{id:"headings-text-wrap",children:"Headings text wrap"}),"\n",(0,a.jsxs)(t.p,{children:["New ",(0,a.jsx)(t.a,{href:"/core/title",children:"Title"})," ",(0,a.jsx)(t.code,{children:"textWrap"})," prop sets ",(0,a.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap",children:"text-wrap"}),"\nCSS property. It controls how text inside an element is wrapped."]}),"\n",(0,a.jsx)(n,{data:h.V}),"\n",(0,a.jsxs)(t.p,{children:["You can also set ",(0,a.jsx)(t.code,{children:"textWrap"})," on ",(0,a.jsx)(t.a,{href:"/theming/theme-object",children:"theme"}),":"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",children:"import { createTheme, MantineProvider, Title } from '@mantine/core';\n\nconst theme = createTheme({\n headings: {\n textWrap: 'wrap',\n },\n});\n\nfunction Demo() {\n return (\n \n Some very long title that should wrap\n \n );\n}\n"})}),"\n",(0,a.jsxs)(t.p,{children:["If set on theme, ",(0,a.jsx)(t.code,{children:"textWrap"})," is also applied to headings in ",(0,a.jsx)(t.a,{href:"/core/typography-styles-provider",children:"TypographyStylesProvider"})]}),"\n",(0,a.jsx)(t.h2,{id:"mod-prop",children:"mod prop"}),"\n",(0,a.jsxs)(t.p,{children:["All components now support ",(0,a.jsx)(t.code,{children:"mod"})," prop, which allows adding data attributes to\nthe root element:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",children:"import { Box } from '@mantine/core';\n\n;\n// ->
\n\n;\n// ->
\n\n;\n// ->
\n\n;\n// ->
\n\n;\n// ->
\n"})}),"\n",(0,a.jsx)(t.h2,{id:"documentation-updates",children:"Documentation updates"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["New ",(0,a.jsx)(t.a,{href:"/guides/vitest/",children:"testing with Vitest guide"})]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/native-select/#with-dividers",children:"NativeSelect"})," with dividers demo"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/popover/#middlewares",children:"Popover"})," ",(0,a.jsx)(t.code,{children:"shift"})," and ",(0,a.jsx)(t.code,{children:"flip"})," middlewares documentation"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/combobox/#popover-props",children:"Combobox"})," props related to ",(0,a.jsx)(t.a,{href:"/core/popover",children:"Popover"})," documentation"]}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"/styles/mantine-styles/#loading-styles-from-cdn",children:"Loading styles from CDN guide"})}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/anchor/#text-props",children:"Anchor"})," now includes additional documentation on how to use ",(0,a.jsx)(t.a,{href:"/core/text",children:"Text"})," props"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/pagination",children:"Pagination"})," now includes props tables for all compound components"]}),"\n",(0,a.jsxs)(t.li,{children:["A more detailed breakdown of ",(0,a.jsx)(t.a,{href:"/about/#browser-support",children:"browser support"})," has been added to the about page"]}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"help-center-updates",children:"Help center updates"}),"\n",(0,a.jsxs)(t.p,{children:["New articles added to the ",(0,a.jsx)(t.a,{href:"https://help.mantine.dev",children:"help center"}),":"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/can-i-use-mantine-with-astro",children:"Can I use Mantine with Astro?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/how-can-i-contribute",children:"How can I contribute to the library?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/dynamic-css-styles",children:"How can I add dynamic CSS styles?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/next-load-fonts",children:"How can I load fonts in Next.js?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/vite-load-fonts",children:"How can I load fonts in Vite?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/floating-action-button",children:"Is there a floating action button component?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/inputs-placeholder-color",children:"How to change inputs placeholder color?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/dates-missing-styles",children:"I do not have styles in my dates components..."})}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/checkbox",children:"Checkbox.Group"}),", ",(0,a.jsx)(t.a,{href:"/core/radio",children:"Radio.Group"})," and ",(0,a.jsx)(t.a,{href:"/core/switch",children:"Switch.Group"})," now support ",(0,a.jsx)(t.code,{children:"readOnly"})," prop"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/action-icon",children:"ActionIcon"})," now has ",(0,a.jsx)(t.code,{children:"loading"})," state animation"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/segmented-control",children:"SegmentedControl"})," now supports ",(0,a.jsx)(t.code,{children:"withItemsBorder"})," prop which allows removing border between items"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/progress",children:"Progress"})," now supports ",(0,a.jsx)(t.code,{children:"transitionDuration"})," prop which controls section width animation duration"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/textarea",children:"Textarea"})," and ",(0,a.jsx)(t.a,{href:"/core/json-input",children:"JsonInput"})," components now support ",(0,a.jsx)(t.code,{children:"resize"})," prop, which allows setting ",(0,a.jsx)(t.code,{children:"resize"})," CSS property on the input"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"@mantine/hooks"})," package now exports ",(0,a.jsx)(t.a,{href:"/hooks/use-local-storage/#read-storage-value",children:"readLocalStorageValue and readSessionStorageValue"})," function to get value from storage outside of React components"]}),"\n"]})]})}function x(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(m,{...e,children:(0,a.jsx)(f,{...e})})}},94884:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var a=n(52322),r=n(24634),o=n(99803);let i={type:"code",component:function(){return(0,a.jsx)(r.T,{h:300,data:o.aT,dataKey:"date",type:"stacked",withLegend:!0,legendProps:{verticalAlign:"bottom"},series:[{name:"Apples",label:"Apples sales",color:"indigo.6"},{name:"Oranges",label:"Oranges sales",color:"blue.6"},{name:"Tomatoes",label:"Tomatoes sales",color:"teal.6"}]})},code:[{code:` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[47642],{79618:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/changelog/7-5-0",function(){return n(2962)}])},2962:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return x}});var a=n(52322),r=n(45392),o=n(10103),i=n(72600),l=n(65328),s=n(71812),c=n(94884),d=n(19055),u=n(22611),h=n(25071),p=n(15019);let m=(0,h.A)(p.us.Changelog750);function f(e){let t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{Demo:n}=t;return n||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.h2,{id:"donutchart-component",children:"DonutChart component"}),"\n",(0,a.jsxs)(t.p,{children:["New ",(0,a.jsx)(t.a,{href:"/charts/donut-chart",children:"DonutChart"})," component:"]}),"\n",(0,a.jsx)(n,{data:o.j}),"\n",(0,a.jsx)(t.h2,{id:"piechart-component",children:"PieChart component"}),"\n",(0,a.jsxs)(t.p,{children:["New ",(0,a.jsx)(t.a,{href:"/charts/pie-chart",children:"PieChart"})," component:"]}),"\n",(0,a.jsx)(n,{data:i.j}),"\n",(0,a.jsx)(t.h2,{id:"mantinedates-value-formatter",children:"@mantine/dates value formatter"}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.a,{href:"/dates/date-picker-input",children:"DatePickerInput"}),", ",(0,a.jsx)(t.a,{href:"/dates/month-picker-input",children:"MonthPickerInput"})," and\n",(0,a.jsx)(t.a,{href:"/dates/year-picker-input",children:"YearPickerInput"})," now support ",(0,a.jsx)(t.code,{children:"valueFormatter"})," prop."]}),"\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.code,{children:"valueFormatter"})," is a more powerful alternative to ",(0,a.jsx)(t.code,{children:"valueFormat"})," prop.\nIt allows formatting value label with a custom function.\nThe function is the same for all component types (",(0,a.jsx)(t.code,{children:"default"}),", ",(0,a.jsx)(t.code,{children:"multiple"})," and ",(0,a.jsx)(t.code,{children:"range"}),")\n– you need to perform additional checks inside the function to handle different types."]}),"\n",(0,a.jsxs)(t.p,{children:["Example of using a custom formatter function with ",(0,a.jsx)(t.code,{children:'type="multiple"'}),":"]}),"\n",(0,a.jsx)(n,{data:l.wD}),"\n",(0,a.jsx)(t.h2,{id:"mantinedates-consistent-weeks",children:"@mantine/dates consistent weeks"}),"\n",(0,a.jsxs)(t.p,{children:["You can now force each month to have 6 weeks by setting ",(0,a.jsx)(t.code,{children:"consistentWeeks: true"})," on\n",(0,a.jsx)(t.a,{href:"/dates/getting-started",children:"DatesProvider"}),". This is useful if you want to avoid layout\nshifts when month changes."]}),"\n",(0,a.jsx)(n,{data:s.U}),"\n",(0,a.jsx)(t.h2,{id:"charts-series-label",children:"Charts series label"}),"\n",(0,a.jsxs)(t.p,{children:["It is now possible to change series labels with ",(0,a.jsx)(t.code,{children:"label"})," property\nin ",(0,a.jsx)(t.code,{children:"series"})," object. This feature is supported in ",(0,a.jsx)(t.a,{href:"/charts/area-chart",children:"AreaChart"}),",\n",(0,a.jsx)(t.a,{href:"/charts/bar-chart",children:"BarChart"})," and ",(0,a.jsx)(t.a,{href:"/charts/line-chart",children:"LineChart"})," components."]}),"\n",(0,a.jsx)(n,{data:c.Z}),"\n",(0,a.jsx)(t.h2,{id:"charts-value-formatter",children:"Charts value formatter"}),"\n",(0,a.jsxs)(t.p,{children:["All ",(0,a.jsx)(t.code,{children:"@mantine/charts"})," components now support ",(0,a.jsx)(t.code,{children:"valueFormatter"})," prop, which allows\nformatting value that is displayed on the y axis and inside the tooltip."]}),"\n",(0,a.jsx)(n,{data:d.w}),"\n",(0,a.jsx)(t.h2,{id:"headings-text-wrap",children:"Headings text wrap"}),"\n",(0,a.jsxs)(t.p,{children:["New ",(0,a.jsx)(t.a,{href:"/core/title",children:"Title"})," ",(0,a.jsx)(t.code,{children:"textWrap"})," prop sets ",(0,a.jsx)(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap",children:"text-wrap"}),"\nCSS property. It controls how text inside an element is wrapped."]}),"\n",(0,a.jsx)(n,{data:u.V}),"\n",(0,a.jsxs)(t.p,{children:["You can also set ",(0,a.jsx)(t.code,{children:"textWrap"})," on ",(0,a.jsx)(t.a,{href:"/theming/theme-object",children:"theme"}),":"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",children:"import { createTheme, MantineProvider, Title } from '@mantine/core';\n\nconst theme = createTheme({\n headings: {\n textWrap: 'wrap',\n },\n});\n\nfunction Demo() {\n return (\n \n Some very long title that should wrap\n \n );\n}\n"})}),"\n",(0,a.jsxs)(t.p,{children:["If set on theme, ",(0,a.jsx)(t.code,{children:"textWrap"})," is also applied to headings in ",(0,a.jsx)(t.a,{href:"/core/typography-styles-provider",children:"TypographyStylesProvider"})]}),"\n",(0,a.jsx)(t.h2,{id:"mod-prop",children:"mod prop"}),"\n",(0,a.jsxs)(t.p,{children:["All components now support ",(0,a.jsx)(t.code,{children:"mod"})," prop, which allows adding data attributes to\nthe root element:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-tsx",children:"import { Box } from '@mantine/core';\n\n;\n// ->
\n\n;\n// ->
\n\n;\n// ->
\n\n;\n// ->
\n\n;\n// ->
\n"})}),"\n",(0,a.jsx)(t.h2,{id:"documentation-updates",children:"Documentation updates"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:["New ",(0,a.jsx)(t.a,{href:"/guides/vitest/",children:"testing with Vitest guide"})]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/native-select/#with-dividers",children:"NativeSelect"})," with dividers demo"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/popover/#middlewares",children:"Popover"})," ",(0,a.jsx)(t.code,{children:"shift"})," and ",(0,a.jsx)(t.code,{children:"flip"})," middlewares documentation"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/combobox/#popover-props",children:"Combobox"})," props related to ",(0,a.jsx)(t.a,{href:"/core/popover",children:"Popover"})," documentation"]}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"/styles/mantine-styles/#loading-styles-from-cdn",children:"Loading styles from CDN guide"})}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/anchor/#text-props",children:"Anchor"})," now includes additional documentation on how to use ",(0,a.jsx)(t.a,{href:"/core/text",children:"Text"})," props"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/pagination",children:"Pagination"})," now includes props tables for all compound components"]}),"\n",(0,a.jsxs)(t.li,{children:["A more detailed breakdown of ",(0,a.jsx)(t.a,{href:"/about/#browser-support",children:"browser support"})," has been added to the about page"]}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"help-center-updates",children:"Help center updates"}),"\n",(0,a.jsxs)(t.p,{children:["New articles added to the ",(0,a.jsx)(t.a,{href:"https://help.mantine.dev",children:"help center"}),":"]}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/can-i-use-mantine-with-astro",children:"Can I use Mantine with Astro?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/how-can-i-contribute",children:"How can I contribute to the library?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/dynamic-css-styles",children:"How can I add dynamic CSS styles?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/next-load-fonts",children:"How can I load fonts in Next.js?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/vite-load-fonts",children:"How can I load fonts in Vite?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/floating-action-button",children:"Is there a floating action button component?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/inputs-placeholder-color",children:"How to change inputs placeholder color?"})}),"\n",(0,a.jsx)(t.li,{children:(0,a.jsx)(t.a,{href:"https://help.mantine.dev/q/dates-missing-styles",children:"I do not have styles in my dates components..."})}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"other-changes",children:"Other changes"}),"\n",(0,a.jsxs)(t.ul,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/checkbox",children:"Checkbox.Group"}),", ",(0,a.jsx)(t.a,{href:"/core/radio",children:"Radio.Group"})," and ",(0,a.jsx)(t.a,{href:"/core/switch",children:"Switch.Group"})," now support ",(0,a.jsx)(t.code,{children:"readOnly"})," prop"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/action-icon",children:"ActionIcon"})," now has ",(0,a.jsx)(t.code,{children:"loading"})," state animation"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/segmented-control",children:"SegmentedControl"})," now supports ",(0,a.jsx)(t.code,{children:"withItemsBorder"})," prop which allows removing border between items"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/progress",children:"Progress"})," now supports ",(0,a.jsx)(t.code,{children:"transitionDuration"})," prop which controls section width animation duration"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.a,{href:"/core/textarea",children:"Textarea"})," and ",(0,a.jsx)(t.a,{href:"/core/json-input",children:"JsonInput"})," components now support ",(0,a.jsx)(t.code,{children:"resize"})," prop, which allows setting ",(0,a.jsx)(t.code,{children:"resize"})," CSS property on the input"]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"@mantine/hooks"})," package now exports ",(0,a.jsx)(t.a,{href:"/hooks/use-local-storage/#read-storage-value",children:"readLocalStorageValue and readSessionStorageValue"})," function to get value from storage outside of React components"]}),"\n"]})]})}function x(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(m,{...e,children:(0,a.jsx)(f,{...e})})}},94884:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var a=n(52322),r=n(24634),o=n(99803);let i={type:"code",component:function(){return(0,a.jsx)(r.T,{h:300,data:o.aT,dataKey:"date",type:"stacked",withLegend:!0,legendProps:{verticalAlign:"bottom"},series:[{name:"Apples",label:"Apples sales",color:"indigo.6"},{name:"Oranges",label:"Oranges sales",color:"blue.6"},{name:"Tomatoes",label:"Tomatoes sales",color:"teal.6"}]})},code:[{code:` import { AreaChart } from '@mantine/charts'; import { data } from './data'; @@ -78,7 +78,7 @@ function Demo() { ); } -`,centered:!0,controls:[{type:"segmented",prop:"textWrap",initialValue:"wrap",libraryValue:"__",data:[{value:"wrap",label:"wrap"},{value:"balance",label:"balance"}]}]}},65328:function(e,t,n){"use strict";n.d(t,{$S:function(){return d},gB:function(){return l},j_:function(){return r},m6:function(){return o},oC:function(){return s},qv:function(){return c},w6:function(){return i},wD:function(){return h}});var a=n(18738);n(52322),n(2784);let{usage:r,multiple:o,range:i,configurator:l,modal:s,icon:c,clearable:d,valueFormatter:h}=(0,n(42411).B)(a.a)},71812:function(e,t,n){"use strict";n.d(t,{U:function(){return i}});var a=n(52322),r=n(92014),o=n(95488);let i={type:"code",component:function(){return(0,a.jsx)(r.wf,{settings:{consistentWeeks:!0},children:(0,a.jsx)(o.M,{})})},code:` +`,centered:!0,controls:[{type:"segmented",prop:"textWrap",initialValue:"wrap",libraryValue:"__",data:[{value:"wrap",label:"wrap"},{value:"balance",label:"balance"}]}]}},65328:function(e,t,n){"use strict";n.d(t,{$S:function(){return d},gB:function(){return l},j_:function(){return r},m6:function(){return o},oC:function(){return s},qv:function(){return c},w6:function(){return i},wD:function(){return u}});var a=n(18738);n(52322),n(2784);let{usage:r,multiple:o,range:i,configurator:l,modal:s,icon:c,clearable:d,valueFormatter:u}=(0,n(42411).B)(a.a)},71812:function(e,t,n){"use strict";n.d(t,{U:function(){return i}});var a=n(52322),r=n(92014),o=n(95488);let i={type:"code",component:function(){return(0,a.jsx)(r.wf,{settings:{consistentWeeks:!0},children:(0,a.jsx)(o.M,{})})},code:` import { DatePicker, DatesProvider } from '@mantine/dates'; function Demo() { @@ -147,7 +147,7 @@ function Demo() { /> ); } -`,h=e=>` +`,u=e=>` import { useState } from 'react'; import { ${e} } from '@mantine/dates'; @@ -163,7 +163,7 @@ function Demo() { /> ); } -`,u=e=>` +`,h=e=>` import { useState } from 'react'; import { ${e} } from '@mantine/dates'; @@ -229,4 +229,4 @@ function Demo() { /> ); } -`,x=({type:e,date:t,locale:n,format:a})=>{if("multiple"===e&&Array.isArray(t)){if(1===t.length)return m(t[0]).locale(n).format(a);if(t.length>1)return`${t.length} dates selected`}return""};function j(e){return{usage:{type:"code",centered:!0,maxWidth:400,code:p(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)(null);return(0,a.jsx)(e,{label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},multiple:{type:"code",centered:!0,maxWidth:400,code:h(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)([]);return(0,a.jsx)(e,{type:"multiple",label:"Pick dates",placeholder:"Pick dates",value:t,onChange:n})}},range:{type:"code",centered:!0,maxWidth:400,code:u(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)([null,null]);return(0,a.jsx)(e,{type:"range",label:"Pick dates range",placeholder:"Pick dates range",value:t,onChange:n})}},configurator:{type:"configurator",component:e,centered:!0,maxWidth:400,code:o(e.displayName.replace("@mantine/dates/","")),controls:[{prop:"placeholder",type:"string",initialValue:"Pick date",libraryValue:"__"},{prop:"label",type:"string",initialValue:"Pick date",libraryValue:""},{prop:"description",type:"string",initialValue:"",libraryValue:""},{prop:"error",type:"string",initialValue:"",libraryValue:""},{prop:"variant",type:"select",data:[{label:"default",value:"default"},{label:"filled",value:"filled"},{label:"unstyled",value:"unstyled"}],initialValue:"default",libraryValue:"default"},{prop:"radius",type:"size",initialValue:"sm",libraryValue:"sm"},{prop:"size",type:"size",initialValue:"sm",libraryValue:"sm"},{prop:"disabled",type:"boolean",initialValue:!1,libraryValue:!1},{prop:"withAsterisk",type:"boolean",initialValue:!0,libraryValue:!1}]},modal:{type:"code",centered:!0,maxWidth:400,code:d(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)(null);return(0,a.jsx)(e,{dropdownType:"modal",label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},icon:{type:"code",centered:!0,maxWidth:400,code:c(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)(null);return(0,a.jsx)(e,{leftSection:(0,a.jsx)(l.Z,{style:{width:(0,s.h)(18),height:(0,s.h)(18)},stroke:1.5}),leftSectionPointerEvents:"none",label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},clearable:{type:"code",centered:!0,maxWidth:400,code:r(e.displayName.replace("@mantine/dates/","")),component:()=>(0,a.jsx)(e,{clearable:!0,defaultValue:new Date,label:"Pick date",placeholder:"Pick date"})},valueFormatter:{type:"code",centered:!0,maxWidth:400,code:f(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)([]);return(0,a.jsx)(e,{label:"Pick 2 dates or more",placeholder:"Pick 2 dates or more",value:t,onChange:n,type:"multiple",valueFormatter:x})}}}}},27472:function(e,t,n){"use strict";n.d(t,{Y:function(){return w}});var a=n(52322),r=n(11011),o=n(18205),i=n(43454),l=n(79941),s=n(21154),c=n(11200),d=n(13588),h=n(58898),u=n(82027),p=n(38483),m=n(68755),f=n(46690),x=n(51477),j=n(28559),v=n(50425),g={root:"m_a410e613",label:"m_ddb0bfe3"};let y={withTooltip:!0,withLabelsLine:!0,paddingAngle:0,thickness:20,size:160,strokeWidth:1,startAngle:0,endAngle:360,tooltipDataSource:"all"},b=(0,c.Z)((e,{strokeColor:t,labelColor:n,withLabels:a,size:r})=>({root:{"--chart-stroke-color":t?(0,d.p)(t,e):void 0,"--chart-labels-color":n?(0,d.p)(n,e):void 0,"--chart-size":a?(0,h.h)(r+80):(0,h.h)(r)}})),w=(0,u.d)((e,t)=>{let n=(0,p.w)("DonutChart",y,e),{classNames:c,className:h,style:u,styles:w,unstyled:k,vars:P,data:D,withTooltip:S,tooltipAnimationDuration:C,tooltipProps:A,pieProps:V,paddingAngle:N,withLabels:T,withLabelsLine:I,size:W,thickness:$,strokeWidth:_,startAngle:F,endAngle:z,tooltipDataSource:B,chartLabel:O,children:L,pieChartProps:E,valueFormatter:q,...M}=n,U=(0,m.rZ)(),H=(0,f.y)({name:"DonutChart",classes:g,props:n,className:h,style:u,classNames:c,styles:w,unstyled:k,vars:P,varsResolver:b}),{resolvedClassNames:Z,resolvedStyles:K}=(0,x.h)({classNames:c,styles:w,props:n}),R=D.map((e,t)=>(0,a.jsx)(r.b,{fill:(0,d.p)(e.color,U),stroke:"var(--chart-stroke-color, var(--mantine-color-body))",strokeWidth:_},t));return(0,a.jsx)(j.x,{ref:t,size:W,...H("root"),...M,children:(0,a.jsx)(o.h,{children:(0,a.jsxs)(i.u,{...E,children:[(0,a.jsx)(l.b,{data:D,innerRadius:W/2-$,outerRadius:W/2,dataKey:"value",isAnimationActive:!1,paddingAngle:N,startAngle:F,endAngle:z,label:!!T&&{fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontSize:12,fontFamily:"var(--mantine-font-family)"},labelLine:!!I&&{stroke:"var(--chart-label-color, var(--mantine-color-dimmed))",strokeWidth:1},...V,children:R}),O&&(0,a.jsx)("text",{x:"50%",y:"50%",textAnchor:"middle",dominantBaseline:"middle",...H("label"),children:O}),S&&(0,a.jsx)(s.u,{animationDuration:C,isAnimationActive:!1,content:({payload:e})=>(0,a.jsx)(v.h,{payload:D,classNames:Z,styles:K,type:"radial",segmentId:"segment"===B?e?.[0]?.name:void 0,valueFormatter:q}),...A}),L]})})})});w.displayName="@mantine/charts/DonutChart",w.classes=g},38840:function(e,t,n){"use strict";n.d(t,{u:function(){return k}});var a=n(52322),r=n(11011),o=n(18205),i=n(43454),l=n(79941),s=n(21154),c=n(11200),d=n(13588),h=n(58898),u=n(82027),p=n(38483),m=n(68755),f=n(46690),x=n(51477),j=n(28559),v=n(50425),g={root:"m_cd8943fd",label:"m_e3441f39"};let y={withTooltip:!1,withLabelsLine:!0,paddingAngle:0,size:160,strokeWidth:1,startAngle:0,endAngle:360,tooltipDataSource:"all",labelsPosition:"outside",labelsType:"value"},b=(0,c.Z)((e,{strokeColor:t,labelColor:n,withLabels:a,size:r,labelsPosition:o})=>({root:{"--chart-stroke-color":t?(0,d.p)(t,e):void 0,"--chart-labels-color":n?(0,d.p)(n,e):void 0,"--chart-size":a&&"outside"===o?(0,h.h)(r+80):(0,h.h)(r)}})),w=e=>({cx:t,cy:n,midAngle:r,innerRadius:o,outerRadius:i,value:l,percent:s})=>{let c=Math.PI/180,d=o+(i-o)*.5,h=t+d*Math.cos(-r*c);return(0,a.jsx)("text",{x:h,y:n+d*Math.sin(-r*c),textAnchor:h>t?"start":"end",dominantBaseline:"central",className:g.label,children:"percent"===e?`${(100*s).toFixed(0)}%`:l})},k=(0,u.d)((e,t)=>{let n=(0,p.w)("PieChart",y,e),{classNames:c,className:h,style:u,styles:k,unstyled:P,vars:D,data:S,withTooltip:C,tooltipAnimationDuration:A,tooltipProps:V,pieProps:N,paddingAngle:T,withLabels:I,withLabelsLine:W,size:$,strokeWidth:_,startAngle:F,endAngle:z,tooltipDataSource:B,children:O,pieChartProps:L,labelsPosition:E,valueFormatter:q,labelsType:M,...U}=n,H=(0,m.rZ)(),Z=(0,f.y)({name:"PieChart",classes:g,props:n,className:h,style:u,classNames:c,styles:k,unstyled:P,vars:D,varsResolver:b}),{resolvedClassNames:K,resolvedStyles:R}=(0,x.h)({classNames:c,styles:k,props:n}),J=S.map((e,t)=>(0,a.jsx)(r.b,{fill:(0,d.p)(e.color,H),stroke:"var(--chart-stroke-color, var(--mantine-color-body))",strokeWidth:_},t));return(0,a.jsx)(j.x,{ref:t,size:$,...Z("root"),...U,children:(0,a.jsx)(o.h,{children:(0,a.jsxs)(i.u,{...L,children:[(0,a.jsx)(l.b,{data:S,innerRadius:0,outerRadius:$/2,dataKey:"value",isAnimationActive:!1,paddingAngle:T,startAngle:F,endAngle:z,label:!!I&&("inside"===E?w(M||"value"):"percent"===M?({percent:e,x:t,y:n,cx:r,cy:o})=>(0,a.jsx)("text",{x:t,y:n,cx:r,cy:o,textAnchor:t>r?"start":"end",dominantBaseline:"central",fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontFamily:"var(--mantine-font-family)",fontSize:12,children:(0,a.jsx)("tspan",{x:t,children:`${(100*e).toFixed(0)}%`})}):{fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontSize:12,fontFamily:"var(--mantine-font-family)"}),labelLine:!!W&&"outside"===E&&{stroke:"var(--chart-label-color, var(--mantine-color-dimmed))",strokeWidth:1},...N,children:J}),C&&(0,a.jsx)(s.u,{animationDuration:A,isAnimationActive:!1,content:({payload:e})=>(0,a.jsx)(v.h,{payload:S,classNames:K,styles:R,type:"radial",segmentId:"segment"===B?e?.[0]?.name:void 0,valueFormatter:q}),...V}),O]})})})});k.displayName="@mantine/charts/PieChart",k.classes=g}},function(e){e.O(0,[61177,16717,50603,59966,43454,79545,66748,11340,11204,18738,47889,92888,49774,40179],function(){return e(e.s=79618)}),_N_E=e.O()}]); \ No newline at end of file +`,x=({type:e,date:t,locale:n,format:a})=>{if("multiple"===e&&Array.isArray(t)){if(1===t.length)return m(t[0]).locale(n).format(a);if(t.length>1)return`${t.length} dates selected`}return""};function j(e){return{usage:{type:"code",centered:!0,maxWidth:400,code:p(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)(null);return(0,a.jsx)(e,{label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},multiple:{type:"code",centered:!0,maxWidth:400,code:u(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)([]);return(0,a.jsx)(e,{type:"multiple",label:"Pick dates",placeholder:"Pick dates",value:t,onChange:n})}},range:{type:"code",centered:!0,maxWidth:400,code:h(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)([null,null]);return(0,a.jsx)(e,{type:"range",label:"Pick dates range",placeholder:"Pick dates range",value:t,onChange:n})}},configurator:{type:"configurator",component:e,centered:!0,maxWidth:400,code:o(e.displayName.replace("@mantine/dates/","")),controls:[{prop:"placeholder",type:"string",initialValue:"Pick date",libraryValue:"__"},{prop:"label",type:"string",initialValue:"Pick date",libraryValue:""},{prop:"description",type:"string",initialValue:"",libraryValue:""},{prop:"error",type:"string",initialValue:"",libraryValue:""},{prop:"variant",type:"select",data:[{label:"default",value:"default"},{label:"filled",value:"filled"},{label:"unstyled",value:"unstyled"}],initialValue:"default",libraryValue:"default"},{prop:"radius",type:"size",initialValue:"sm",libraryValue:"sm"},{prop:"size",type:"size",initialValue:"sm",libraryValue:"sm"},{prop:"disabled",type:"boolean",initialValue:!1,libraryValue:!1},{prop:"withAsterisk",type:"boolean",initialValue:!0,libraryValue:!1}]},modal:{type:"code",centered:!0,maxWidth:400,code:d(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)(null);return(0,a.jsx)(e,{dropdownType:"modal",label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},icon:{type:"code",centered:!0,maxWidth:400,code:c(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)(null);return(0,a.jsx)(e,{leftSection:(0,a.jsx)(l.Z,{style:{width:(0,s.h)(18),height:(0,s.h)(18)},stroke:1.5}),leftSectionPointerEvents:"none",label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},clearable:{type:"code",centered:!0,maxWidth:400,code:r(e.displayName.replace("@mantine/dates/","")),component:()=>(0,a.jsx)(e,{clearable:!0,defaultValue:new Date,label:"Pick date",placeholder:"Pick date"})},valueFormatter:{type:"code",centered:!0,maxWidth:400,code:f(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,i.useState)([]);return(0,a.jsx)(e,{label:"Pick 2 dates or more",placeholder:"Pick 2 dates or more",value:t,onChange:n,type:"multiple",valueFormatter:x})}}}}},27472:function(e,t,n){"use strict";n.d(t,{Y:function(){return w}});var a=n(52322),r=n(11011),o=n(18205),i=n(43454),l=n(79941),s=n(21154),c=n(11200),d=n(13588),u=n(58898),h=n(82027),p=n(38483),m=n(68755),f=n(46690),x=n(51477),j=n(28559),v=n(50425),g={root:"m_a410e613",label:"m_ddb0bfe3"};let y={withTooltip:!0,withLabelsLine:!0,paddingAngle:0,thickness:20,size:160,strokeWidth:1,startAngle:0,endAngle:360,tooltipDataSource:"all"},b=(0,c.Z)((e,{strokeColor:t,labelColor:n,withLabels:a,size:r})=>({root:{"--chart-stroke-color":t?(0,d.p)(t,e):void 0,"--chart-labels-color":n?(0,d.p)(n,e):void 0,"--chart-size":a?(0,u.h)(r+80):(0,u.h)(r)}})),w=(0,h.d)((e,t)=>{let n=(0,p.w)("DonutChart",y,e),{classNames:c,className:u,style:h,styles:w,unstyled:k,vars:P,data:D,withTooltip:S,tooltipAnimationDuration:C,tooltipProps:A,pieProps:V,paddingAngle:N,withLabels:T,withLabelsLine:I,size:W,thickness:$,strokeWidth:_,startAngle:F,endAngle:z,tooltipDataSource:B,chartLabel:O,children:L,pieChartProps:E,valueFormatter:q,...M}=n,U=(0,m.rZ)(),H=(0,f.y)({name:"DonutChart",classes:g,props:n,className:u,style:h,classNames:c,styles:w,unstyled:k,vars:P,varsResolver:b}),{resolvedClassNames:Z,resolvedStyles:K}=(0,x.h)({classNames:c,styles:w,props:n}),R=D.map((e,t)=>(0,a.jsx)(r.b,{fill:(0,d.p)(e.color,U),stroke:"var(--chart-stroke-color, var(--mantine-color-body))",strokeWidth:_},t));return(0,a.jsx)(j.x,{ref:t,size:W,...H("root"),...M,children:(0,a.jsx)(o.h,{children:(0,a.jsxs)(i.u,{...E,children:[(0,a.jsx)(l.b,{data:D,innerRadius:W/2-$,outerRadius:W/2,dataKey:"value",isAnimationActive:!1,paddingAngle:N,startAngle:F,endAngle:z,label:!!T&&{fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontSize:12,fontFamily:"var(--mantine-font-family)"},labelLine:!!I&&{stroke:"var(--chart-label-color, var(--mantine-color-dimmed))",strokeWidth:1},...V,children:R}),O&&(0,a.jsx)("text",{x:"50%",y:"50%",textAnchor:"middle",dominantBaseline:"middle",...H("label"),children:O}),S&&(0,a.jsx)(s.u,{animationDuration:C,isAnimationActive:!1,content:({payload:e})=>(0,a.jsx)(v.h,{payload:D,classNames:Z,styles:K,type:"radial",segmentId:"segment"===B?e?.[0]?.name:void 0,valueFormatter:q}),...A}),L]})})})});w.displayName="@mantine/charts/DonutChart",w.classes=g},38840:function(e,t,n){"use strict";n.d(t,{u:function(){return k}});var a=n(52322),r=n(11011),o=n(18205),i=n(43454),l=n(79941),s=n(21154),c=n(11200),d=n(13588),u=n(58898),h=n(82027),p=n(38483),m=n(68755),f=n(46690),x=n(51477),j=n(28559),v=n(50425),g={root:"m_cd8943fd",label:"m_e3441f39"};let y={withTooltip:!1,withLabelsLine:!0,paddingAngle:0,size:160,strokeWidth:1,startAngle:0,endAngle:360,tooltipDataSource:"all",labelsPosition:"outside",labelsType:"value"},b=(0,c.Z)((e,{strokeColor:t,labelColor:n,withLabels:a,size:r,labelsPosition:o})=>({root:{"--chart-stroke-color":t?(0,d.p)(t,e):void 0,"--chart-labels-color":n?(0,d.p)(n,e):void 0,"--chart-size":a&&"outside"===o?(0,u.h)(r+80):(0,u.h)(r)}})),w=(e,t)=>({cx:n,cy:r,midAngle:o,innerRadius:i,outerRadius:l,value:s,percent:c})=>{let d=Math.PI/180,u=i+(l-i)*.5,h=n+u*Math.cos(-o*d);return(0,a.jsx)("text",{x:h,y:r+u*Math.sin(-o*d),textAnchor:h>n?"start":"end",dominantBaseline:"central",className:g.label,children:"percent"===e?`${(100*c).toFixed(0)}%`:"function"==typeof t?t(s):s})},k=(0,h.d)((e,t)=>{let n=(0,p.w)("PieChart",y,e),{classNames:c,className:u,style:h,styles:k,unstyled:P,vars:D,data:S,withTooltip:C,tooltipAnimationDuration:A,tooltipProps:V,pieProps:N,paddingAngle:T,withLabels:I,withLabelsLine:W,size:$,strokeWidth:_,startAngle:F,endAngle:z,tooltipDataSource:B,children:O,pieChartProps:L,labelsPosition:E,valueFormatter:q,labelsType:M,...U}=n,H=(0,m.rZ)(),Z=(0,f.y)({name:"PieChart",classes:g,props:n,className:u,style:h,classNames:c,styles:k,unstyled:P,vars:D,varsResolver:b}),{resolvedClassNames:K,resolvedStyles:R}=(0,x.h)({classNames:c,styles:k,props:n}),J=S.map((e,t)=>(0,a.jsx)(r.b,{fill:(0,d.p)(e.color,H),stroke:"var(--chart-stroke-color, var(--mantine-color-body))",strokeWidth:_},t));return(0,a.jsx)(j.x,{ref:t,size:$,...Z("root"),...U,children:(0,a.jsx)(o.h,{children:(0,a.jsxs)(i.u,{...L,children:[(0,a.jsx)(l.b,{data:S,innerRadius:0,outerRadius:$/2,dataKey:"value",isAnimationActive:!1,paddingAngle:T,startAngle:F,endAngle:z,label:!!I&&("inside"===E?w(M||"value",q):"percent"===M?({percent:e,x:t,y:n,cx:r,cy:o})=>(0,a.jsx)("text",{x:t,y:n,cx:r,cy:o,textAnchor:t>r?"start":"end",dominantBaseline:"central",fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontFamily:"var(--mantine-font-family)",fontSize:12,children:(0,a.jsx)("tspan",{x:t,children:`${(100*e).toFixed(0)}%`})}):{fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontSize:12,fontFamily:"var(--mantine-font-family)"}),labelLine:!!W&&"outside"===E&&{stroke:"var(--chart-label-color, var(--mantine-color-dimmed))",strokeWidth:1},...N,children:J}),C&&(0,a.jsx)(s.u,{animationDuration:A,isAnimationActive:!1,content:({payload:e})=>(0,a.jsx)(v.h,{payload:S,classNames:K,styles:R,type:"radial",segmentId:"segment"===B?e?.[0]?.name:void 0,valueFormatter:q}),...V}),O]})})})});k.displayName="@mantine/charts/PieChart",k.classes=g}},function(e){e.O(0,[61177,16717,50603,59966,43454,79545,66748,11340,11204,18738,47889,92888,49774,40179],function(){return e(e.s=79618)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/changelog/7-6-0-a5e36a97ff86dce0.js b/_next/static/chunks/pages/changelog/7-6-0-2c4ef81f61021371.js similarity index 81% rename from _next/static/chunks/pages/changelog/7-6-0-a5e36a97ff86dce0.js rename to _next/static/chunks/pages/changelog/7-6-0-2c4ef81f61021371.js index 5537bf6848a..d22262431b5 100644 --- a/_next/static/chunks/pages/changelog/7-6-0-a5e36a97ff86dce0.js +++ b/_next/static/chunks/pages/changelog/7-6-0-2c4ef81f61021371.js @@ -368,4 +368,4 @@ function Demo() {
); } -`}},32125:function(e,t,n){"use strict";n.d(t,{v:function(){return a}});var r=n(52322);function a({color:e,id:t,withGradient:n,fillOpacity:a}){return(0,r.jsx)(r.Fragment,{children:n?(0,r.jsxs)("linearGradient",{id:t,x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:e,stopOpacity:a}),(0,r.jsx)("stop",{offset:"100%",stopColor:e,stopOpacity:.01})]}):(0,r.jsx)("linearGradient",{id:t,x1:"0",y1:"0",x2:"0",y2:"1",children:(0,r.jsx)("stop",{stopColor:e,stopOpacity:a??.2})})})}a.displayName="@mantine/charts/AreaGradient"},8132:function(e,t,n){"use strict";n.d(t,{v:function(){return P}});var r=n(52322),a=n(2784),i=n(171),o=n(11011),s=n(30840),l=n(18205),c=n(80739),d=n(55734),h=n(25556),p=n(81224),u=n(3131),m=n(55484),x=n(21154),f=n(11200),j=n(13588),v=n(82027),y=n(38483),g=n(68755),b=n(51477),w=n(46690),k=n(28559),S=n(46293),C=n(50425),T=n(7064);function I(e){return`${(100*e).toFixed(0)}%`}let A={withXAxis:!0,withYAxis:!0,withTooltip:!0,tooltipAnimationDuration:0,fillOpacity:1,tickLine:"y",strokeDasharray:"5 5",gridAxis:"x",type:"default"},_=(0,f.Z)((e,{textColor:t,gridColor:n,cursorFill:r})=>({root:{"--chart-text-color":t?(0,j.p)(t,e):void 0,"--chart-grid-color":n?(0,j.p)(n,e):void 0,"--chart-cursor-fill":r?(0,j.p)(r,e):void 0}}));function L({value:e,valueFormatter:t,...n}){return(0,r.jsx)("text",{...n,dy:-10,fontSize:12,fill:"var(--chart-text-color, var(--mantine-color-dimmed))",textAnchor:"center",children:"function"==typeof t?t(e):e})}let P=(0,v.d)((e,t)=>{let n,f;let v=(0,y.w)("BarChart",A,e),{classNames:P,className:M,style:E,styles:N,unstyled:O,vars:F,data:R,withLegend:z,legendProps:B,series:D,onMouseLeave:H,dataKey:G,withTooltip:q,withXAxis:K,withYAxis:Z,gridAxis:V,tickLine:W,xAxisProps:U,yAxisProps:J,unit:$,tooltipAnimationDuration:Y,strokeDasharray:X,gridProps:Q,tooltipProps:ee,referenceLines:et,fillOpacity:en,barChartProps:er,type:ea,orientation:ei,dir:eo,valueFormatter:es,children:el,barProps:ec,xAxisLabel:ed,yAxisLabel:eh,withBarValueLabel:ep,...eu}=v,em=(0,g.rZ)(),[ex,ef]=(0,a.useState)(null),ej=null!==ex,ev="stacked"===ea||"percent"===ea,{resolvedClassNames:ey,resolvedStyles:eg}=(0,b.h)({classNames:P,styles:N,props:v}),eb="waterfall"===ea?(n=0,f=0,R.map(e=>{if(e.standalone)for(let t in e)"number"==typeof e[t]&&t!==G&&(e[t]=[0,e[t]]);else for(let t in e)"number"==typeof e[t]&&t!==G&&(f+=e[t],e[t]=[n,f],n=f);return e})):R,ew=(0,w.y)({name:"BarChart",classes:T.Z,props:v,className:M,style:E,classNames:P,styles:N,unstyled:O,vars:F,varsResolver:_}),ek=D.map(e=>{let t=(0,j.p)(e.color,em),n=ej&&ex!==e.name;return(0,a.createElement)(i.$,{...ew("bar"),key:e.name,name:e.name,dataKey:e.name,fill:t,stroke:t,isAnimationActive:!1,fillOpacity:n?.1:en,strokeOpacity:n?.2:0,stackId:ev?"stack":void 0,label:ep?(0,r.jsx)(L,{valueFormatter:es}):void 0,..."function"==typeof ec?ec(e):ec},eb.map((e,n)=>(0,r.jsx)(o.b,{fill:e.color?(0,j.p)(e.color,em):t},`cell-${n}`)))}),eS=et?.map((e,t)=>{let n=j.p(e.color,em);return r.jsx(s.d,{stroke:e.color?n:"var(--chart-grid-color)",strokeWidth:1,...e,label:{value:e.label,fill:e.color?n:"currentColor",fontSize:12,position:e.labelPosition??"insideBottomLeft"},...ew("referenceLine")},t)});return(0,r.jsx)(k.x,{ref:t,...ew("root"),onMouseLeave:e=>{ef(null),H?.(e)},dir:eo||"ltr",...eu,children:(0,r.jsx)(l.h,{...ew("container"),children:(0,r.jsxs)(c.v,{data:eb,stackOffset:"percent"===ea?"expand":void 0,layout:ei,margin:{bottom:ed?30:void 0,left:eh?10:void 0,right:eh?5:void 0},...er,children:[z&&(0,r.jsx)(d.D,{verticalAlign:"top",content:e=>(0,r.jsx)(S.Q,{payload:e.payload,onHighlight:ef,legendPosition:B?.verticalAlign||"top",classNames:ey,styles:eg,series:D,showColor:"waterfall"!==ea}),...B}),(0,r.jsxs)(h.K,{hide:!K,..."vertical"===ei?{type:"number"}:{dataKey:G},tick:{transform:"translate(0, 10)",fontSize:12,fill:"currentColor"},stroke:"",interval:"preserveStartEnd",tickLine:!!("none"!==V&&("x"===W||"xy"===W))&&{stroke:"currentColor"},minTickGap:5,...ew("axis"),...U,children:[ed&&(0,r.jsx)(p._,{position:"insideBottom",offset:-20,fontSize:12,...ew("axisLabel"),children:ed}),U?.children]}),(0,r.jsxs)(u.B,{hide:!Z,axisLine:!1,..."vertical"===ei?{dataKey:G,type:"category"}:{type:"number"},tickLine:!!("none"!==V&&("y"===W||"xy"===W))&&{stroke:"currentColor"},tick:{transform:"translate(-10, 0)",fontSize:12,fill:"currentColor"},allowDecimals:!0,unit:$,tickFormatter:"percent"===ea?I:es,...ew("axis"),...J,children:[eh&&(0,r.jsx)(p._,{position:"insideLeft",angle:-90,textAnchor:"middle",fontSize:12,offset:-5,...ew("axisLabel"),children:eh}),J?.children]}),(0,r.jsx)(m.q,{strokeDasharray:X,vertical:"y"===V||"xy"===V,horizontal:"x"===V||"xy"===V,...ew("grid"),...Q}),q&&(0,r.jsx)(x.u,{animationDuration:Y,isAnimationActive:0!==Y,position:"vertical"===ei?{}:{y:0},cursor:{stroke:"var(--chart-grid-color)",strokeWidth:1,strokeDasharray:X,fill:"var(--chart-cursor-fill)"},content:({label:e,payload:t})=>(0,r.jsx)(C.h,{label:e,payload:t,type:"waterfall"===ea?"scatter":void 0,unit:$,classNames:ey,styles:eg,series:D,valueFormatter:es}),...ee}),ek,eS,el]})})})});P.displayName="@mantine/charts/BarChart",P.classes=T.Z},46293:function(e,t,n){"use strict";n.d(t,{Q:function(){return p}});var r=n(52322),a=n(82027),i=n(38483),o=n(46690),s=n(27009),l=n(28559),c=n(64438),d={legend:"m_847eaf",legendItem:"m_17da7e62",legendItemColor:"m_6e236e21",legendItemName:"m_8ff56c0d"};let h={},p=(0,a.d)((e,t)=>{let n=(0,i.w)("ChartLegend",h,e),{classNames:a,className:p,style:u,styles:m,unstyled:x,vars:f,payload:j,onHighlight:v,legendPosition:y,mod:g,series:b,showColor:w,...k}=n,S=(0,o.y)({name:"ChartLegend",classes:d,props:n,className:p,style:u,classNames:a,styles:m,unstyled:x});if(!j)return null;let C=j.filter(e=>"none"!==e.color),T=(0,c.v)(b),I=C.map((e,t)=>(0,r.jsxs)("div",{...S("legendItem"),onMouseEnter:()=>v(e.dataKey),onMouseLeave:()=>v(null),"data-without-color":!1===w||void 0,children:[(0,r.jsx)(s.b,{color:e.color,size:12,...S("legendItemColor"),withShadow:!1}),(0,r.jsx)("p",{...S("legendItemName"),children:T[e.dataKey]||e.dataKey})]},t));return(0,r.jsx)(l.x,{ref:t,mod:[{position:y},g],...S("legend"),...k,children:I})});p.displayName="@mantine/charts/ChartLegend"},50425:function(e,t,n){"use strict";n.d(t,{h:function(){return f},X:function(){return u}});var r=n(52322),a=n(82027),i=n(38483),o=n(68755),s=n(46690),l=n(27009),c=n(13588),d=n(28559),h=n(64438),p={tooltip:"m_e4d36c9b",tooltipLabel:"m_7f4bcb19",tooltipBody:"m_3de554dd",tooltipItem:"m_3de8964e",tooltipItemColor:"m_b30369b5",tooltipItemBody:"m_50186d10",tooltipItemName:"m_501dadf9",tooltipItemData:"m_50192318"};function u(e,t){let n=e.filter(e=>"none"!==e.fill||!e.color);return t?n.filter(e=>e.name===t):n}function m(e,t){return"radial"===t||"scatter"===t?Array.isArray(e.value)?e.value[1]-e.value[0]:e.value:Array.isArray(e.payload[e.dataKey])?e.payload[e.dataKey][1]-e.payload[e.dataKey][0]:e.payload[e.dataKey]}let x={type:"area"},f=(0,a.d)((e,t)=>{let n=(0,i.w)("ChartTooltip",x,e),{classNames:a,className:f,style:j,styles:v,unstyled:y,vars:g,payload:b,label:w,unit:k,type:S,segmentId:C,mod:T,series:I,valueFormatter:A,..._}=n,L=(0,o.rZ)(),P=(0,s.y)({name:"ChartTooltip",classes:p,props:n,className:f,style:j,classNames:a,styles:v,unstyled:y});if(!b)return null;let M=u(b,C),E="scatter"===S?b[0]?.payload?.name:null,N=(0,h.v)(I),O=w||E,F=M.map(e=>(0,r.jsxs)("div",{"data-type":S,...P("tooltipItem"),children:[(0,r.jsxs)("div",{...P("tooltipItemBody"),children:[(0,r.jsx)(l.b,{color:(0,c.p)(e.color,L),size:12,...P("tooltipItemColor"),withShadow:!1}),(0,r.jsx)("div",{...P("tooltipItemName"),children:N[e.name]||e.name})]}),(0,r.jsxs)("div",{...P("tooltipItemData"),children:["function"==typeof A?A(m(e,S)):m(e,S),k||e.unit]})]},e.name));return(0,r.jsxs)(d.x,{...P("tooltip"),mod:[{type:S},T],ref:t,..._,children:[O&&(0,r.jsx)("div",{...P("tooltipLabel"),children:O}),(0,r.jsx)("div",{...P("tooltipBody"),children:F})]})});f.displayName="@mantine/charts/ChartTooltip"},38840:function(e,t,n){"use strict";n.d(t,{u:function(){return k}});var r=n(52322),a=n(11011),i=n(18205),o=n(43454),s=n(79941),l=n(21154),c=n(11200),d=n(13588),h=n(58898),p=n(82027),u=n(38483),m=n(68755),x=n(46690),f=n(51477),j=n(28559),v=n(50425),y={root:"m_cd8943fd",label:"m_e3441f39"};let g={withTooltip:!1,withLabelsLine:!0,paddingAngle:0,size:160,strokeWidth:1,startAngle:0,endAngle:360,tooltipDataSource:"all",labelsPosition:"outside",labelsType:"value"},b=(0,c.Z)((e,{strokeColor:t,labelColor:n,withLabels:r,size:a,labelsPosition:i})=>({root:{"--chart-stroke-color":t?(0,d.p)(t,e):void 0,"--chart-labels-color":n?(0,d.p)(n,e):void 0,"--chart-size":r&&"outside"===i?(0,h.h)(a+80):(0,h.h)(a)}})),w=e=>({cx:t,cy:n,midAngle:a,innerRadius:i,outerRadius:o,value:s,percent:l})=>{let c=Math.PI/180,d=i+(o-i)*.5,h=t+d*Math.cos(-a*c);return(0,r.jsx)("text",{x:h,y:n+d*Math.sin(-a*c),textAnchor:h>t?"start":"end",dominantBaseline:"central",className:y.label,children:"percent"===e?`${(100*l).toFixed(0)}%`:s})},k=(0,p.d)((e,t)=>{let n=(0,u.w)("PieChart",g,e),{classNames:c,className:h,style:p,styles:k,unstyled:S,vars:C,data:T,withTooltip:I,tooltipAnimationDuration:A,tooltipProps:_,pieProps:L,paddingAngle:P,withLabels:M,withLabelsLine:E,size:N,strokeWidth:O,startAngle:F,endAngle:R,tooltipDataSource:z,children:B,pieChartProps:D,labelsPosition:H,valueFormatter:G,labelsType:q,...K}=n,Z=(0,m.rZ)(),V=(0,x.y)({name:"PieChart",classes:y,props:n,className:h,style:p,classNames:c,styles:k,unstyled:S,vars:C,varsResolver:b}),{resolvedClassNames:W,resolvedStyles:U}=(0,f.h)({classNames:c,styles:k,props:n}),J=T.map((e,t)=>(0,r.jsx)(a.b,{fill:(0,d.p)(e.color,Z),stroke:"var(--chart-stroke-color, var(--mantine-color-body))",strokeWidth:O},t));return(0,r.jsx)(j.x,{ref:t,size:N,...V("root"),...K,children:(0,r.jsx)(i.h,{children:(0,r.jsxs)(o.u,{...D,children:[(0,r.jsx)(s.b,{data:T,innerRadius:0,outerRadius:N/2,dataKey:"value",isAnimationActive:!1,paddingAngle:P,startAngle:F,endAngle:R,label:!!M&&("inside"===H?w(q||"value"):"percent"===q?({percent:e,x:t,y:n,cx:a,cy:i})=>(0,r.jsx)("text",{x:t,y:n,cx:a,cy:i,textAnchor:t>a?"start":"end",dominantBaseline:"central",fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontFamily:"var(--mantine-font-family)",fontSize:12,children:(0,r.jsx)("tspan",{x:t,children:`${(100*e).toFixed(0)}%`})}):{fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontSize:12,fontFamily:"var(--mantine-font-family)"}),labelLine:!!E&&"outside"===H&&{stroke:"var(--chart-label-color, var(--mantine-color-dimmed))",strokeWidth:1},...L,children:J}),I&&(0,r.jsx)(l.u,{animationDuration:A,isAnimationActive:!1,content:({payload:e})=>(0,r.jsx)(v.h,{payload:T,classNames:W,styles:U,type:"radial",segmentId:"segment"===z?e?.[0]?.name:void 0,valueFormatter:G}),..._}),B]})})})});k.displayName="@mantine/charts/PieChart",k.classes=y},22309:function(e,t,n){"use strict";n.d(t,{H:function(){return g}});var r=n(52322),a=n(53891),i=n(18205),o=n(62411),s=n(25076),l=n(79669),c=n(10086),d=n(11200),h=n(13588),p=n(82027),u=n(38483),m=n(68755),x=n(46690),f=n(28559),j={root:"m_1f271cf7",container:"m_cf06f58c"};let v={withPolarGrid:!0,withPolarAngleAxis:!0,withPolarRadiusAxis:!1},y=(0,d.Z)((e,{gridColor:t,textColor:n})=>({root:{"--chart-grid-color":t?(0,h.p)(t,e):void 0,"--chart-text-color":n?(0,h.p)(n,e):void 0}})),g=(0,p.d)((e,t)=>{let n=(0,u.w)("RadarChart",v,e),{classNames:d,className:p,style:g,styles:b,unstyled:w,vars:k,data:S,series:C,dataKey:T,gridColor:I,textColor:A,radarProps:_,radarChartProps:L,polarGridProps:P,polarAngleAxisProps:M,polarRadiusAxisProps:E,withPolarGrid:N,withPolarAngleAxis:O,withPolarRadiusAxis:F,children:R,...z}=n,B=(0,m.rZ)(),D=(0,x.y)({name:"RadarChart",classes:j,props:n,className:p,style:g,classNames:d,styles:b,unstyled:w,vars:k,varsResolver:y}),H=C.map((e,t)=>(0,r.jsx)(a.F,{name:e.name,dataKey:e.name,stroke:(0,h.p)(e.strokeColor||e.color,B),fill:(0,h.p)(e.color,B),fillOpacity:e.opacity||.4,isAnimationActive:!1,..."function"==typeof _?_(e):_},t));return(0,r.jsx)(f.x,{ref:t,...D("root"),...z,children:(0,r.jsx)(i.h,{...D("container"),children:(0,r.jsxs)(o.H,{data:S,...L,children:[N&&(0,r.jsx)(s.n,{stroke:"var(--chart-grid-color)",...P}),O&&(0,r.jsx)(l.I,{dataKey:T,...M}),F&&(0,r.jsx)(c.S,{stroke:"var(--chart-grid-color)",...E}),H,R]})})})});g.displayName="@mantine/charts/RadarChart",g.classes=j},77533:function(e,t,n){"use strict";n.d(t,{b:function(){return v}});var r=n(52322),a=n(2784),i=n(18205),o=n(50603),s=n(81073),l=n(11200),c=n(13588),d=n(82027),h=n(38483),p=n(46690),u=n(28559),m=n(32125);let x={},f={withGradient:!0,connectNulls:!0,fillOpacity:.6,strokeWidth:2,curveType:"linear"},j=(0,l.Z)((e,{color:t,data:n,trendColors:r})=>({root:{"--chart-color":r?(0,c.p)(function(e,t){let n=e[0],r=e[e.length-1];return nr?t.negative:t.neutral||t.positive}(n,r),e):t?(0,c.p)(t,e):void 0}})),v=(0,d.d)((e,t)=>{let n=(0,h.w)("Sparkline",f,e),{classNames:l,className:c,style:d,styles:v,unstyled:y,vars:g,data:b,withGradient:w,fillOpacity:k,curveType:S,strokeWidth:C,trendColors:T,connectNulls:I,areaProps:A,..._}=n,L=(0,p.y)({name:"Sparkline",classes:x,props:n,className:c,style:d,classNames:l,styles:v,unstyled:y,vars:g,varsResolver:j}),P=(0,a.useId)(),M=(0,a.useMemo)(()=>b.map((e,t)=>({value:e,index:t})),[b]);return(0,r.jsx)(u.x,{ref:t,...L("root"),..._,dir:"ltr",children:(0,r.jsx)(i.h,{children:(0,r.jsxs)(o.T,{data:M,children:[(0,r.jsx)(s.u,{dataKey:"value",type:S,fill:`url(#${P})`,stroke:"var(--chart-color, var(--mantine-color-blue-filled))",isAnimationActive:!1,connectNulls:I,strokeWidth:C,fillOpacity:1,...A}),(0,r.jsx)("defs",{children:(0,r.jsx)(m.v,{id:P,color:"var(--chart-color, var(--mantine-color-blue-filled))",fillOpacity:k,withGradient:w})})]})})})});v.displayName="@mantine/charts/Sparkline",v.classes=x},7064:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={root:"m_a50f3e58",container:"m_af9188cb",grid:"m_a50a48bc",axis:"m_a507a517",axisLabel:"m_2293801d"}},64438:function(e,t,n){"use strict";function r(e){return e?e.reduce((e,t)=>(e[t.name]=t.label,e),{}):{}}n.d(t,{v:function(){return r}})},79649:function(e,t,n){"use strict";n.d(t,{P:function(){return j}});var r=n(52322),a=n(2784),i=n(66178),o=n(9341),s=n(51477),l=n(38483),c=n(82027),d=n(29995),h=n(77606),p=n(61324),u=n(66958),m=n(56237),x=n(73063);let f={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},j=(0,c.d)((e,t)=>{let n=(0,l.w)("Select",f,e),{classNames:c,styles:j,unstyled:v,vars:y,dropdownOpened:g,defaultDropdownOpened:b,onDropdownClose:w,onDropdownOpen:k,onFocus:S,onBlur:C,onClick:T,onChange:I,data:A,value:_,defaultValue:L,selectFirstOptionOnChange:P,onOptionSubmit:M,comboboxProps:E,readOnly:N,disabled:O,filter:F,limit:R,withScrollArea:z,maxDropdownHeight:B,size:D,searchable:H,rightSection:G,checkIconPosition:q,withCheckIcon:K,nothingFoundMessage:Z,name:V,form:W,searchValue:U,defaultSearchValue:J,onSearchChange:$,allowDeselect:Y,error:X,rightSectionPointerEvents:Q,id:ee,clearable:et,clearButtonProps:en,hiddenInputProps:er,renderOption:ea,onClear:ei,autoComplete:eo,scrollAreaProps:es,...el}=n,ec=(0,a.useMemo)(()=>(0,d.R)(A),[A]),ed=(0,a.useMemo)(()=>(0,h.g)(ec),[ec]),eh=(0,i.M)(ee),[ep,eu,em]=(0,o.C)({value:_,defaultValue:L,finalValue:null,onChange:I}),ex="string"==typeof ep?ed[ep]:void 0,[ef,ej]=(0,o.C)({value:U,defaultValue:J,finalValue:ex?ex.label:"",onChange:$}),ev=(0,m.K)({opened:g,defaultOpened:b,onDropdownOpen:()=>{k?.(),ev.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{w?.(),ev.resetSelectedOption()}}),{resolvedClassNames:ey,resolvedStyles:eg}=(0,s.h)({props:n,styles:j,classNames:c});(0,a.useEffect)(()=>{P&&ev.selectFirstOption()},[P,ep]),(0,a.useEffect)(()=>{null===_&&ej(""),"string"==typeof _&&ex&&ej(ex.label)},[_,ex]);let eb=et&&!!ep&&!O&&!N&&(0,r.jsx)(p.h.ClearButton,{size:D,...en,onClear:()=>{eu(null,null),ej(""),ei?.()}});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(p.h,{store:ev,__staticSelector:"Select",classNames:ey,styles:eg,unstyled:v,readOnly:N,onOptionSubmit:e=>{M?.(e);let t=Y&&ed[e].value===ep?null:ed[e],n=t?t.value:null;eu(n,t),em||ej("string"==typeof n&&t?.label||""),ev.closeDropdown()},size:D,...E,children:[(0,r.jsx)(p.h.Target,{targetType:H?"input":"button",autoComplete:eo,children:(0,r.jsx)(x.M,{id:eh,ref:t,rightSection:G||eb||(0,r.jsx)(p.h.Chevron,{size:D,error:X,unstyled:v}),rightSectionPointerEvents:Q||(eb?"all":"none"),...el,size:D,__staticSelector:"Select",disabled:O,readOnly:N||!H,value:ef,onChange:e=>{ej(e.currentTarget.value),ev.openDropdown(),P&&ev.selectFirstOption()},onFocus:e=>{H&&ev.openDropdown(),S?.(e)},onBlur:e=>{H&&ev.closeDropdown(),ej(null!=ep&&ed[ep]?.label||""),C?.(e)},onClick:e=>{H?ev.openDropdown():ev.toggleDropdown(),T?.(e)},classNames:ey,styles:eg,unstyled:v,pointer:!H,error:X})}),(0,r.jsx)(u.r,{data:ec,hidden:N||O,filter:F,search:ef,limit:R,hiddenWhenEmpty:!H||!Z,withScrollArea:z,maxDropdownHeight:B,filterOptions:H&&ex?.label!==ef,value:ep,checkIconPosition:q,withCheckIcon:K,nothingFoundMessage:Z,unstyled:v,labelId:el.label?`${eh}-label`:void 0,"aria-label":el.label?void 0:el["aria-label"],renderOption:ea,scrollAreaProps:es})]}),(0,r.jsx)(p.h.HiddenInput,{value:ep,name:V,form:W,disabled:O,...er})]})});j.classes={...x.M.classes,...p.h.classes},j.displayName="@mantine/core/Select"},3900:function(e,t,n){"use strict";n.d(t,{q:function(){return a}});var r=n(2784);function a(e=!1,t){let{onOpen:n,onClose:a}=t||{},[i,o]=(0,r.useState)(e),s=(0,r.useCallback)(()=>{o(e=>e||(n?.(),!0))},[n]),l=(0,r.useCallback)(()=>{o(e=>e?(a?.(),!1):e)},[a]),c=(0,r.useCallback)(()=>{i?l():s()},[l,s,i]);return[i,{open:s,close:l,toggle:c}]}}},function(e){e.O(0,[72812,47091,75417,61177,16717,50603,59966,43454,29985,37355,97054,66748,11340,61324,76124,77413,92888,49774,40179],function(){return e(e.s=65131)}),_N_E=e.O()}]); \ No newline at end of file +`}},32125:function(e,t,n){"use strict";n.d(t,{v:function(){return a}});var r=n(52322);function a({color:e,id:t,withGradient:n,fillOpacity:a}){return(0,r.jsx)(r.Fragment,{children:n?(0,r.jsxs)("linearGradient",{id:t,x1:"0",y1:"0",x2:"0",y2:"1",children:[(0,r.jsx)("stop",{offset:"0%",stopColor:e,stopOpacity:a}),(0,r.jsx)("stop",{offset:"100%",stopColor:e,stopOpacity:.01})]}):(0,r.jsx)("linearGradient",{id:t,x1:"0",y1:"0",x2:"0",y2:"1",children:(0,r.jsx)("stop",{stopColor:e,stopOpacity:a??.2})})})}a.displayName="@mantine/charts/AreaGradient"},8132:function(e,t,n){"use strict";n.d(t,{v:function(){return P}});var r=n(52322),a=n(2784),i=n(171),o=n(11011),s=n(30840),l=n(18205),c=n(80739),d=n(55734),h=n(25556),p=n(81224),u=n(3131),m=n(55484),x=n(21154),f=n(11200),j=n(13588),v=n(82027),y=n(38483),g=n(68755),b=n(51477),w=n(46690),k=n(28559),S=n(46293),C=n(50425),T=n(7064);function I(e){return`${(100*e).toFixed(0)}%`}let A={withXAxis:!0,withYAxis:!0,withTooltip:!0,tooltipAnimationDuration:0,fillOpacity:1,tickLine:"y",strokeDasharray:"5 5",gridAxis:"x",type:"default"},_=(0,f.Z)((e,{textColor:t,gridColor:n,cursorFill:r})=>({root:{"--chart-text-color":t?(0,j.p)(t,e):void 0,"--chart-grid-color":n?(0,j.p)(n,e):void 0,"--chart-cursor-fill":r?(0,j.p)(r,e):void 0}}));function L({value:e,valueFormatter:t,...n}){return(0,r.jsx)("text",{...n,dy:-10,fontSize:12,fill:"var(--chart-text-color, var(--mantine-color-dimmed))",textAnchor:"center",children:"function"==typeof t?t(e):e})}let P=(0,v.d)((e,t)=>{let n,f;let v=(0,y.w)("BarChart",A,e),{classNames:P,className:M,style:E,styles:N,unstyled:O,vars:R,data:F,withLegend:z,legendProps:D,series:B,onMouseLeave:H,dataKey:G,withTooltip:q,withXAxis:K,withYAxis:Z,gridAxis:V,tickLine:W,xAxisProps:U,yAxisProps:J,unit:$,tooltipAnimationDuration:Y,strokeDasharray:X,gridProps:Q,tooltipProps:ee,referenceLines:et,fillOpacity:en,barChartProps:er,type:ea,orientation:ei,dir:eo,valueFormatter:es,children:el,barProps:ec,xAxisLabel:ed,yAxisLabel:eh,withBarValueLabel:ep,...eu}=v,em=(0,g.rZ)(),[ex,ef]=(0,a.useState)(null),ej=null!==ex,ev="stacked"===ea||"percent"===ea,{resolvedClassNames:ey,resolvedStyles:eg}=(0,b.h)({classNames:P,styles:N,props:v}),eb="waterfall"===ea?(n=0,f=0,F.map(e=>{if(e.standalone)for(let t in e)"number"==typeof e[t]&&t!==G&&(e[t]=[0,e[t]]);else for(let t in e)"number"==typeof e[t]&&t!==G&&(f+=e[t],e[t]=[n,f],n=f);return e})):F,ew=(0,w.y)({name:"BarChart",classes:T.Z,props:v,className:M,style:E,classNames:P,styles:N,unstyled:O,vars:R,varsResolver:_}),ek=B.map(e=>{let t=(0,j.p)(e.color,em),n=ej&&ex!==e.name;return(0,a.createElement)(i.$,{...ew("bar"),key:e.name,name:e.name,dataKey:e.name,fill:t,stroke:t,isAnimationActive:!1,fillOpacity:n?.1:en,strokeOpacity:n?.2:0,stackId:ev?"stack":void 0,label:ep?(0,r.jsx)(L,{valueFormatter:es}):void 0,..."function"==typeof ec?ec(e):ec},eb.map((e,n)=>(0,r.jsx)(o.b,{fill:e.color?(0,j.p)(e.color,em):t},`cell-${n}`)))}),eS=et?.map((e,t)=>{let n=j.p(e.color,em);return r.jsx(s.d,{stroke:e.color?n:"var(--chart-grid-color)",strokeWidth:1,...e,label:{value:e.label,fill:e.color?n:"currentColor",fontSize:12,position:e.labelPosition??"insideBottomLeft"},...ew("referenceLine")},t)});return(0,r.jsx)(k.x,{ref:t,...ew("root"),onMouseLeave:e=>{ef(null),H?.(e)},dir:eo||"ltr",...eu,children:(0,r.jsx)(l.h,{...ew("container"),children:(0,r.jsxs)(c.v,{data:eb,stackOffset:"percent"===ea?"expand":void 0,layout:ei,margin:{bottom:ed?30:void 0,left:eh?10:void 0,right:eh?5:void 0},...er,children:[z&&(0,r.jsx)(d.D,{verticalAlign:"top",content:e=>(0,r.jsx)(S.Q,{payload:e.payload,onHighlight:ef,legendPosition:D?.verticalAlign||"top",classNames:ey,styles:eg,series:B,showColor:"waterfall"!==ea}),...D}),(0,r.jsxs)(h.K,{hide:!K,..."vertical"===ei?{type:"number"}:{dataKey:G},tick:{transform:"translate(0, 10)",fontSize:12,fill:"currentColor"},stroke:"",interval:"preserveStartEnd",tickLine:!!("none"!==V&&("x"===W||"xy"===W))&&{stroke:"currentColor"},minTickGap:5,...ew("axis"),...U,children:[ed&&(0,r.jsx)(p._,{position:"insideBottom",offset:-20,fontSize:12,...ew("axisLabel"),children:ed}),U?.children]}),(0,r.jsxs)(u.B,{hide:!Z,axisLine:!1,..."vertical"===ei?{dataKey:G,type:"category"}:{type:"number"},tickLine:!!("none"!==V&&("y"===W||"xy"===W))&&{stroke:"currentColor"},tick:{transform:"translate(-10, 0)",fontSize:12,fill:"currentColor"},allowDecimals:!0,unit:$,tickFormatter:"percent"===ea?I:es,...ew("axis"),...J,children:[eh&&(0,r.jsx)(p._,{position:"insideLeft",angle:-90,textAnchor:"middle",fontSize:12,offset:-5,...ew("axisLabel"),children:eh}),J?.children]}),(0,r.jsx)(m.q,{strokeDasharray:X,vertical:"y"===V||"xy"===V,horizontal:"x"===V||"xy"===V,...ew("grid"),...Q}),q&&(0,r.jsx)(x.u,{animationDuration:Y,isAnimationActive:0!==Y,position:"vertical"===ei?{}:{y:0},cursor:{stroke:"var(--chart-grid-color)",strokeWidth:1,strokeDasharray:X,fill:"var(--chart-cursor-fill)"},content:({label:e,payload:t})=>(0,r.jsx)(C.h,{label:e,payload:t,type:"waterfall"===ea?"scatter":void 0,unit:$,classNames:ey,styles:eg,series:B,valueFormatter:es}),...ee}),ek,eS,el]})})})});P.displayName="@mantine/charts/BarChart",P.classes=T.Z},46293:function(e,t,n){"use strict";n.d(t,{Q:function(){return p}});var r=n(52322),a=n(82027),i=n(38483),o=n(46690),s=n(27009),l=n(28559),c=n(64438),d={legend:"m_847eaf",legendItem:"m_17da7e62",legendItemColor:"m_6e236e21",legendItemName:"m_8ff56c0d"};let h={},p=(0,a.d)((e,t)=>{let n=(0,i.w)("ChartLegend",h,e),{classNames:a,className:p,style:u,styles:m,unstyled:x,vars:f,payload:j,onHighlight:v,legendPosition:y,mod:g,series:b,showColor:w,...k}=n,S=(0,o.y)({name:"ChartLegend",classes:d,props:n,className:p,style:u,classNames:a,styles:m,unstyled:x});if(!j)return null;let C=j.filter(e=>"none"!==e.color),T=(0,c.v)(b),I=C.map((e,t)=>(0,r.jsxs)("div",{...S("legendItem"),onMouseEnter:()=>v(e.dataKey),onMouseLeave:()=>v(null),"data-without-color":!1===w||void 0,children:[(0,r.jsx)(s.b,{color:e.color,size:12,...S("legendItemColor"),withShadow:!1}),(0,r.jsx)("p",{...S("legendItemName"),children:T[e.dataKey]||e.dataKey})]},t));return(0,r.jsx)(l.x,{ref:t,mod:[{position:y},g],...S("legend"),...k,children:I})});p.displayName="@mantine/charts/ChartLegend"},50425:function(e,t,n){"use strict";n.d(t,{h:function(){return f},X:function(){return u}});var r=n(52322),a=n(82027),i=n(38483),o=n(68755),s=n(46690),l=n(27009),c=n(13588),d=n(28559),h=n(64438),p={tooltip:"m_e4d36c9b",tooltipLabel:"m_7f4bcb19",tooltipBody:"m_3de554dd",tooltipItem:"m_3de8964e",tooltipItemColor:"m_b30369b5",tooltipItemBody:"m_50186d10",tooltipItemName:"m_501dadf9",tooltipItemData:"m_50192318"};function u(e,t){let n=e.filter(e=>"none"!==e.fill||!e.color);return t?n.filter(e=>e.name===t):n}function m(e,t){return"radial"===t||"scatter"===t?Array.isArray(e.value)?e.value[1]-e.value[0]:e.value:Array.isArray(e.payload[e.dataKey])?e.payload[e.dataKey][1]-e.payload[e.dataKey][0]:e.payload[e.dataKey]}let x={type:"area"},f=(0,a.d)((e,t)=>{let n=(0,i.w)("ChartTooltip",x,e),{classNames:a,className:f,style:j,styles:v,unstyled:y,vars:g,payload:b,label:w,unit:k,type:S,segmentId:C,mod:T,series:I,valueFormatter:A,..._}=n,L=(0,o.rZ)(),P=(0,s.y)({name:"ChartTooltip",classes:p,props:n,className:f,style:j,classNames:a,styles:v,unstyled:y});if(!b)return null;let M=u(b,C),E="scatter"===S?b[0]?.payload?.name:null,N=(0,h.v)(I),O=w||E,R=M.map(e=>(0,r.jsxs)("div",{"data-type":S,...P("tooltipItem"),children:[(0,r.jsxs)("div",{...P("tooltipItemBody"),children:[(0,r.jsx)(l.b,{color:(0,c.p)(e.color,L),size:12,...P("tooltipItemColor"),withShadow:!1}),(0,r.jsx)("div",{...P("tooltipItemName"),children:N[e.name]||e.name})]}),(0,r.jsxs)("div",{...P("tooltipItemData"),children:["function"==typeof A?A(m(e,S)):m(e,S),k||e.unit]})]},e.name));return(0,r.jsxs)(d.x,{...P("tooltip"),mod:[{type:S},T],ref:t,..._,children:[O&&(0,r.jsx)("div",{...P("tooltipLabel"),children:O}),(0,r.jsx)("div",{...P("tooltipBody"),children:R})]})});f.displayName="@mantine/charts/ChartTooltip"},38840:function(e,t,n){"use strict";n.d(t,{u:function(){return k}});var r=n(52322),a=n(11011),i=n(18205),o=n(43454),s=n(79941),l=n(21154),c=n(11200),d=n(13588),h=n(58898),p=n(82027),u=n(38483),m=n(68755),x=n(46690),f=n(51477),j=n(28559),v=n(50425),y={root:"m_cd8943fd",label:"m_e3441f39"};let g={withTooltip:!1,withLabelsLine:!0,paddingAngle:0,size:160,strokeWidth:1,startAngle:0,endAngle:360,tooltipDataSource:"all",labelsPosition:"outside",labelsType:"value"},b=(0,c.Z)((e,{strokeColor:t,labelColor:n,withLabels:r,size:a,labelsPosition:i})=>({root:{"--chart-stroke-color":t?(0,d.p)(t,e):void 0,"--chart-labels-color":n?(0,d.p)(n,e):void 0,"--chart-size":r&&"outside"===i?(0,h.h)(a+80):(0,h.h)(a)}})),w=(e,t)=>({cx:n,cy:a,midAngle:i,innerRadius:o,outerRadius:s,value:l,percent:c})=>{let d=Math.PI/180,h=o+(s-o)*.5,p=n+h*Math.cos(-i*d);return(0,r.jsx)("text",{x:p,y:a+h*Math.sin(-i*d),textAnchor:p>n?"start":"end",dominantBaseline:"central",className:y.label,children:"percent"===e?`${(100*c).toFixed(0)}%`:"function"==typeof t?t(l):l})},k=(0,p.d)((e,t)=>{let n=(0,u.w)("PieChart",g,e),{classNames:c,className:h,style:p,styles:k,unstyled:S,vars:C,data:T,withTooltip:I,tooltipAnimationDuration:A,tooltipProps:_,pieProps:L,paddingAngle:P,withLabels:M,withLabelsLine:E,size:N,strokeWidth:O,startAngle:R,endAngle:F,tooltipDataSource:z,children:D,pieChartProps:B,labelsPosition:H,valueFormatter:G,labelsType:q,...K}=n,Z=(0,m.rZ)(),V=(0,x.y)({name:"PieChart",classes:y,props:n,className:h,style:p,classNames:c,styles:k,unstyled:S,vars:C,varsResolver:b}),{resolvedClassNames:W,resolvedStyles:U}=(0,f.h)({classNames:c,styles:k,props:n}),J=T.map((e,t)=>(0,r.jsx)(a.b,{fill:(0,d.p)(e.color,Z),stroke:"var(--chart-stroke-color, var(--mantine-color-body))",strokeWidth:O},t));return(0,r.jsx)(j.x,{ref:t,size:N,...V("root"),...K,children:(0,r.jsx)(i.h,{children:(0,r.jsxs)(o.u,{...B,children:[(0,r.jsx)(s.b,{data:T,innerRadius:0,outerRadius:N/2,dataKey:"value",isAnimationActive:!1,paddingAngle:P,startAngle:R,endAngle:F,label:!!M&&("inside"===H?w(q||"value",G):"percent"===q?({percent:e,x:t,y:n,cx:a,cy:i})=>(0,r.jsx)("text",{x:t,y:n,cx:a,cy:i,textAnchor:t>a?"start":"end",dominantBaseline:"central",fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontFamily:"var(--mantine-font-family)",fontSize:12,children:(0,r.jsx)("tspan",{x:t,children:`${(100*e).toFixed(0)}%`})}):{fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontSize:12,fontFamily:"var(--mantine-font-family)"}),labelLine:!!E&&"outside"===H&&{stroke:"var(--chart-label-color, var(--mantine-color-dimmed))",strokeWidth:1},...L,children:J}),I&&(0,r.jsx)(l.u,{animationDuration:A,isAnimationActive:!1,content:({payload:e})=>(0,r.jsx)(v.h,{payload:T,classNames:W,styles:U,type:"radial",segmentId:"segment"===z?e?.[0]?.name:void 0,valueFormatter:G}),..._}),D]})})})});k.displayName="@mantine/charts/PieChart",k.classes=y},22309:function(e,t,n){"use strict";n.d(t,{H:function(){return g}});var r=n(52322),a=n(53891),i=n(18205),o=n(62411),s=n(25076),l=n(79669),c=n(10086),d=n(11200),h=n(13588),p=n(82027),u=n(38483),m=n(68755),x=n(46690),f=n(28559),j={root:"m_1f271cf7",container:"m_cf06f58c"};let v={withPolarGrid:!0,withPolarAngleAxis:!0,withPolarRadiusAxis:!1},y=(0,d.Z)((e,{gridColor:t,textColor:n})=>({root:{"--chart-grid-color":t?(0,h.p)(t,e):void 0,"--chart-text-color":n?(0,h.p)(n,e):void 0}})),g=(0,p.d)((e,t)=>{let n=(0,u.w)("RadarChart",v,e),{classNames:d,className:p,style:g,styles:b,unstyled:w,vars:k,data:S,series:C,dataKey:T,gridColor:I,textColor:A,radarProps:_,radarChartProps:L,polarGridProps:P,polarAngleAxisProps:M,polarRadiusAxisProps:E,withPolarGrid:N,withPolarAngleAxis:O,withPolarRadiusAxis:R,children:F,...z}=n,D=(0,m.rZ)(),B=(0,x.y)({name:"RadarChart",classes:j,props:n,className:p,style:g,classNames:d,styles:b,unstyled:w,vars:k,varsResolver:y}),H=C.map((e,t)=>(0,r.jsx)(a.F,{name:e.name,dataKey:e.name,stroke:(0,h.p)(e.strokeColor||e.color,D),fill:(0,h.p)(e.color,D),fillOpacity:e.opacity||.4,isAnimationActive:!1,..."function"==typeof _?_(e):_},t));return(0,r.jsx)(f.x,{ref:t,...B("root"),...z,children:(0,r.jsx)(i.h,{...B("container"),children:(0,r.jsxs)(o.H,{data:S,...L,children:[N&&(0,r.jsx)(s.n,{stroke:"var(--chart-grid-color)",...P}),O&&(0,r.jsx)(l.I,{dataKey:T,...M}),R&&(0,r.jsx)(c.S,{stroke:"var(--chart-grid-color)",...E}),H,F]})})})});g.displayName="@mantine/charts/RadarChart",g.classes=j},77533:function(e,t,n){"use strict";n.d(t,{b:function(){return v}});var r=n(52322),a=n(2784),i=n(18205),o=n(50603),s=n(81073),l=n(11200),c=n(13588),d=n(82027),h=n(38483),p=n(46690),u=n(28559),m=n(32125);let x={},f={withGradient:!0,connectNulls:!0,fillOpacity:.6,strokeWidth:2,curveType:"linear"},j=(0,l.Z)((e,{color:t,data:n,trendColors:r})=>({root:{"--chart-color":r?(0,c.p)(function(e,t){let n=e[0],r=e[e.length-1];return nr?t.negative:t.neutral||t.positive}(n,r),e):t?(0,c.p)(t,e):void 0}})),v=(0,d.d)((e,t)=>{let n=(0,h.w)("Sparkline",f,e),{classNames:l,className:c,style:d,styles:v,unstyled:y,vars:g,data:b,withGradient:w,fillOpacity:k,curveType:S,strokeWidth:C,trendColors:T,connectNulls:I,areaProps:A,..._}=n,L=(0,p.y)({name:"Sparkline",classes:x,props:n,className:c,style:d,classNames:l,styles:v,unstyled:y,vars:g,varsResolver:j}),P=(0,a.useId)(),M=(0,a.useMemo)(()=>b.map((e,t)=>({value:e,index:t})),[b]);return(0,r.jsx)(u.x,{ref:t,...L("root"),..._,dir:"ltr",children:(0,r.jsx)(i.h,{children:(0,r.jsxs)(o.T,{data:M,children:[(0,r.jsx)(s.u,{dataKey:"value",type:S,fill:`url(#${P})`,stroke:"var(--chart-color, var(--mantine-color-blue-filled))",isAnimationActive:!1,connectNulls:I,strokeWidth:C,fillOpacity:1,...A}),(0,r.jsx)("defs",{children:(0,r.jsx)(m.v,{id:P,color:"var(--chart-color, var(--mantine-color-blue-filled))",fillOpacity:k,withGradient:w})})]})})})});v.displayName="@mantine/charts/Sparkline",v.classes=x},7064:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={root:"m_a50f3e58",container:"m_af9188cb",grid:"m_a50a48bc",axis:"m_a507a517",axisLabel:"m_2293801d"}},64438:function(e,t,n){"use strict";function r(e){return e?e.reduce((e,t)=>(e[t.name]=t.label,e),{}):{}}n.d(t,{v:function(){return r}})},79649:function(e,t,n){"use strict";n.d(t,{P:function(){return v}});var r=n(52322),a=n(2784),i=n(66178),o=n(9341),s=n(85057),l=n(51477),c=n(38483),d=n(82027),h=n(29995),p=n(77606),u=n(61324),m=n(66958),x=n(56237),f=n(73063);let j={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},v=(0,d.d)((e,t)=>{let n=(0,c.w)("Select",j,e),{classNames:d,styles:v,unstyled:y,vars:g,dropdownOpened:b,defaultDropdownOpened:w,onDropdownClose:k,onDropdownOpen:S,onFocus:C,onBlur:T,onClick:I,onChange:A,data:_,value:L,defaultValue:P,selectFirstOptionOnChange:M,onOptionSubmit:E,comboboxProps:N,readOnly:O,disabled:R,filter:F,limit:z,withScrollArea:D,maxDropdownHeight:B,size:H,searchable:G,rightSection:q,checkIconPosition:K,withCheckIcon:Z,nothingFoundMessage:V,name:W,form:U,searchValue:J,defaultSearchValue:$,onSearchChange:Y,allowDeselect:X,error:Q,rightSectionPointerEvents:ee,id:et,clearable:en,clearButtonProps:er,hiddenInputProps:ea,renderOption:ei,onClear:eo,autoComplete:es,scrollAreaProps:el,...ec}=n,ed=(0,a.useMemo)(()=>(0,h.R)(_),[_]),eh=(0,a.useMemo)(()=>(0,p.g)(ed),[ed]),ep=(0,i.M)(et),[eu,em,ex]=(0,o.C)({value:L,defaultValue:P,finalValue:null,onChange:A}),ef="string"==typeof eu?eh[eu]:void 0,ej=(0,s.D)(ef),[ev,ey]=(0,o.C)({value:J,defaultValue:$,finalValue:ef?ef.label:"",onChange:Y}),eg=(0,x.K)({opened:b,defaultOpened:w,onDropdownOpen:()=>{S?.(),eg.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{k?.(),eg.resetSelectedOption()}}),{resolvedClassNames:eb,resolvedStyles:ew}=(0,l.h)({props:n,styles:v,classNames:d});(0,a.useEffect)(()=>{M&&eg.selectFirstOption()},[M,eu]),(0,a.useEffect)(()=>{null===L&&ey(""),"string"==typeof L&&ef&&(ej?.value!==ef.value||ej?.label!==ef.label)&&ey(ef.label)},[L,ef]);let ek=en&&!!eu&&!R&&!O&&(0,r.jsx)(u.h.ClearButton,{size:H,...er,onClear:()=>{em(null,null),ey(""),eo?.()}});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(u.h,{store:eg,__staticSelector:"Select",classNames:eb,styles:ew,unstyled:y,readOnly:O,onOptionSubmit:e=>{E?.(e);let t=X&&eh[e].value===eu?null:eh[e],n=t?t.value:null;em(n,t),ex||ey("string"==typeof n&&t?.label||""),eg.closeDropdown()},size:H,...N,children:[(0,r.jsx)(u.h.Target,{targetType:G?"input":"button",autoComplete:es,children:(0,r.jsx)(f.M,{id:ep,ref:t,rightSection:q||ek||(0,r.jsx)(u.h.Chevron,{size:H,error:Q,unstyled:y}),rightSectionPointerEvents:ee||(ek?"all":"none"),...ec,size:H,__staticSelector:"Select",disabled:R,readOnly:O||!G,value:ev,onChange:e=>{ey(e.currentTarget.value),eg.openDropdown(),M&&eg.selectFirstOption()},onFocus:e=>{G&&eg.openDropdown(),C?.(e)},onBlur:e=>{G&&eg.closeDropdown(),ey(null!=eu&&eh[eu]?.label||""),T?.(e)},onClick:e=>{G?eg.openDropdown():eg.toggleDropdown(),I?.(e)},classNames:eb,styles:ew,unstyled:y,pointer:!G,error:Q})}),(0,r.jsx)(m.r,{data:ed,hidden:O||R,filter:F,search:ev,limit:z,hiddenWhenEmpty:!G||!V,withScrollArea:D,maxDropdownHeight:B,filterOptions:G&&ef?.label!==ev,value:eu,checkIconPosition:K,withCheckIcon:Z,nothingFoundMessage:V,unstyled:y,labelId:ec.label?`${ep}-label`:void 0,"aria-label":ec.label?void 0:ec["aria-label"],renderOption:ei,scrollAreaProps:el})]}),(0,r.jsx)(u.h.HiddenInput,{value:eu,name:W,form:U,disabled:R,...ea})]})});v.classes={...f.M.classes,...u.h.classes},v.displayName="@mantine/core/Select"},3900:function(e,t,n){"use strict";n.d(t,{q:function(){return a}});var r=n(2784);function a(e=!1,t){let{onOpen:n,onClose:a}=t||{},[i,o]=(0,r.useState)(e),s=(0,r.useCallback)(()=>{o(e=>e||(n?.(),!0))},[n]),l=(0,r.useCallback)(()=>{o(e=>e?(a?.(),!1):e)},[a]),c=(0,r.useCallback)(()=>{i?l():s()},[l,s,i]);return[i,{open:s,close:l,toggle:c}]}},85057:function(e,t,n){"use strict";n.d(t,{D:function(){return a}});var r=n(2784);function a(e){let t=(0,r.useRef)();return(0,r.useEffect)(()=>{t.current=e},[e]),t.current}}},function(e){e.O(0,[72812,47091,75417,61177,16717,50603,59966,43454,29985,37355,97054,66748,11340,61324,76124,77413,92888,49774,40179],function(){return e(e.s=65131)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/charts/pie-chart-8c32394f82007c7e.js b/_next/static/chunks/pages/charts/pie-chart-b84e9fe8318ffa1a.js similarity index 84% rename from _next/static/chunks/pages/charts/pie-chart-8c32394f82007c7e.js rename to _next/static/chunks/pages/charts/pie-chart-b84e9fe8318ffa1a.js index bc57638725e..86d179166c1 100644 --- a/_next/static/chunks/pages/charts/pie-chart-8c32394f82007c7e.js +++ b/_next/static/chunks/pages/charts/pie-chart-b84e9fe8318ffa1a.js @@ -105,4 +105,4 @@ export const data = [ { name: 'Japan', value: 300, color: 'teal.6' }, { name: 'Other', value: 200, color: 'gray.6' }, ]; -`},50425:function(e,t,a){"use strict";a.d(t,{h:function(){return f},X:function(){return u}});var o=a(52322),n=a(82027),r=a(38483),i=a(68755),l=a(46690),s=a(27009),d=a(13588),c=a(28559),m=a(64438),h={tooltip:"m_e4d36c9b",tooltipLabel:"m_7f4bcb19",tooltipBody:"m_3de554dd",tooltipItem:"m_3de8964e",tooltipItemColor:"m_b30369b5",tooltipItemBody:"m_50186d10",tooltipItemName:"m_501dadf9",tooltipItemData:"m_50192318"};function u(e,t){let a=e.filter(e=>"none"!==e.fill||!e.color);return t?a.filter(e=>e.name===t):a}function p(e,t){return"radial"===t||"scatter"===t?Array.isArray(e.value)?e.value[1]-e.value[0]:e.value:Array.isArray(e.payload[e.dataKey])?e.payload[e.dataKey][1]-e.payload[e.dataKey][0]:e.payload[e.dataKey]}let x={type:"area"},f=(0,n.d)((e,t)=>{let a=(0,r.w)("ChartTooltip",x,e),{classNames:n,className:f,style:g,styles:j,unstyled:y,vars:v,payload:b,label:C,unit:w,type:P,segmentId:_,mod:N,series:D,valueFormatter:A,...k}=a,S=(0,i.rZ)(),T=(0,l.y)({name:"ChartTooltip",classes:h,props:a,className:f,style:g,classNames:n,styles:j,unstyled:y});if(!b)return null;let I=u(b,_),z="scatter"===P?b[0]?.payload?.name:null,V=(0,m.v)(D),L=C||z,U=I.map(e=>(0,o.jsxs)("div",{"data-type":P,...T("tooltipItem"),children:[(0,o.jsxs)("div",{...T("tooltipItemBody"),children:[(0,o.jsx)(s.b,{color:(0,d.p)(e.color,S),size:12,...T("tooltipItemColor"),withShadow:!1}),(0,o.jsx)("div",{...T("tooltipItemName"),children:V[e.name]||e.name})]}),(0,o.jsxs)("div",{...T("tooltipItemData"),children:["function"==typeof A?A(p(e,P)):p(e,P),w||e.unit]})]},e.name));return(0,o.jsxs)(c.x,{...T("tooltip"),mod:[{type:P},N],ref:t,...k,children:[L&&(0,o.jsx)("div",{...T("tooltipLabel"),children:L}),(0,o.jsx)("div",{...T("tooltipBody"),children:U})]})});f.displayName="@mantine/charts/ChartTooltip"},38840:function(e,t,a){"use strict";a.d(t,{u:function(){return w}});var o=a(52322),n=a(11011),r=a(18205),i=a(43454),l=a(79941),s=a(21154),d=a(11200),c=a(13588),m=a(58898),h=a(82027),u=a(38483),p=a(68755),x=a(46690),f=a(51477),g=a(28559),j=a(50425),y={root:"m_cd8943fd",label:"m_e3441f39"};let v={withTooltip:!1,withLabelsLine:!0,paddingAngle:0,size:160,strokeWidth:1,startAngle:0,endAngle:360,tooltipDataSource:"all",labelsPosition:"outside",labelsType:"value"},b=(0,d.Z)((e,{strokeColor:t,labelColor:a,withLabels:o,size:n,labelsPosition:r})=>({root:{"--chart-stroke-color":t?(0,c.p)(t,e):void 0,"--chart-labels-color":a?(0,c.p)(a,e):void 0,"--chart-size":o&&"outside"===r?(0,m.h)(n+80):(0,m.h)(n)}})),C=e=>({cx:t,cy:a,midAngle:n,innerRadius:r,outerRadius:i,value:l,percent:s})=>{let d=Math.PI/180,c=r+(i-r)*.5,m=t+c*Math.cos(-n*d);return(0,o.jsx)("text",{x:m,y:a+c*Math.sin(-n*d),textAnchor:m>t?"start":"end",dominantBaseline:"central",className:y.label,children:"percent"===e?`${(100*s).toFixed(0)}%`:l})},w=(0,h.d)((e,t)=>{let a=(0,u.w)("PieChart",v,e),{classNames:d,className:m,style:h,styles:w,unstyled:P,vars:_,data:N,withTooltip:D,tooltipAnimationDuration:A,tooltipProps:k,pieProps:S,paddingAngle:T,withLabels:I,withLabelsLine:z,size:V,strokeWidth:L,startAngle:U,endAngle:B,tooltipDataSource:E,children:F,pieChartProps:O,labelsPosition:K,valueFormatter:W,labelsType:Z,...G}=a,M=(0,p.rZ)(),X=(0,x.y)({name:"PieChart",classes:y,props:a,className:m,style:h,classNames:d,styles:w,unstyled:P,vars:_,varsResolver:b}),{resolvedClassNames:Y,resolvedStyles:$}=(0,f.h)({classNames:d,styles:w,props:a}),J=N.map((e,t)=>(0,o.jsx)(n.b,{fill:(0,c.p)(e.color,M),stroke:"var(--chart-stroke-color, var(--mantine-color-body))",strokeWidth:L},t));return(0,o.jsx)(g.x,{ref:t,size:V,...X("root"),...G,children:(0,o.jsx)(r.h,{children:(0,o.jsxs)(i.u,{...O,children:[(0,o.jsx)(l.b,{data:N,innerRadius:0,outerRadius:V/2,dataKey:"value",isAnimationActive:!1,paddingAngle:T,startAngle:U,endAngle:B,label:!!I&&("inside"===K?C(Z||"value"):"percent"===Z?({percent:e,x:t,y:a,cx:n,cy:r})=>(0,o.jsx)("text",{x:t,y:a,cx:n,cy:r,textAnchor:t>n?"start":"end",dominantBaseline:"central",fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontFamily:"var(--mantine-font-family)",fontSize:12,children:(0,o.jsx)("tspan",{x:t,children:`${(100*e).toFixed(0)}%`})}):{fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontSize:12,fontFamily:"var(--mantine-font-family)"}),labelLine:!!z&&"outside"===K&&{stroke:"var(--chart-label-color, var(--mantine-color-dimmed))",strokeWidth:1},...S,children:J}),D&&(0,o.jsx)(s.u,{animationDuration:A,isAnimationActive:!1,content:({payload:e})=>(0,o.jsx)(j.h,{payload:N,classNames:Y,styles:$,type:"radial",segmentId:"segment"===E?e?.[0]?.name:void 0,valueFormatter:W}),...k}),F]})})})});w.displayName="@mantine/charts/PieChart",w.classes=y},64438:function(e,t,a){"use strict";function o(e){return e?e.reduce((e,t)=>(e[t.name]=t.label,e),{}):{}}a.d(t,{v:function(){return o}})}},function(e){e.O(0,[61177,16717,59966,43454,66748,11340,92888,49774,40179],function(){return e(e.s=9236)}),_N_E=e.O()}]); \ No newline at end of file +`},50425:function(e,t,a){"use strict";a.d(t,{h:function(){return f},X:function(){return u}});var o=a(52322),n=a(82027),r=a(38483),i=a(68755),l=a(46690),s=a(27009),d=a(13588),c=a(28559),m=a(64438),h={tooltip:"m_e4d36c9b",tooltipLabel:"m_7f4bcb19",tooltipBody:"m_3de554dd",tooltipItem:"m_3de8964e",tooltipItemColor:"m_b30369b5",tooltipItemBody:"m_50186d10",tooltipItemName:"m_501dadf9",tooltipItemData:"m_50192318"};function u(e,t){let a=e.filter(e=>"none"!==e.fill||!e.color);return t?a.filter(e=>e.name===t):a}function p(e,t){return"radial"===t||"scatter"===t?Array.isArray(e.value)?e.value[1]-e.value[0]:e.value:Array.isArray(e.payload[e.dataKey])?e.payload[e.dataKey][1]-e.payload[e.dataKey][0]:e.payload[e.dataKey]}let x={type:"area"},f=(0,n.d)((e,t)=>{let a=(0,r.w)("ChartTooltip",x,e),{classNames:n,className:f,style:g,styles:j,unstyled:y,vars:v,payload:b,label:C,unit:w,type:P,segmentId:_,mod:N,series:D,valueFormatter:A,...k}=a,S=(0,i.rZ)(),T=(0,l.y)({name:"ChartTooltip",classes:h,props:a,className:f,style:g,classNames:n,styles:j,unstyled:y});if(!b)return null;let I=u(b,_),z="scatter"===P?b[0]?.payload?.name:null,V=(0,m.v)(D),L=C||z,U=I.map(e=>(0,o.jsxs)("div",{"data-type":P,...T("tooltipItem"),children:[(0,o.jsxs)("div",{...T("tooltipItemBody"),children:[(0,o.jsx)(s.b,{color:(0,d.p)(e.color,S),size:12,...T("tooltipItemColor"),withShadow:!1}),(0,o.jsx)("div",{...T("tooltipItemName"),children:V[e.name]||e.name})]}),(0,o.jsxs)("div",{...T("tooltipItemData"),children:["function"==typeof A?A(p(e,P)):p(e,P),w||e.unit]})]},e.name));return(0,o.jsxs)(c.x,{...T("tooltip"),mod:[{type:P},N],ref:t,...k,children:[L&&(0,o.jsx)("div",{...T("tooltipLabel"),children:L}),(0,o.jsx)("div",{...T("tooltipBody"),children:U})]})});f.displayName="@mantine/charts/ChartTooltip"},38840:function(e,t,a){"use strict";a.d(t,{u:function(){return w}});var o=a(52322),n=a(11011),r=a(18205),i=a(43454),l=a(79941),s=a(21154),d=a(11200),c=a(13588),m=a(58898),h=a(82027),u=a(38483),p=a(68755),x=a(46690),f=a(51477),g=a(28559),j=a(50425),y={root:"m_cd8943fd",label:"m_e3441f39"};let v={withTooltip:!1,withLabelsLine:!0,paddingAngle:0,size:160,strokeWidth:1,startAngle:0,endAngle:360,tooltipDataSource:"all",labelsPosition:"outside",labelsType:"value"},b=(0,d.Z)((e,{strokeColor:t,labelColor:a,withLabels:o,size:n,labelsPosition:r})=>({root:{"--chart-stroke-color":t?(0,c.p)(t,e):void 0,"--chart-labels-color":a?(0,c.p)(a,e):void 0,"--chart-size":o&&"outside"===r?(0,m.h)(n+80):(0,m.h)(n)}})),C=(e,t)=>({cx:a,cy:n,midAngle:r,innerRadius:i,outerRadius:l,value:s,percent:d})=>{let c=Math.PI/180,m=i+(l-i)*.5,h=a+m*Math.cos(-r*c);return(0,o.jsx)("text",{x:h,y:n+m*Math.sin(-r*c),textAnchor:h>a?"start":"end",dominantBaseline:"central",className:y.label,children:"percent"===e?`${(100*d).toFixed(0)}%`:"function"==typeof t?t(s):s})},w=(0,h.d)((e,t)=>{let a=(0,u.w)("PieChart",v,e),{classNames:d,className:m,style:h,styles:w,unstyled:P,vars:_,data:N,withTooltip:D,tooltipAnimationDuration:A,tooltipProps:k,pieProps:S,paddingAngle:T,withLabels:I,withLabelsLine:z,size:V,strokeWidth:L,startAngle:U,endAngle:B,tooltipDataSource:E,children:F,pieChartProps:O,labelsPosition:K,valueFormatter:W,labelsType:Z,...G}=a,M=(0,p.rZ)(),X=(0,x.y)({name:"PieChart",classes:y,props:a,className:m,style:h,classNames:d,styles:w,unstyled:P,vars:_,varsResolver:b}),{resolvedClassNames:Y,resolvedStyles:$}=(0,f.h)({classNames:d,styles:w,props:a}),J=N.map((e,t)=>(0,o.jsx)(n.b,{fill:(0,c.p)(e.color,M),stroke:"var(--chart-stroke-color, var(--mantine-color-body))",strokeWidth:L},t));return(0,o.jsx)(g.x,{ref:t,size:V,...X("root"),...G,children:(0,o.jsx)(r.h,{children:(0,o.jsxs)(i.u,{...O,children:[(0,o.jsx)(l.b,{data:N,innerRadius:0,outerRadius:V/2,dataKey:"value",isAnimationActive:!1,paddingAngle:T,startAngle:U,endAngle:B,label:!!I&&("inside"===K?C(Z||"value",W):"percent"===Z?({percent:e,x:t,y:a,cx:n,cy:r})=>(0,o.jsx)("text",{x:t,y:a,cx:n,cy:r,textAnchor:t>n?"start":"end",dominantBaseline:"central",fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontFamily:"var(--mantine-font-family)",fontSize:12,children:(0,o.jsx)("tspan",{x:t,children:`${(100*e).toFixed(0)}%`})}):{fill:"var(--chart-labels-color, var(--mantine-color-dimmed))",fontSize:12,fontFamily:"var(--mantine-font-family)"}),labelLine:!!z&&"outside"===K&&{stroke:"var(--chart-label-color, var(--mantine-color-dimmed))",strokeWidth:1},...S,children:J}),D&&(0,o.jsx)(s.u,{animationDuration:A,isAnimationActive:!1,content:({payload:e})=>(0,o.jsx)(j.h,{payload:N,classNames:Y,styles:$,type:"radial",segmentId:"segment"===E?e?.[0]?.name:void 0,valueFormatter:W}),...k}),F]})})})});w.displayName="@mantine/charts/PieChart",w.classes=y},64438:function(e,t,a){"use strict";function o(e){return e?e.reduce((e,t)=>(e[t.name]=t.label,e),{}):{}}a.d(t,{v:function(){return o}})}},function(e){e.O(0,[61177,16717,59966,43454,66748,11340,92888,49774,40179],function(){return e(e.s=9236)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/password-input-11dab0bacaa2a38a.js b/_next/static/chunks/pages/core/password-input-21843b181dfe342b.js similarity index 79% rename from _next/static/chunks/pages/core/password-input-11dab0bacaa2a38a.js rename to _next/static/chunks/pages/core/password-input-21843b181dfe342b.js index 69500e450c6..92fa7ed5148 100644 --- a/_next/static/chunks/pages/core/password-input-11dab0bacaa2a38a.js +++ b/_next/static/chunks/pages/core/password-input-21843b181dfe342b.js @@ -199,4 +199,4 @@ function Demo() { * * This source code is licensed under the MIT license. * See the LICENSE file in the root directory of this source tree. - */var n=(0,r(73681).Z)("outline","x","IconX",[["path",{d:"M18 6l-12 12",key:"svg-0"}],["path",{d:"M6 6l12 12",key:"svg-1"}]])},76528:function(e,t,r){"use strict";r.d(t,{Mt:function(){return n},nW:function(){return o},pc:function(){return s}});let n=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],o=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],s=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},60284:function(e,t,r){"use strict";r.d(t,{W:function(){return f}});var n=r(52322),o=r(40489),s=r(66178),i=r(9341);r(2784);var l=r(91482),a=r(11200),c=r(51477),d=r(46690),p=r(38483),u=r(97072),h=r(82027),m=r(54813),g=r(6941),b=r(73063),v={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let y={visibilityToggleIcon:({reveal:e})=>(0,n.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,n.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},x=(0,a.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,l.ap)(t,"psi-icon-size"),"--psi-button-size":(0,l.ap)(t,"psi-button-size")}})),f=(0,h.d)((e,t)=>{let r=(0,p.w)("PasswordInput",y,e),{classNames:l,className:a,style:h,styles:b,unstyled:f,vars:w,required:j,error:I,leftSection:P,disabled:C,id:V,variant:k,inputContainer:S,description:W,label:z,size:D,errorProps:T,descriptionProps:_,labelProps:E,withAsterisk:M,inputWrapperOrder:Z,wrapperProps:N,radius:L,rightSection:q,rightSectionWidth:A,rightSectionPointerEvents:R,leftSectionWidth:B,visible:O,defaultVisible:F,onVisibilityChange:X,visibilityToggleIcon:$,visibilityToggleButtonProps:Y,rightSectionProps:J,leftSectionProps:K,leftSectionPointerEvents:U,mod:G,...H}=r,Q=(0,s.M)(V),[ee,et]=(0,i.C)({value:O,defaultValue:F,finalValue:!1,onChange:X}),er=()=>et(!ee),en=(0,d.y)({name:"PasswordInput",classes:v,props:r,className:a,style:h,classNames:l,styles:b,unstyled:f,vars:w,varsResolver:x}),{resolvedClassNames:eo,resolvedStyles:es}=(0,c.h)({classNames:l,styles:b,props:r}),{styleProps:ei,rest:el}=(0,u.c)(H),ea=(0,n.jsx)(m.A,{...en("visibilityToggle"),disabled:C,radius:L,"aria-hidden":!Y,tabIndex:-1,...Y,variant:"subtle",color:"gray",unstyled:f,onMouseDown:e=>{e.preventDefault(),Y?.onMouseDown?.(e),er()},onKeyDown:e=>{Y?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),er())},children:(0,n.jsx)($,{reveal:ee})});return(0,n.jsx)(g.I.Wrapper,{required:j,id:Q,label:z,error:I,description:W,size:D,classNames:eo,styles:es,__staticSelector:"PasswordInput",errorProps:T,descriptionProps:_,unstyled:f,withAsterisk:M,inputWrapperOrder:Z,inputContainer:S,variant:k,labelProps:{...E,htmlFor:Q},mod:G,...en("root"),...ei,...N,children:(0,n.jsx)(g.I,{component:"div",error:I,leftSection:P,size:D,classNames:{...eo,input:(0,o.Z)(v.input,eo.input)},styles:es,radius:L,disabled:C,__staticSelector:"PasswordInput",rightSectionWidth:A,rightSection:q??ea,variant:k,unstyled:f,leftSectionWidth:B,rightSectionPointerEvents:R||"all",rightSectionProps:J,leftSectionProps:K,leftSectionPointerEvents:U,withAria:!1,children:(0,n.jsx)("input",{required:j,"data-invalid":!!I||void 0,"data-with-left-section":!!P||void 0,...en("innerInput"),disabled:C,id:Q,ref:t,...el,autoComplete:el.autoComplete||"off",type:ee?"text":"password"})})})});f.classes={...b.M.classes,...v},f.displayName="@mantine/core/PasswordInput"},45757:function(e,t,r){"use strict";r.d(t,{E:function(){return V}});var n=r(52322);r(2784);var o=r(51477),s=r(38483),i=r(82027),l=r(28559);let[a,c]=(0,r(89106).R)("Progress.Root component was not found in tree");var d={root:"m_db6d6462",section:"m_2242eb65","stripes-animation":"m_81a374bd",label:"m_91e40b74"};let p={},u=(0,i.d)((e,t)=>{let{classNames:r,className:o,style:i,styles:a,vars:d,...u}=(0,s.w)("ProgressLabel",p,e),h=c();return(0,n.jsx)(l.x,{ref:t,...h.getStyles("label",{className:o,style:i,classNames:r,styles:a}),...u})});u.classes=d,u.displayName="@mantine/core/ProgressLabel";var h=r(91482),m=r(11200),g=r(46690);let b={},v=(0,m.Z)((e,{size:t,radius:r,transitionDuration:n})=>({root:{"--progress-size":(0,h.ap)(t,"progress-size"),"--progress-radius":void 0===r?void 0:(0,h.H5)(r),"--progress-transition-duration":"number"==typeof n?`${n}ms`:void 0}})),y=(0,i.d)((e,t)=>{let r=(0,s.w)("ProgressRoot",b,e),{classNames:o,className:i,style:c,styles:p,unstyled:u,vars:h,autoContrast:m,transitionDuration:y,...x}=r,f=(0,g.y)({name:"Progress",classes:d,props:r,className:i,style:c,classNames:o,styles:p,unstyled:u,vars:h,varsResolver:v});return(0,n.jsx)(a,{value:{getStyles:f,autoContrast:m},children:(0,n.jsx)(l.x,{ref:t,...f("root"),...x})})});y.classes=d,y.displayName="@mantine/core/ProgressRoot";var x=r(13588),f=r(39568),w=r(90006),j=r(68755);let I={withAria:!0},P=(0,i.d)((e,t)=>{let{classNames:r,className:o,style:i,styles:a,vars:d,value:p,withAria:u,color:h,striped:m,animated:g,mod:b,...v}=(0,s.w)("ProgressSection",I,e),y=c(),P=(0,j.rZ)(),C=u?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":p,"aria-valuetext":`${p}%`}:{};return(0,n.jsx)(l.x,{ref:t,...y.getStyles("section",{className:o,classNames:r,styles:a,style:i}),...v,...C,mod:[{striped:m||g,animated:g},b],__vars:{"--progress-section-width":`${p}%`,"--progress-section-color":(0,x.p)(h,P),"--progress-label-color":(0,w.o)(y.autoContrast,P)?(0,f.R)({color:h,theme:P,autoContrast:y.autoContrast}):void 0}})});P.classes=d,P.displayName="@mantine/core/ProgressSection";let C={},V=(0,i.d)((e,t)=>{let r=(0,s.w)("Progress",C,e),{value:i,classNames:l,styles:a,vars:c,color:d,striped:p,animated:u,"aria-label":h,...m}=r,{resolvedClassNames:g,resolvedStyles:b}=(0,o.h)({classNames:l,styles:a,props:r});return(0,n.jsx)(y,{ref:t,classNames:g,styles:b,vars:c,...m,children:(0,n.jsx)(P,{value:i,color:d,striped:p,animated:u,"aria-label":h})})});V.classes=d,V.displayName="@mantine/core/Progress",V.Section=P,V.Root=y,V.Label=u},3900:function(e,t,r){"use strict";r.d(t,{q:function(){return o}});var n=r(2784);function o(e=!1,t){let{onOpen:r,onClose:o}=t||{},[s,i]=(0,n.useState)(e),l=(0,n.useCallback)(()=>{i(e=>e||(r?.(),!0))},[r]),a=(0,n.useCallback)(()=>{i(e=>e?(o?.(),!1):e)},[o]),c=(0,n.useCallback)(()=>{s?a():l()},[a,l,s]);return[s,{open:l,close:a,toggle:c}]}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=83114)}),_N_E=e.O()}]); \ No newline at end of file + */var n=(0,r(73681).Z)("outline","x","IconX",[["path",{d:"M18 6l-12 12",key:"svg-0"}],["path",{d:"M6 6l12 12",key:"svg-1"}]])},76528:function(e,t,r){"use strict";r.d(t,{Mt:function(){return n},nW:function(){return o},pc:function(){return s}});let n=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],o=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],s=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},60284:function(e,t,r){"use strict";r.d(t,{W:function(){return f}});var n=r(52322),o=r(40489),s=r(66178),i=r(9341);r(2784);var l=r(91482),a=r(11200),c=r(51477),d=r(46690),p=r(38483),u=r(97072),h=r(82027),m=r(54813),g=r(6941),b=r(73063),v={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let y={visibilityToggleIcon:({reveal:e})=>(0,n.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,n.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},x=(0,a.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,l.ap)(t,"psi-icon-size"),"--psi-button-size":(0,l.ap)(t,"psi-button-size")}})),f=(0,h.d)((e,t)=>{let r=(0,p.w)("PasswordInput",y,e),{classNames:l,className:a,style:h,styles:b,unstyled:f,vars:w,required:j,error:I,leftSection:P,disabled:C,id:V,variant:k,inputContainer:S,description:W,label:z,size:D,errorProps:T,descriptionProps:_,labelProps:E,withAsterisk:M,inputWrapperOrder:Z,wrapperProps:N,radius:L,rightSection:q,rightSectionWidth:A,rightSectionPointerEvents:R,leftSectionWidth:B,visible:O,defaultVisible:F,onVisibilityChange:X,visibilityToggleIcon:$,visibilityToggleButtonProps:Y,rightSectionProps:J,leftSectionProps:K,leftSectionPointerEvents:U,withErrorStyles:G,mod:H,...Q}=r,ee=(0,s.M)(V),[et,er]=(0,i.C)({value:O,defaultValue:F,finalValue:!1,onChange:X}),en=()=>er(!et),eo=(0,d.y)({name:"PasswordInput",classes:v,props:r,className:a,style:h,classNames:l,styles:b,unstyled:f,vars:w,varsResolver:x}),{resolvedClassNames:es,resolvedStyles:ei}=(0,c.h)({classNames:l,styles:b,props:r}),{styleProps:el,rest:ea}=(0,u.c)(Q),ec=(0,n.jsx)(m.A,{...eo("visibilityToggle"),disabled:C,radius:L,"aria-hidden":!Y,tabIndex:-1,...Y,variant:"subtle",color:"gray",unstyled:f,onMouseDown:e=>{e.preventDefault(),Y?.onMouseDown?.(e),en()},onKeyDown:e=>{Y?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),en())},children:(0,n.jsx)($,{reveal:et})});return(0,n.jsx)(g.I.Wrapper,{required:j,id:ee,label:z,error:I,description:W,size:D,classNames:es,styles:ei,__staticSelector:"PasswordInput",errorProps:T,descriptionProps:_,unstyled:f,withAsterisk:M,inputWrapperOrder:Z,inputContainer:S,variant:k,labelProps:{...E,htmlFor:ee},mod:H,...eo("root"),...el,...N,children:(0,n.jsx)(g.I,{component:"div",error:I,leftSection:P,size:D,classNames:{...es,input:(0,o.Z)(v.input,es.input)},styles:ei,radius:L,disabled:C,__staticSelector:"PasswordInput",rightSectionWidth:A,rightSection:q??ec,variant:k,unstyled:f,leftSectionWidth:B,rightSectionPointerEvents:R||"all",rightSectionProps:J,leftSectionProps:K,leftSectionPointerEvents:U,withAria:!1,withErrorStyles:G,children:(0,n.jsx)("input",{required:j,"data-invalid":!!I||void 0,"data-with-left-section":!!P||void 0,...eo("innerInput"),disabled:C,id:ee,ref:t,...ea,autoComplete:ea.autoComplete||"off",type:et?"text":"password"})})})});f.classes={...b.M.classes,...v},f.displayName="@mantine/core/PasswordInput"},45757:function(e,t,r){"use strict";r.d(t,{E:function(){return V}});var n=r(52322);r(2784);var o=r(51477),s=r(38483),i=r(82027),l=r(28559);let[a,c]=(0,r(89106).R)("Progress.Root component was not found in tree");var d={root:"m_db6d6462",section:"m_2242eb65","stripes-animation":"m_81a374bd",label:"m_91e40b74"};let p={},u=(0,i.d)((e,t)=>{let{classNames:r,className:o,style:i,styles:a,vars:d,...u}=(0,s.w)("ProgressLabel",p,e),h=c();return(0,n.jsx)(l.x,{ref:t,...h.getStyles("label",{className:o,style:i,classNames:r,styles:a}),...u})});u.classes=d,u.displayName="@mantine/core/ProgressLabel";var h=r(91482),m=r(11200),g=r(46690);let b={},v=(0,m.Z)((e,{size:t,radius:r,transitionDuration:n})=>({root:{"--progress-size":(0,h.ap)(t,"progress-size"),"--progress-radius":void 0===r?void 0:(0,h.H5)(r),"--progress-transition-duration":"number"==typeof n?`${n}ms`:void 0}})),y=(0,i.d)((e,t)=>{let r=(0,s.w)("ProgressRoot",b,e),{classNames:o,className:i,style:c,styles:p,unstyled:u,vars:h,autoContrast:m,transitionDuration:y,...x}=r,f=(0,g.y)({name:"Progress",classes:d,props:r,className:i,style:c,classNames:o,styles:p,unstyled:u,vars:h,varsResolver:v});return(0,n.jsx)(a,{value:{getStyles:f,autoContrast:m},children:(0,n.jsx)(l.x,{ref:t,...f("root"),...x})})});y.classes=d,y.displayName="@mantine/core/ProgressRoot";var x=r(13588),f=r(39568),w=r(90006),j=r(68755);let I={withAria:!0},P=(0,i.d)((e,t)=>{let{classNames:r,className:o,style:i,styles:a,vars:d,value:p,withAria:u,color:h,striped:m,animated:g,mod:b,...v}=(0,s.w)("ProgressSection",I,e),y=c(),P=(0,j.rZ)(),C=u?{role:"progressbar","aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":p,"aria-valuetext":`${p}%`}:{};return(0,n.jsx)(l.x,{ref:t,...y.getStyles("section",{className:o,classNames:r,styles:a,style:i}),...v,...C,mod:[{striped:m||g,animated:g},b],__vars:{"--progress-section-width":`${p}%`,"--progress-section-color":(0,x.p)(h,P),"--progress-label-color":(0,w.o)(y.autoContrast,P)?(0,f.R)({color:h,theme:P,autoContrast:y.autoContrast}):void 0}})});P.classes=d,P.displayName="@mantine/core/ProgressSection";let C={},V=(0,i.d)((e,t)=>{let r=(0,s.w)("Progress",C,e),{value:i,classNames:l,styles:a,vars:c,color:d,striped:p,animated:u,"aria-label":h,...m}=r,{resolvedClassNames:g,resolvedStyles:b}=(0,o.h)({classNames:l,styles:a,props:r});return(0,n.jsx)(y,{ref:t,classNames:g,styles:b,vars:c,...m,children:(0,n.jsx)(P,{value:i,color:d,striped:p,animated:u,"aria-label":h})})});V.classes=d,V.displayName="@mantine/core/Progress",V.Section=P,V.Root=y,V.Label=u},3900:function(e,t,r){"use strict";r.d(t,{q:function(){return o}});var n=r(2784);function o(e=!1,t){let{onOpen:r,onClose:o}=t||{},[s,i]=(0,n.useState)(e),l=(0,n.useCallback)(()=>{i(e=>e||(r?.(),!0))},[r]),a=(0,n.useCallback)(()=>{i(e=>e?(o?.(),!1):e)},[o]),c=(0,n.useCallback)(()=>{s?a():l()},[a,l,s]);return[s,{open:l,close:a,toggle:c}]}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=83114)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/popover-7265ea73db009595.js b/_next/static/chunks/pages/core/popover-12de268a8c21fb6f.js similarity index 91% rename from _next/static/chunks/pages/core/popover-7265ea73db009595.js rename to _next/static/chunks/pages/core/popover-12de268a8c21fb6f.js index cc8e1f0ef45..d71073fecd0 100644 --- a/_next/static/chunks/pages/core/popover-7265ea73db009595.js +++ b/_next/static/chunks/pages/core/popover-12de268a8c21fb6f.js @@ -203,4 +203,4 @@ function Demo() { ); } -`,centered:!0};var $=o(25071),T=o(15019);let S=(0,$.A)(T.us.Popover);function O(e){let t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{Demo:o,KeyboardEventsTable:i,TargetComponent:s}=t;return o||k("Demo",!0),i||k("KeyboardEventsTable",!0),s||k("TargetComponent",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(o,{data:l}),"\n",(0,n.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,n.jsxs)(t.p,{children:["You can control Popover state with ",(0,n.jsx)(t.code,{children:"opened"})," and ",(0,n.jsx)(t.code,{children:"onChange"})," props:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Button, Popover } from '@mantine/core';\n\nfunction Demo() {\n const [opened, setOpened] = useState(false);\n return (\n \n \n \n \n\n Dropdown\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.p,{children:"Controlled example with mouse events:"}),"\n",(0,n.jsx)(o,{data:c,demoProps:{toggle:!1}}),"\n",(0,n.jsx)(t.h2,{id:"focus-trap",children:"Focus trap"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to use interactive elements (inputs, buttons, etc.) inside ",(0,n.jsx)(t.code,{children:"Popover.Dropdown"}),", set ",(0,n.jsx)(t.code,{children:"trapFocus"})," prop:"]}),"\n",(0,n.jsx)(o,{data:h}),"\n",(0,n.jsx)(t.h2,{id:"inline-elements",children:"Inline elements"}),"\n",(0,n.jsxs)(t.p,{children:["Enable ",(0,n.jsx)(t.code,{children:"inline"})," middleware to use ",(0,n.jsx)(t.code,{children:"Popover"})," with inline elements:"]}),"\n",(0,n.jsx)(o,{data:f}),"\n",(0,n.jsx)(t.h2,{id:"same-width",children:"Same width"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:'width="target"'})," prop to make Popover dropdown take the same width as target element:"]}),"\n",(0,n.jsx)(o,{data:m}),"\n",(0,n.jsx)(t.h2,{id:"offset",children:"offset"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"offset"})," prop to a number to change dropdown position relative to the target element.\nThis way you can control dropdown offset on main axis only."]}),"\n",(0,n.jsx)(o,{data:x}),"\n",(0,n.jsxs)(t.p,{children:["To control offset on both axis, pass object with ",(0,n.jsx)(t.code,{children:"mainAxis"})," and ",(0,n.jsx)(t.code,{children:"crossAxis"})," properties:"]}),"\n",(0,n.jsx)(o,{data:w}),"\n",(0,n.jsx)(t.h2,{id:"middlewares",children:"Middlewares"}),"\n",(0,n.jsxs)(t.p,{children:["You can enable or disable ",(0,n.jsx)(t.a,{href:"https://floating-ui.com/",children:"Floating UI"})," middlewares with\n",(0,n.jsx)(t.code,{children:"middlewares"})," prop:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/shift",children:"shift"})," middleware shifts the dropdown to keep it in view. It is enabled by default"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/flip",children:"flip"})," middleware changes the placement of the dropdown to keep it in view. It is enabled by default."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/inline",children:"inline"})," middleware improves positioning for inline reference elements that span over multiple lines. It is disabled by default."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/size",children:"size"})," middleware manipulates dropdown size. It is disabled by default."]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Example of turning off ",(0,n.jsx)(t.code,{children:"shift"})," and ",(0,n.jsx)(t.code,{children:"flip"})," middlewares:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {/* Popover content */}\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"customize-middleware-options",children:"Customize middleware options"}),"\n",(0,n.jsxs)(t.p,{children:["To customize ",(0,n.jsx)(t.a,{href:"https://floating-ui.com/",children:"Floating UI"})," middlewares options, pass them as\nan object to the ",(0,n.jsx)(t.code,{children:"middlewares"})," prop. For example, to change ",(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/shift",children:"shift"}),"\nmiddleware padding to ",(0,n.jsx)(t.code,{children:"20px"})," use the following configuration:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {/* Popover content */}\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-arrow",children:"Dropdown arrow"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"withArrow"})," prop to add an arrow to the dropdown. Arrow is a ",(0,n.jsx)(t.code,{children:"div"})," element rotated with ",(0,n.jsx)(t.code,{children:"transform: rotate(45deg)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"arrowPosition"})," prop determines how arrow is position relative to the target element when ",(0,n.jsx)(t.code,{children:"position"})," is set to ",(0,n.jsx)(t.code,{children:"*-start"})," and ",(0,n.jsx)(t.code,{children:"*-end"})," values on ",(0,n.jsx)(t.code,{children:"Popover"})," component.\nBy default, the value is ",(0,n.jsx)(t.code,{children:"center"})," – the arrow is positioned in the center of the target element if it is possible."]}),"\n",(0,n.jsxs)(t.p,{children:["If you change ",(0,n.jsx)(t.code,{children:"arrowPosition"})," to ",(0,n.jsx)(t.code,{children:"side"}),", then the arrow will be positioned on the side of the target element,\nand you will be able to control arrow offset with ",(0,n.jsx)(t.code,{children:"arrowOffset"})," prop. Note that when ",(0,n.jsx)(t.code,{children:"arrowPosition"})," is set to ",(0,n.jsx)(t.code,{children:"center"}),",\n",(0,n.jsx)(t.code,{children:"arrowOffset"})," prop is ignored."]}),"\n",(0,n.jsx)(o,{data:g}),"\n",(0,n.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"disabled"})," prop to prevent ",(0,n.jsx)(t.code,{children:"Popover.Dropdown"})," from rendering:"]}),"\n",(0,n.jsx)(o,{data:j}),"\n",(0,n.jsx)(t.h2,{id:"click-outside",children:"Click outside"}),"\n",(0,n.jsxs)(t.p,{children:["By default, ",(0,n.jsx)(t.code,{children:"Popover"})," closes when you click outside of the dropdown. To disable this behavior, set ",(0,n.jsx)(t.code,{children:"closeOnClickOutside={false}"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["You can configure events that are used for click outside detection with ",(0,n.jsx)(t.code,{children:"clickOutsideEvents"})," prop.\nBy default, ",(0,n.jsx)(t.code,{children:"Popover"})," listens to ",(0,n.jsx)(t.code,{children:"mousedown"})," and ",(0,n.jsx)(t.code,{children:"touchstart"})," events. You can change it to any other\nevents, for example, ",(0,n.jsx)(t.code,{children:"mouseup"})," and ",(0,n.jsx)(t.code,{children:"touchend"}),":"]}),"\n",(0,n.jsx)(o,{data:b}),"\n",(0,n.jsx)(t.h2,{id:"initial-focus",children:"Initial focus"}),"\n",(0,n.jsxs)(t.p,{children:["Popover uses ",(0,n.jsx)(t.a,{href:"/core/focus-trap/",children:"FocusTrap"})," component to manage focus.\nAdd ",(0,n.jsx)(t.code,{children:"data-autofocus"})," attribute to element that should receive initial focus:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n"})}),"\n",(0,n.jsx)(s,{component:"Popover"}),"\n",(0,n.jsx)(t.h2,{id:"nested-popovers",children:"Nested popovers"}),"\n",(0,n.jsxs)(t.p,{children:["Nested popovers require children rendering without ",(0,n.jsx)(t.a,{href:"/core/portal/",children:"Portal"}),". Usually, you\nshould disable portal with props of the component that renders popover content, for example,\n",(0,n.jsx)(t.a,{href:"/core/select/",children:"Select"})," has ",(0,n.jsx)(t.code,{children:"comboboxProps={{ withinPortal: false }}"})," prop. Check documentation\nof the component that you are using to render popover content to find out how to disable the portal.\nIf the portal is not disabled, outside click will close all popovers."]}),"\n",(0,n.jsxs)(t.p,{children:["Example of disabling portal in ",(0,n.jsx)(t.a,{href:"/core/select/",children:"Select"})," and ",(0,n.jsx)(t.a,{href:"/dates/date-picker-input/",children:"DatePickerInput"}),"\ncomponents:"]}),"\n",(0,n.jsx)(o,{data:D}),"\n",(0,n.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,n.jsxs)(t.p,{children:["Popover follows ",(0,n.jsx)(t.a,{href:"https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal",children:"WAI-ARIA recommendations"}),":"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Dropdown element has ",(0,n.jsx)(t.code,{children:'role="dialog"'})," and ",(0,n.jsx)(t.code,{children:'aria-labelledby="target-id"'})," attributes"]}),"\n",(0,n.jsxs)(t.li,{children:["Target element has ",(0,n.jsx)(t.code,{children:'aria-haspopup="dialog"'}),", ",(0,n.jsx)(t.code,{children:"aria-expanded"}),", ",(0,n.jsx)(t.code,{children:'aria-controls="dropdown-id"'})," attributes"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Uncontrolled Popover will be accessible only when used with ",(0,n.jsx)(t.code,{children:"button"})," element or component that renders it (",(0,n.jsx)(t.a,{href:"/core/button/",children:"Button"}),", ",(0,n.jsx)(t.a,{href:"/core/action-icon/",children:"ActionIcon"}),", etc.).\nOther elements will not support ",(0,n.jsx)(t.code,{children:"Space"})," and ",(0,n.jsx)(t.code,{children:"Enter"})," key presses."]}),"\n",(0,n.jsx)(t.h2,{id:"keyboard-interactions",children:"Keyboard interactions"}),"\n",(0,n.jsx)(i,{data:[{key:"Escape",description:"Closes dropdown",condition:"Focus within dropdown"},{key:"Space/Enter",description:"Opens/closes dropdown",condition:"Focus on target element"}]})]})}function M(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(S,{...e,children:(0,n.jsx)(O,{...e})})}function k(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},19282:function(e,t,o){"use strict";o.d(t,{M:function(){return r},c:function(){return n}});let n=[{label:"top",value:"top"},{label:"top-start",value:"top-start"},{label:"top-end",value:"top-end"},{label:"left",value:"left"},{label:"left-start",value:"left-start"},{label:"left-end",value:"left-end"},{label:"right",value:"right"},{label:"right-start",value:"right-start"},{label:"right-end",value:"right-end"},{label:"bottom",value:"bottom"},{label:"bottom-start",value:"bottom-start"},{label:"bottom-end",value:"bottom-end"}],r=[{label:"side",value:"side"},{label:"center",value:"center"}]},66958:function(e,t,o){"use strict";o.d(t,{r:function(){return u}});var n=o(52322),r=o(40489),i=o(40284),s=o(38405),a=o(61324),l=o(36186),d=o(61271);function c({data:e,withCheckIcon:t,value:o,checkIconPosition:s,unstyled:u,renderOption:h}){if(!(0,l.f)(e)){var p;let l=(p=e.value,Array.isArray(o)?o.includes(p):o===p),c=t&&l&&(0,n.jsx)(i.n,{className:d.Z.optionsDropdownCheckIcon}),f=(0,n.jsxs)(n.Fragment,{children:["left"===s&&c,(0,n.jsx)("span",{children:e.label}),"right"===s&&c]});return(0,n.jsx)(a.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[d.Z.optionsDropdownOption]:!u}),"data-reverse":"right"===s||void 0,"data-checked":l||void 0,"aria-selected":l,active:l,children:"function"==typeof h?h({option:e,checked:l}):f})}let f=e.items.map(e=>(0,n.jsx)(c,{data:e,value:o,unstyled:u,withCheckIcon:t,checkIconPosition:s,renderOption:h},e.value));return(0,n.jsx)(a.h.Group,{label:e.group,children:f})}function u({data:e,hidden:t,hiddenWhenEmpty:o,filter:r,search:i,limit:d,maxDropdownHeight:u,withScrollArea:h=!0,filterOptions:p=!0,withCheckIcon:f=!1,value:m,checkIconPosition:v,nothingFoundMessage:x,unstyled:w,labelId:g,renderOption:j,scrollAreaProps:b,"aria-label":y}){!function e(t,o=new Set){if(Array.isArray(t))for(let n of t)if((0,l.f)(n))e(n.items,o);else{if(void 0===n.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof n.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof n.value}`);if(o.has(n.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${n.value}" was provided more than once`);o.add(n.value)}}(e);let P="string"==typeof i?(r||function e({options:t,search:o,limit:n}){let r=o.trim().toLowerCase(),i=[];for(let s=0;s0)return!1;return!0}(P),$=P.map(e=>(0,n.jsx)(c,{data:e,withCheckIcon:f,value:m,checkIconPosition:v,unstyled:w,renderOption:j},(0,l.f)(e)?e.group:e.value));return(0,n.jsx)(a.h.Dropdown,{hidden:t||o&&D,children:(0,n.jsxs)(a.h.Options,{labelledBy:g,"aria-label":y,children:[h?(0,n.jsx)(s.x.Autosize,{mah:u??220,type:"scroll",scrollbarSize:"var(--combobox-padding)",offsetScrollbars:"y",...b,children:$}):$,D&&x&&(0,n.jsx)(a.h.Empty,{children:x})]})})}},36186:function(e,t,o){"use strict";function n(e){return"group"in e}o.d(t,{f:function(){return n}})},77606:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},79649:function(e,t,o){"use strict";o.d(t,{P:function(){return x}});var n=o(52322),r=o(2784),i=o(66178),s=o(9341),a=o(51477),l=o(38483),d=o(82027),c=o(29995),u=o(77606),h=o(61324),p=o(66958),f=o(56237),m=o(73063);let v={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},x=(0,d.d)((e,t)=>{let o=(0,l.w)("Select",v,e),{classNames:d,styles:x,unstyled:w,vars:g,dropdownOpened:j,defaultDropdownOpened:b,onDropdownClose:y,onDropdownOpen:P,onFocus:D,onBlur:$,onClick:T,onChange:S,data:O,value:M,defaultValue:k,selectFirstOptionOnChange:z,onOptionSubmit:A,comboboxProps:C,readOnly:I,disabled:B,filter:J,limit:_,withScrollArea:E,maxDropdownHeight:N,size:Y,searchable:V,rightSection:H,checkIconPosition:F,withCheckIcon:U,nothingFoundMessage:L,name:W,form:Z,searchValue:R,defaultSearchValue:q,onSearchChange:K,allowDeselect:X,error:G,rightSectionPointerEvents:Q,id:ee,clearable:et,clearButtonProps:eo,hiddenInputProps:en,renderOption:er,onClear:ei,autoComplete:es,scrollAreaProps:ea,...el}=o,ed=(0,r.useMemo)(()=>(0,c.R)(O),[O]),ec=(0,r.useMemo)(()=>(0,u.g)(ed),[ed]),eu=(0,i.M)(ee),[eh,ep,ef]=(0,s.C)({value:M,defaultValue:k,finalValue:null,onChange:S}),em="string"==typeof eh?ec[eh]:void 0,[ev,ex]=(0,s.C)({value:R,defaultValue:q,finalValue:em?em.label:"",onChange:K}),ew=(0,f.K)({opened:j,defaultOpened:b,onDropdownOpen:()=>{P?.(),ew.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{y?.(),ew.resetSelectedOption()}}),{resolvedClassNames:eg,resolvedStyles:ej}=(0,a.h)({props:o,styles:x,classNames:d});(0,r.useEffect)(()=>{z&&ew.selectFirstOption()},[z,eh]),(0,r.useEffect)(()=>{null===M&&ex(""),"string"==typeof M&&em&&ex(em.label)},[M,em]);let eb=et&&!!eh&&!B&&!I&&(0,n.jsx)(h.h.ClearButton,{size:Y,...eo,onClear:()=>{ep(null,null),ex(""),ei?.()}});return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(h.h,{store:ew,__staticSelector:"Select",classNames:eg,styles:ej,unstyled:w,readOnly:I,onOptionSubmit:e=>{A?.(e);let t=X&&ec[e].value===eh?null:ec[e],o=t?t.value:null;ep(o,t),ef||ex("string"==typeof o&&t?.label||""),ew.closeDropdown()},size:Y,...C,children:[(0,n.jsx)(h.h.Target,{targetType:V?"input":"button",autoComplete:es,children:(0,n.jsx)(m.M,{id:eu,ref:t,rightSection:H||eb||(0,n.jsx)(h.h.Chevron,{size:Y,error:G,unstyled:w}),rightSectionPointerEvents:Q||(eb?"all":"none"),...el,size:Y,__staticSelector:"Select",disabled:B,readOnly:I||!V,value:ev,onChange:e=>{ex(e.currentTarget.value),ew.openDropdown(),z&&ew.selectFirstOption()},onFocus:e=>{V&&ew.openDropdown(),D?.(e)},onBlur:e=>{V&&ew.closeDropdown(),ex(null!=eh&&ec[eh]?.label||""),$?.(e)},onClick:e=>{V?ew.openDropdown():ew.toggleDropdown(),T?.(e)},classNames:eg,styles:ej,unstyled:w,pointer:!V,error:G})}),(0,n.jsx)(p.r,{data:ed,hidden:I||B,filter:J,search:ev,limit:_,hiddenWhenEmpty:!V||!L,withScrollArea:E,maxDropdownHeight:N,filterOptions:V&&em?.label!==ev,value:eh,checkIconPosition:F,withCheckIcon:U,nothingFoundMessage:L,unstyled:w,labelId:el.label?`${eu}-label`:void 0,"aria-label":el.label?void 0:el["aria-label"],renderOption:er,scrollAreaProps:ea})]}),(0,n.jsx)(h.h.HiddenInput,{value:eh,name:W,form:Z,disabled:B,...en})]})});x.classes={...m.M.classes,...h.h.classes},x.displayName="@mantine/core/Select"}},function(e){e.O(0,[61177,66748,11340,11204,61324,18738,92888,49774,40179],function(){return e(e.s=34051)}),_N_E=e.O()}]); \ No newline at end of file +`,centered:!0};var $=o(25071),T=o(15019);let S=(0,$.A)(T.us.Popover);function O(e){let t={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components},{Demo:o,KeyboardEventsTable:i,TargetComponent:s}=t;return o||k("Demo",!0),i||k("KeyboardEventsTable",!0),s||k("TargetComponent",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,n.jsx)(o,{data:l}),"\n",(0,n.jsx)(t.h2,{id:"controlled",children:"Controlled"}),"\n",(0,n.jsxs)(t.p,{children:["You can control Popover state with ",(0,n.jsx)(t.code,{children:"opened"})," and ",(0,n.jsx)(t.code,{children:"onChange"})," props:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { useState } from 'react';\nimport { Button, Popover } from '@mantine/core';\n\nfunction Demo() {\n const [opened, setOpened] = useState(false);\n return (\n \n \n \n \n\n Dropdown\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.p,{children:"Controlled example with mouse events:"}),"\n",(0,n.jsx)(o,{data:c,demoProps:{toggle:!1}}),"\n",(0,n.jsx)(t.h2,{id:"focus-trap",children:"Focus trap"}),"\n",(0,n.jsxs)(t.p,{children:["If you need to use interactive elements (inputs, buttons, etc.) inside ",(0,n.jsx)(t.code,{children:"Popover.Dropdown"}),", set ",(0,n.jsx)(t.code,{children:"trapFocus"})," prop:"]}),"\n",(0,n.jsx)(o,{data:h}),"\n",(0,n.jsx)(t.h2,{id:"inline-elements",children:"Inline elements"}),"\n",(0,n.jsxs)(t.p,{children:["Enable ",(0,n.jsx)(t.code,{children:"inline"})," middleware to use ",(0,n.jsx)(t.code,{children:"Popover"})," with inline elements:"]}),"\n",(0,n.jsx)(o,{data:f}),"\n",(0,n.jsx)(t.h2,{id:"same-width",children:"Same width"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:'width="target"'})," prop to make Popover dropdown take the same width as target element:"]}),"\n",(0,n.jsx)(o,{data:m}),"\n",(0,n.jsx)(t.h2,{id:"offset",children:"offset"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"offset"})," prop to a number to change dropdown position relative to the target element.\nThis way you can control dropdown offset on main axis only."]}),"\n",(0,n.jsx)(o,{data:x}),"\n",(0,n.jsxs)(t.p,{children:["To control offset on both axis, pass object with ",(0,n.jsx)(t.code,{children:"mainAxis"})," and ",(0,n.jsx)(t.code,{children:"crossAxis"})," properties:"]}),"\n",(0,n.jsx)(o,{data:w}),"\n",(0,n.jsx)(t.h2,{id:"middlewares",children:"Middlewares"}),"\n",(0,n.jsxs)(t.p,{children:["You can enable or disable ",(0,n.jsx)(t.a,{href:"https://floating-ui.com/",children:"Floating UI"})," middlewares with\n",(0,n.jsx)(t.code,{children:"middlewares"})," prop:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/shift",children:"shift"})," middleware shifts the dropdown to keep it in view. It is enabled by default"]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/flip",children:"flip"})," middleware changes the placement of the dropdown to keep it in view. It is enabled by default."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/inline",children:"inline"})," middleware improves positioning for inline reference elements that span over multiple lines. It is disabled by default."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/size",children:"size"})," middleware manipulates dropdown size. It is disabled by default."]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Example of turning off ",(0,n.jsx)(t.code,{children:"shift"})," and ",(0,n.jsx)(t.code,{children:"flip"})," middlewares:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {/* Popover content */}\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"customize-middleware-options",children:"Customize middleware options"}),"\n",(0,n.jsxs)(t.p,{children:["To customize ",(0,n.jsx)(t.a,{href:"https://floating-ui.com/",children:"Floating UI"})," middlewares options, pass them as\nan object to the ",(0,n.jsx)(t.code,{children:"middlewares"})," prop. For example, to change ",(0,n.jsx)(t.a,{href:"https://floating-ui.com/docs/shift",children:"shift"}),"\nmiddleware padding to ",(0,n.jsx)(t.code,{children:"20px"})," use the following configuration:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {/* Popover content */}\n \n );\n}\n"})}),"\n",(0,n.jsx)(t.h2,{id:"dropdown-arrow",children:"Dropdown arrow"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"withArrow"})," prop to add an arrow to the dropdown. Arrow is a ",(0,n.jsx)(t.code,{children:"div"})," element rotated with ",(0,n.jsx)(t.code,{children:"transform: rotate(45deg)"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"arrowPosition"})," prop determines how arrow is position relative to the target element when ",(0,n.jsx)(t.code,{children:"position"})," is set to ",(0,n.jsx)(t.code,{children:"*-start"})," and ",(0,n.jsx)(t.code,{children:"*-end"})," values on ",(0,n.jsx)(t.code,{children:"Popover"})," component.\nBy default, the value is ",(0,n.jsx)(t.code,{children:"center"})," – the arrow is positioned in the center of the target element if it is possible."]}),"\n",(0,n.jsxs)(t.p,{children:["If you change ",(0,n.jsx)(t.code,{children:"arrowPosition"})," to ",(0,n.jsx)(t.code,{children:"side"}),", then the arrow will be positioned on the side of the target element,\nand you will be able to control arrow offset with ",(0,n.jsx)(t.code,{children:"arrowOffset"})," prop. Note that when ",(0,n.jsx)(t.code,{children:"arrowPosition"})," is set to ",(0,n.jsx)(t.code,{children:"center"}),",\n",(0,n.jsx)(t.code,{children:"arrowOffset"})," prop is ignored."]}),"\n",(0,n.jsx)(o,{data:g}),"\n",(0,n.jsx)(t.h2,{id:"disabled",children:"Disabled"}),"\n",(0,n.jsxs)(t.p,{children:["Set ",(0,n.jsx)(t.code,{children:"disabled"})," prop to prevent ",(0,n.jsx)(t.code,{children:"Popover.Dropdown"})," from rendering:"]}),"\n",(0,n.jsx)(o,{data:j}),"\n",(0,n.jsx)(t.h2,{id:"click-outside",children:"Click outside"}),"\n",(0,n.jsxs)(t.p,{children:["By default, ",(0,n.jsx)(t.code,{children:"Popover"})," closes when you click outside of the dropdown. To disable this behavior, set ",(0,n.jsx)(t.code,{children:"closeOnClickOutside={false}"}),"."]}),"\n",(0,n.jsxs)(t.p,{children:["You can configure events that are used for click outside detection with ",(0,n.jsx)(t.code,{children:"clickOutsideEvents"})," prop.\nBy default, ",(0,n.jsx)(t.code,{children:"Popover"})," listens to ",(0,n.jsx)(t.code,{children:"mousedown"})," and ",(0,n.jsx)(t.code,{children:"touchstart"})," events. You can change it to any other\nevents, for example, ",(0,n.jsx)(t.code,{children:"mouseup"})," and ",(0,n.jsx)(t.code,{children:"touchend"}),":"]}),"\n",(0,n.jsx)(o,{data:b}),"\n",(0,n.jsx)(t.h2,{id:"initial-focus",children:"Initial focus"}),"\n",(0,n.jsxs)(t.p,{children:["Popover uses ",(0,n.jsx)(t.a,{href:"/core/focus-trap/",children:"FocusTrap"})," component to manage focus.\nAdd ",(0,n.jsx)(t.code,{children:"data-autofocus"})," attribute to element that should receive initial focus:"]}),"\n",(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n \n \n \n \n \n \n \n );\n}\n"})}),"\n",(0,n.jsx)(s,{component:"Popover"}),"\n",(0,n.jsx)(t.h2,{id:"nested-popovers",children:"Nested popovers"}),"\n",(0,n.jsxs)(t.p,{children:["Nested popovers require children rendering without ",(0,n.jsx)(t.a,{href:"/core/portal/",children:"Portal"}),". Usually, you\nshould disable portal with props of the component that renders popover content, for example,\n",(0,n.jsx)(t.a,{href:"/core/select/",children:"Select"})," has ",(0,n.jsx)(t.code,{children:"comboboxProps={{ withinPortal: false }}"})," prop. Check documentation\nof the component that you are using to render popover content to find out how to disable the portal.\nIf the portal is not disabled, outside click will close all popovers."]}),"\n",(0,n.jsxs)(t.p,{children:["Example of disabling portal in ",(0,n.jsx)(t.a,{href:"/core/select/",children:"Select"})," and ",(0,n.jsx)(t.a,{href:"/dates/date-picker-input/",children:"DatePickerInput"}),"\ncomponents:"]}),"\n",(0,n.jsx)(o,{data:D}),"\n",(0,n.jsx)(t.h2,{id:"accessibility",children:"Accessibility"}),"\n",(0,n.jsxs)(t.p,{children:["Popover follows ",(0,n.jsx)(t.a,{href:"https://www.w3.org/TR/wai-aria-practices-1.2/#dialog_modal",children:"WAI-ARIA recommendations"}),":"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["Dropdown element has ",(0,n.jsx)(t.code,{children:'role="dialog"'})," and ",(0,n.jsx)(t.code,{children:'aria-labelledby="target-id"'})," attributes"]}),"\n",(0,n.jsxs)(t.li,{children:["Target element has ",(0,n.jsx)(t.code,{children:'aria-haspopup="dialog"'}),", ",(0,n.jsx)(t.code,{children:"aria-expanded"}),", ",(0,n.jsx)(t.code,{children:'aria-controls="dropdown-id"'})," attributes"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["Uncontrolled Popover will be accessible only when used with ",(0,n.jsx)(t.code,{children:"button"})," element or component that renders it (",(0,n.jsx)(t.a,{href:"/core/button/",children:"Button"}),", ",(0,n.jsx)(t.a,{href:"/core/action-icon/",children:"ActionIcon"}),", etc.).\nOther elements will not support ",(0,n.jsx)(t.code,{children:"Space"})," and ",(0,n.jsx)(t.code,{children:"Enter"})," key presses."]}),"\n",(0,n.jsx)(t.h2,{id:"keyboard-interactions",children:"Keyboard interactions"}),"\n",(0,n.jsx)(i,{data:[{key:"Escape",description:"Closes dropdown",condition:"Focus within dropdown"},{key:"Space/Enter",description:"Opens/closes dropdown",condition:"Focus on target element"}]})]})}function M(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,n.jsx)(S,{...e,children:(0,n.jsx)(O,{...e})})}function k(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},19282:function(e,t,o){"use strict";o.d(t,{M:function(){return r},c:function(){return n}});let n=[{label:"top",value:"top"},{label:"top-start",value:"top-start"},{label:"top-end",value:"top-end"},{label:"left",value:"left"},{label:"left-start",value:"left-start"},{label:"left-end",value:"left-end"},{label:"right",value:"right"},{label:"right-start",value:"right-start"},{label:"right-end",value:"right-end"},{label:"bottom",value:"bottom"},{label:"bottom-start",value:"bottom-start"},{label:"bottom-end",value:"bottom-end"}],r=[{label:"side",value:"side"},{label:"center",value:"center"}]},66958:function(e,t,o){"use strict";o.d(t,{r:function(){return u}});var n=o(52322),r=o(40489),i=o(40284),s=o(38405),a=o(61324),l=o(36186),d=o(61271);function c({data:e,withCheckIcon:t,value:o,checkIconPosition:s,unstyled:u,renderOption:h}){if(!(0,l.f)(e)){var p;let l=(p=e.value,Array.isArray(o)?o.includes(p):o===p),c=t&&l&&(0,n.jsx)(i.n,{className:d.Z.optionsDropdownCheckIcon}),f=(0,n.jsxs)(n.Fragment,{children:["left"===s&&c,(0,n.jsx)("span",{children:e.label}),"right"===s&&c]});return(0,n.jsx)(a.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[d.Z.optionsDropdownOption]:!u}),"data-reverse":"right"===s||void 0,"data-checked":l||void 0,"aria-selected":l,active:l,children:"function"==typeof h?h({option:e,checked:l}):f})}let f=e.items.map(e=>(0,n.jsx)(c,{data:e,value:o,unstyled:u,withCheckIcon:t,checkIconPosition:s,renderOption:h},e.value));return(0,n.jsx)(a.h.Group,{label:e.group,children:f})}function u({data:e,hidden:t,hiddenWhenEmpty:o,filter:r,search:i,limit:d,maxDropdownHeight:u,withScrollArea:h=!0,filterOptions:p=!0,withCheckIcon:f=!1,value:m,checkIconPosition:v,nothingFoundMessage:x,unstyled:w,labelId:g,renderOption:j,scrollAreaProps:b,"aria-label":y}){!function e(t,o=new Set){if(Array.isArray(t))for(let n of t)if((0,l.f)(n))e(n.items,o);else{if(void 0===n.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof n.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof n.value}`);if(o.has(n.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${n.value}" was provided more than once`);o.add(n.value)}}(e);let P="string"==typeof i?(r||function e({options:t,search:o,limit:n}){let r=o.trim().toLowerCase(),i=[];for(let s=0;s0)return!1;return!0}(P),$=P.map(e=>(0,n.jsx)(c,{data:e,withCheckIcon:f,value:m,checkIconPosition:v,unstyled:w,renderOption:j},(0,l.f)(e)?e.group:e.value));return(0,n.jsx)(a.h.Dropdown,{hidden:t||o&&D,children:(0,n.jsxs)(a.h.Options,{labelledBy:g,"aria-label":y,children:[h?(0,n.jsx)(s.x.Autosize,{mah:u??220,type:"scroll",scrollbarSize:"var(--combobox-padding)",offsetScrollbars:"y",...b,children:$}):$,D&&x&&(0,n.jsx)(a.h.Empty,{children:x})]})})}},36186:function(e,t,o){"use strict";function n(e){return"group"in e}o.d(t,{f:function(){return n}})},77606:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},79649:function(e,t,o){"use strict";o.d(t,{P:function(){return w}});var n=o(52322),r=o(2784),i=o(66178),s=o(9341),a=o(85057),l=o(51477),d=o(38483),c=o(82027),u=o(29995),h=o(77606),p=o(61324),f=o(66958),m=o(56237),v=o(73063);let x={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},w=(0,c.d)((e,t)=>{let o=(0,d.w)("Select",x,e),{classNames:c,styles:w,unstyled:g,vars:j,dropdownOpened:b,defaultDropdownOpened:y,onDropdownClose:P,onDropdownOpen:D,onFocus:$,onBlur:T,onClick:S,onChange:O,data:M,value:k,defaultValue:z,selectFirstOptionOnChange:A,onOptionSubmit:C,comboboxProps:I,readOnly:B,disabled:J,filter:_,limit:E,withScrollArea:N,maxDropdownHeight:Y,size:V,searchable:H,rightSection:F,checkIconPosition:U,withCheckIcon:L,nothingFoundMessage:W,name:Z,form:R,searchValue:q,defaultSearchValue:K,onSearchChange:X,allowDeselect:G,error:Q,rightSectionPointerEvents:ee,id:et,clearable:eo,clearButtonProps:en,hiddenInputProps:er,renderOption:ei,onClear:es,autoComplete:ea,scrollAreaProps:el,...ed}=o,ec=(0,r.useMemo)(()=>(0,u.R)(M),[M]),eu=(0,r.useMemo)(()=>(0,h.g)(ec),[ec]),eh=(0,i.M)(et),[ep,ef,em]=(0,s.C)({value:k,defaultValue:z,finalValue:null,onChange:O}),ev="string"==typeof ep?eu[ep]:void 0,ex=(0,a.D)(ev),[ew,eg]=(0,s.C)({value:q,defaultValue:K,finalValue:ev?ev.label:"",onChange:X}),ej=(0,m.K)({opened:b,defaultOpened:y,onDropdownOpen:()=>{D?.(),ej.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{P?.(),ej.resetSelectedOption()}}),{resolvedClassNames:eb,resolvedStyles:ey}=(0,l.h)({props:o,styles:w,classNames:c});(0,r.useEffect)(()=>{A&&ej.selectFirstOption()},[A,ep]),(0,r.useEffect)(()=>{null===k&&eg(""),"string"==typeof k&&ev&&(ex?.value!==ev.value||ex?.label!==ev.label)&&eg(ev.label)},[k,ev]);let eP=eo&&!!ep&&!J&&!B&&(0,n.jsx)(p.h.ClearButton,{size:V,...en,onClear:()=>{ef(null,null),eg(""),es?.()}});return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(p.h,{store:ej,__staticSelector:"Select",classNames:eb,styles:ey,unstyled:g,readOnly:B,onOptionSubmit:e=>{C?.(e);let t=G&&eu[e].value===ep?null:eu[e],o=t?t.value:null;ef(o,t),em||eg("string"==typeof o&&t?.label||""),ej.closeDropdown()},size:V,...I,children:[(0,n.jsx)(p.h.Target,{targetType:H?"input":"button",autoComplete:ea,children:(0,n.jsx)(v.M,{id:eh,ref:t,rightSection:F||eP||(0,n.jsx)(p.h.Chevron,{size:V,error:Q,unstyled:g}),rightSectionPointerEvents:ee||(eP?"all":"none"),...ed,size:V,__staticSelector:"Select",disabled:J,readOnly:B||!H,value:ew,onChange:e=>{eg(e.currentTarget.value),ej.openDropdown(),A&&ej.selectFirstOption()},onFocus:e=>{H&&ej.openDropdown(),$?.(e)},onBlur:e=>{H&&ej.closeDropdown(),eg(null!=ep&&eu[ep]?.label||""),T?.(e)},onClick:e=>{H?ej.openDropdown():ej.toggleDropdown(),S?.(e)},classNames:eb,styles:ey,unstyled:g,pointer:!H,error:Q})}),(0,n.jsx)(f.r,{data:ec,hidden:B||J,filter:_,search:ew,limit:E,hiddenWhenEmpty:!H||!W,withScrollArea:N,maxDropdownHeight:Y,filterOptions:H&&ev?.label!==ew,value:ep,checkIconPosition:U,withCheckIcon:L,nothingFoundMessage:W,unstyled:g,labelId:ed.label?`${eh}-label`:void 0,"aria-label":ed.label?void 0:ed["aria-label"],renderOption:ei,scrollAreaProps:el})]}),(0,n.jsx)(p.h.HiddenInput,{value:ep,name:Z,form:R,disabled:J,...er})]})});w.classes={...v.M.classes,...p.h.classes},w.displayName="@mantine/core/Select"},85057:function(e,t,o){"use strict";o.d(t,{D:function(){return r}});var n=o(2784);function r(e){let t=(0,n.useRef)();return(0,n.useEffect)(()=>{t.current=e},[e]),t.current}}},function(e){e.O(0,[61177,66748,11340,11204,61324,18738,92888,49774,40179],function(){return e(e.s=34051)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/select-7dd118e28072a25d.js b/_next/static/chunks/pages/core/select-26704bace73aff99.js similarity index 90% rename from _next/static/chunks/pages/core/select-7dd118e28072a25d.js rename to _next/static/chunks/pages/core/select-26704bace73aff99.js index 94fad8e7756..69159ff9d81 100644 --- a/_next/static/chunks/pages/core/select-7dd118e28072a25d.js +++ b/_next/static/chunks/pages/core/select-26704bace73aff99.js @@ -527,4 +527,4 @@ function Demo() { /> ); } -`,p={stroke:1.5,color:"currentColor",opacity:.6,size:18},h={left:(0,n.jsx)(r.Z,{...p}),center:(0,n.jsx)(l.Z,{...p}),right:(0,n.jsx)(a.Z,{...p}),justify:(0,n.jsx)(i.Z,{...p})},m=({option:e,checked:t})=>(0,n.jsxs)(d.Z,{flex:"1",gap:"xs",children:[h[e.value],e.label,t&&(0,n.jsx)(c.Z,{style:{marginInlineStart:"auto"},...p})]}),f={type:"code",component:function(){return(0,n.jsx)(s.P,{label:"Select with renderOption",placeholder:"Select text align",data:[{value:"left",label:"Left"},{value:"center",label:"Center"},{value:"right",label:"Right"},{value:"justify",label:"Justify"}],renderOption:m})},code:u,centered:!0,maxWidth:340,defaultExpanded:!1}},76528:function(e,t,o){"use strict";o.d(t,{Mt:function(){return n},nW:function(){return r},pc:function(){return l}});let n=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],r=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],l=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},66958:function(e,t,o){"use strict";o.d(t,{r:function(){return u}});var n=o(52322),r=o(40489),l=o(40284),a=o(38405),i=o(61324),c=o(36186),d=o(61271);function s({data:e,withCheckIcon:t,value:o,checkIconPosition:a,unstyled:u,renderOption:p}){if(!(0,c.f)(e)){var h;let c=(h=e.value,Array.isArray(o)?o.includes(h):o===h),s=t&&c&&(0,n.jsx)(l.n,{className:d.Z.optionsDropdownCheckIcon}),m=(0,n.jsxs)(n.Fragment,{children:["left"===a&&s,(0,n.jsx)("span",{children:e.label}),"right"===a&&s]});return(0,n.jsx)(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[d.Z.optionsDropdownOption]:!u}),"data-reverse":"right"===a||void 0,"data-checked":c||void 0,"aria-selected":c,active:c,children:"function"==typeof p?p({option:e,checked:c}):m})}let m=e.items.map(e=>(0,n.jsx)(s,{data:e,value:o,unstyled:u,withCheckIcon:t,checkIconPosition:a,renderOption:p},e.value));return(0,n.jsx)(i.h.Group,{label:e.group,children:m})}function u({data:e,hidden:t,hiddenWhenEmpty:o,filter:r,search:l,limit:d,maxDropdownHeight:u,withScrollArea:p=!0,filterOptions:h=!0,withCheckIcon:m=!1,value:f,checkIconPosition:b,nothingFoundMessage:x,unstyled:g,labelId:v,renderOption:j,scrollAreaProps:y,"aria-label":S}){!function e(t,o=new Set){if(Array.isArray(t))for(let n of t)if((0,c.f)(n))e(n.items,o);else{if(void 0===n.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof n.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof n.value}`);if(o.has(n.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${n.value}" was provided more than once`);o.add(n.value)}}(e);let w="string"==typeof l?(r||function e({options:t,search:o,limit:n}){let r=o.trim().toLowerCase(),l=[];for(let a=0;a0)return!1;return!0}(w),k=w.map(e=>(0,n.jsx)(s,{data:e,withCheckIcon:m,value:f,checkIconPosition:b,unstyled:g,renderOption:j},(0,c.f)(e)?e.group:e.value));return(0,n.jsx)(i.h.Dropdown,{hidden:t||o&&P,children:(0,n.jsxs)(i.h.Options,{labelledBy:v,"aria-label":S,children:[p?(0,n.jsx)(a.x.Autosize,{mah:u??220,type:"scroll",scrollbarSize:"var(--combobox-padding)",offsetScrollbars:"y",...y,children:k}):k,P&&x&&(0,n.jsx)(i.h.Empty,{children:x})]})})}},36186:function(e,t,o){"use strict";function n(e){return"group"in e}o.d(t,{f:function(){return n}})},77606:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},79649:function(e,t,o){"use strict";o.d(t,{P:function(){return x}});var n=o(52322),r=o(2784),l=o(66178),a=o(9341),i=o(51477),c=o(38483),d=o(82027),s=o(29995),u=o(77606),p=o(61324),h=o(66958),m=o(56237),f=o(73063);let b={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},x=(0,d.d)((e,t)=>{let o=(0,c.w)("Select",b,e),{classNames:d,styles:x,unstyled:g,vars:v,dropdownOpened:j,defaultDropdownOpened:y,onDropdownClose:S,onDropdownOpen:w,onFocus:P,onBlur:k,onClick:V,onChange:A,data:D,value:R,defaultValue:C,selectFirstOptionOnChange:I,onOptionSubmit:O,comboboxProps:Y,readOnly:W,disabled:F,filter:N,limit:T,withScrollArea:E,maxDropdownHeight:M,size:B,searchable:Z,rightSection:_,checkIconPosition:z,withCheckIcon:L,nothingFoundMessage:G,name:J,form:$,searchValue:q,defaultSearchValue:H,onSearchChange:U,allowDeselect:X,error:K,rightSectionPointerEvents:Q,id:ee,clearable:et,clearButtonProps:eo,hiddenInputProps:en,renderOption:er,onClear:el,autoComplete:ea,scrollAreaProps:ei,...ec}=o,ed=(0,r.useMemo)(()=>(0,s.R)(D),[D]),es=(0,r.useMemo)(()=>(0,u.g)(ed),[ed]),eu=(0,l.M)(ee),[ep,eh,em]=(0,a.C)({value:R,defaultValue:C,finalValue:null,onChange:A}),ef="string"==typeof ep?es[ep]:void 0,[eb,ex]=(0,a.C)({value:q,defaultValue:H,finalValue:ef?ef.label:"",onChange:U}),eg=(0,m.K)({opened:j,defaultOpened:y,onDropdownOpen:()=>{w?.(),eg.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{S?.(),eg.resetSelectedOption()}}),{resolvedClassNames:ev,resolvedStyles:ej}=(0,i.h)({props:o,styles:x,classNames:d});(0,r.useEffect)(()=>{I&&eg.selectFirstOption()},[I,ep]),(0,r.useEffect)(()=>{null===R&&ex(""),"string"==typeof R&&ef&&ex(ef.label)},[R,ef]);let ey=et&&!!ep&&!F&&!W&&(0,n.jsx)(p.h.ClearButton,{size:B,...eo,onClear:()=>{eh(null,null),ex(""),el?.()}});return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(p.h,{store:eg,__staticSelector:"Select",classNames:ev,styles:ej,unstyled:g,readOnly:W,onOptionSubmit:e=>{O?.(e);let t=X&&es[e].value===ep?null:es[e],o=t?t.value:null;eh(o,t),em||ex("string"==typeof o&&t?.label||""),eg.closeDropdown()},size:B,...Y,children:[(0,n.jsx)(p.h.Target,{targetType:Z?"input":"button",autoComplete:ea,children:(0,n.jsx)(f.M,{id:eu,ref:t,rightSection:_||ey||(0,n.jsx)(p.h.Chevron,{size:B,error:K,unstyled:g}),rightSectionPointerEvents:Q||(ey?"all":"none"),...ec,size:B,__staticSelector:"Select",disabled:F,readOnly:W||!Z,value:eb,onChange:e=>{ex(e.currentTarget.value),eg.openDropdown(),I&&eg.selectFirstOption()},onFocus:e=>{Z&&eg.openDropdown(),P?.(e)},onBlur:e=>{Z&&eg.closeDropdown(),ex(null!=ep&&es[ep]?.label||""),k?.(e)},onClick:e=>{Z?eg.openDropdown():eg.toggleDropdown(),V?.(e)},classNames:ev,styles:ej,unstyled:g,pointer:!Z,error:K})}),(0,n.jsx)(h.r,{data:ed,hidden:W||F,filter:N,search:eb,limit:T,hiddenWhenEmpty:!Z||!G,withScrollArea:E,maxDropdownHeight:M,filterOptions:Z&&ef?.label!==eb,value:ep,checkIconPosition:z,withCheckIcon:L,nothingFoundMessage:G,unstyled:g,labelId:ec.label?`${eu}-label`:void 0,"aria-label":ec.label?void 0:ec["aria-label"],renderOption:er,scrollAreaProps:ei})]}),(0,n.jsx)(p.h.HiddenInput,{value:ep,name:J,form:$,disabled:F,...en})]})});x.classes={...f.M.classes,...p.h.classes},x.displayName="@mantine/core/Select"},3900:function(e,t,o){"use strict";o.d(t,{q:function(){return r}});var n=o(2784);function r(e=!1,t){let{onOpen:o,onClose:r}=t||{},[l,a]=(0,n.useState)(e),i=(0,n.useCallback)(()=>{a(e=>e||(o?.(),!0))},[o]),c=(0,n.useCallback)(()=>{a(e=>e?(r?.(),!1):e)},[r]),d=(0,n.useCallback)(()=>{l?c():i()},[c,i,l]);return[l,{open:i,close:c,toggle:d}]}}},function(e){e.O(0,[61177,66748,11340,61324,92888,49774,40179],function(){return e(e.s=21042)}),_N_E=e.O()}]); \ No newline at end of file +`,p={stroke:1.5,color:"currentColor",opacity:.6,size:18},h={left:(0,n.jsx)(r.Z,{...p}),center:(0,n.jsx)(l.Z,{...p}),right:(0,n.jsx)(a.Z,{...p}),justify:(0,n.jsx)(i.Z,{...p})},m=({option:e,checked:t})=>(0,n.jsxs)(d.Z,{flex:"1",gap:"xs",children:[h[e.value],e.label,t&&(0,n.jsx)(c.Z,{style:{marginInlineStart:"auto"},...p})]}),f={type:"code",component:function(){return(0,n.jsx)(s.P,{label:"Select with renderOption",placeholder:"Select text align",data:[{value:"left",label:"Left"},{value:"center",label:"Center"},{value:"right",label:"Right"},{value:"justify",label:"Justify"}],renderOption:m})},code:u,centered:!0,maxWidth:340,defaultExpanded:!1}},76528:function(e,t,o){"use strict";o.d(t,{Mt:function(){return n},nW:function(){return r},pc:function(){return l}});let n=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],r=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],l=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},66958:function(e,t,o){"use strict";o.d(t,{r:function(){return u}});var n=o(52322),r=o(40489),l=o(40284),a=o(38405),i=o(61324),c=o(36186),d=o(61271);function s({data:e,withCheckIcon:t,value:o,checkIconPosition:a,unstyled:u,renderOption:p}){if(!(0,c.f)(e)){var h;let c=(h=e.value,Array.isArray(o)?o.includes(h):o===h),s=t&&c&&(0,n.jsx)(l.n,{className:d.Z.optionsDropdownCheckIcon}),m=(0,n.jsxs)(n.Fragment,{children:["left"===a&&s,(0,n.jsx)("span",{children:e.label}),"right"===a&&s]});return(0,n.jsx)(i.h.Option,{value:e.value,disabled:e.disabled,className:(0,r.Z)({[d.Z.optionsDropdownOption]:!u}),"data-reverse":"right"===a||void 0,"data-checked":c||void 0,"aria-selected":c,active:c,children:"function"==typeof p?p({option:e,checked:c}):m})}let m=e.items.map(e=>(0,n.jsx)(s,{data:e,value:o,unstyled:u,withCheckIcon:t,checkIconPosition:a,renderOption:p},e.value));return(0,n.jsx)(i.h.Group,{label:e.group,children:m})}function u({data:e,hidden:t,hiddenWhenEmpty:o,filter:r,search:l,limit:d,maxDropdownHeight:u,withScrollArea:p=!0,filterOptions:h=!0,withCheckIcon:m=!1,value:f,checkIconPosition:b,nothingFoundMessage:x,unstyled:g,labelId:v,renderOption:j,scrollAreaProps:y,"aria-label":S}){!function e(t,o=new Set){if(Array.isArray(t))for(let n of t)if((0,c.f)(n))e(n.items,o);else{if(void 0===n.value)throw Error("[@mantine/core] Each option must have value property");if("string"!=typeof n.value)throw Error(`[@mantine/core] Option value must be a string, other data formats are not supported, got ${typeof n.value}`);if(o.has(n.value))throw Error(`[@mantine/core] Duplicate options are not supported. Option with value "${n.value}" was provided more than once`);o.add(n.value)}}(e);let w="string"==typeof l?(r||function e({options:t,search:o,limit:n}){let r=o.trim().toLowerCase(),l=[];for(let a=0;a0)return!1;return!0}(w),k=w.map(e=>(0,n.jsx)(s,{data:e,withCheckIcon:m,value:f,checkIconPosition:b,unstyled:g,renderOption:j},(0,c.f)(e)?e.group:e.value));return(0,n.jsx)(i.h.Dropdown,{hidden:t||o&&P,children:(0,n.jsxs)(i.h.Options,{labelledBy:v,"aria-label":S,children:[p?(0,n.jsx)(a.x.Autosize,{mah:u??220,type:"scroll",scrollbarSize:"var(--combobox-padding)",offsetScrollbars:"y",...y,children:k}):k,P&&x&&(0,n.jsx)(i.h.Empty,{children:x})]})})}},36186:function(e,t,o){"use strict";function n(e){return"group"in e}o.d(t,{f:function(){return n}})},77606:function(e,t,o){"use strict";o.d(t,{g:function(){return function e(t){return t.reduce((t,o)=>"group"in o?{...t,...e(o.items)}:(t[o.value]=o,t),{})}}})},79649:function(e,t,o){"use strict";o.d(t,{P:function(){return g}});var n=o(52322),r=o(2784),l=o(66178),a=o(9341),i=o(85057),c=o(51477),d=o(38483),s=o(82027),u=o(29995),p=o(77606),h=o(61324),m=o(66958),f=o(56237),b=o(73063);let x={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},g=(0,s.d)((e,t)=>{let o=(0,d.w)("Select",x,e),{classNames:s,styles:g,unstyled:v,vars:j,dropdownOpened:y,defaultDropdownOpened:S,onDropdownClose:w,onDropdownOpen:P,onFocus:k,onBlur:V,onClick:A,onChange:D,data:R,value:C,defaultValue:I,selectFirstOptionOnChange:O,onOptionSubmit:Y,comboboxProps:W,readOnly:F,disabled:N,filter:T,limit:E,withScrollArea:M,maxDropdownHeight:B,size:Z,searchable:_,rightSection:z,checkIconPosition:L,withCheckIcon:G,nothingFoundMessage:J,name:$,form:q,searchValue:H,defaultSearchValue:U,onSearchChange:X,allowDeselect:K,error:Q,rightSectionPointerEvents:ee,id:et,clearable:eo,clearButtonProps:en,hiddenInputProps:er,renderOption:el,onClear:ea,autoComplete:ei,scrollAreaProps:ec,...ed}=o,es=(0,r.useMemo)(()=>(0,u.R)(R),[R]),eu=(0,r.useMemo)(()=>(0,p.g)(es),[es]),ep=(0,l.M)(et),[eh,em,ef]=(0,a.C)({value:C,defaultValue:I,finalValue:null,onChange:D}),eb="string"==typeof eh?eu[eh]:void 0,ex=(0,i.D)(eb),[eg,ev]=(0,a.C)({value:H,defaultValue:U,finalValue:eb?eb.label:"",onChange:X}),ej=(0,f.K)({opened:y,defaultOpened:S,onDropdownOpen:()=>{P?.(),ej.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{w?.(),ej.resetSelectedOption()}}),{resolvedClassNames:ey,resolvedStyles:eS}=(0,c.h)({props:o,styles:g,classNames:s});(0,r.useEffect)(()=>{O&&ej.selectFirstOption()},[O,eh]),(0,r.useEffect)(()=>{null===C&&ev(""),"string"==typeof C&&eb&&(ex?.value!==eb.value||ex?.label!==eb.label)&&ev(eb.label)},[C,eb]);let ew=eo&&!!eh&&!N&&!F&&(0,n.jsx)(h.h.ClearButton,{size:Z,...en,onClear:()=>{em(null,null),ev(""),ea?.()}});return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(h.h,{store:ej,__staticSelector:"Select",classNames:ey,styles:eS,unstyled:v,readOnly:F,onOptionSubmit:e=>{Y?.(e);let t=K&&eu[e].value===eh?null:eu[e],o=t?t.value:null;em(o,t),ef||ev("string"==typeof o&&t?.label||""),ej.closeDropdown()},size:Z,...W,children:[(0,n.jsx)(h.h.Target,{targetType:_?"input":"button",autoComplete:ei,children:(0,n.jsx)(b.M,{id:ep,ref:t,rightSection:z||ew||(0,n.jsx)(h.h.Chevron,{size:Z,error:Q,unstyled:v}),rightSectionPointerEvents:ee||(ew?"all":"none"),...ed,size:Z,__staticSelector:"Select",disabled:N,readOnly:F||!_,value:eg,onChange:e=>{ev(e.currentTarget.value),ej.openDropdown(),O&&ej.selectFirstOption()},onFocus:e=>{_&&ej.openDropdown(),k?.(e)},onBlur:e=>{_&&ej.closeDropdown(),ev(null!=eh&&eu[eh]?.label||""),V?.(e)},onClick:e=>{_?ej.openDropdown():ej.toggleDropdown(),A?.(e)},classNames:ey,styles:eS,unstyled:v,pointer:!_,error:Q})}),(0,n.jsx)(m.r,{data:es,hidden:F||N,filter:T,search:eg,limit:E,hiddenWhenEmpty:!_||!J,withScrollArea:M,maxDropdownHeight:B,filterOptions:_&&eb?.label!==eg,value:eh,checkIconPosition:L,withCheckIcon:G,nothingFoundMessage:J,unstyled:v,labelId:ed.label?`${ep}-label`:void 0,"aria-label":ed.label?void 0:ed["aria-label"],renderOption:el,scrollAreaProps:ec})]}),(0,n.jsx)(h.h.HiddenInput,{value:eh,name:$,form:q,disabled:N,...er})]})});g.classes={...b.M.classes,...h.h.classes},g.displayName="@mantine/core/Select"},3900:function(e,t,o){"use strict";o.d(t,{q:function(){return r}});var n=o(2784);function r(e=!1,t){let{onOpen:o,onClose:r}=t||{},[l,a]=(0,n.useState)(e),i=(0,n.useCallback)(()=>{a(e=>e||(o?.(),!0))},[o]),c=(0,n.useCallback)(()=>{a(e=>e?(r?.(),!1):e)},[r]),d=(0,n.useCallback)(()=>{l?c():i()},[c,i,l]);return[l,{open:i,close:c,toggle:d}]}},85057:function(e,t,o){"use strict";o.d(t,{D:function(){return r}});var n=o(2784);function r(e){let t=(0,n.useRef)();return(0,n.useEffect)(()=>{t.current=e},[e]),t.current}}},function(e){e.O(0,[61177,66748,11340,61324,92888,49774,40179],function(){return e(e.s=21042)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/core/stepper-f0647948bdc6befc.js b/_next/static/chunks/pages/core/stepper-9aff875814b266ae.js similarity index 95% rename from _next/static/chunks/pages/core/stepper-f0647948bdc6befc.js rename to _next/static/chunks/pages/core/stepper-9aff875814b266ae.js index 73576403020..cf47e2d9333 100644 --- a/_next/static/chunks/pages/core/stepper-f0647948bdc6befc.js +++ b/_next/static/chunks/pages/core/stepper-9aff875814b266ae.js @@ -398,4 +398,4 @@ function Demo() { * * This source code is licensed under the MIT license. * See the LICENSE file in the root directory of this source tree. - */var r=(0,n(73681).Z)("outline","circle-check","IconCircleCheck",[["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-0"}],["path",{d:"M9 12l2 2l4 -4",key:"svg-1"}]])},6403:function(e,t,n){"use strict";n.d(t,{v:function(){return A}});var r=n(52322),p=n(2784),o=n(58898),i=n(91482),c=n(11200),s=n(13588),l=n(39568),a=n(90006),d=n(38483),S=n(46690),u=n(28559),h=n(82027);let[m,x]=(0,n(89106).R)("Stepper component was not found in tree"),v=()=>null;v.displayName="@mantine/core/StepperCompleted";var f=n(68755),j=n(40284),b=n(12491),y=n(96321),g=n(63409),C={root:"m_cbb4ea7e",steps:"m_aaf89d0b",separator:"m_2a371ac9",content:"m_78da155d",step:"m_cbb57068","step--horizontal":"m_f56b1e2c","step--vertical":"m_833edb7e",verticalSeparator:"m_6496b3f3",stepWrapper:"m_818e70b",stepIcon:"m_1959ad01",stepCompletedIcon:"m_a79331dc",stepBody:"m_1956aa2a",stepLabel:"m_12051f6c",stepDescription:"m_164eea74"};let k=(e,t)=>"function"==typeof e?(0,r.jsx)(e,{step:t||0}):e,w={withIcon:!0,allowStepClick:!0,iconPosition:"left"},I=(0,h.d)((e,t)=>{let{classNames:n,className:p,style:o,styles:i,vars:c,step:l,state:a,color:S,icon:u,completedIcon:h,progressIcon:m,label:v,description:C,withIcon:I,iconSize:V,loading:G,allowStepClick:A,allowStepSelect:z,iconPosition:B,orientation:_,mod:N,...D}=(0,d.w)("StepperStep",w,e),M=x(),F=(0,f.rZ)(),W={classNames:n,styles:i},P="stepCompleted"===a?null:"stepProgress"===a?m:u,O={"data-progress":"stepProgress"===a||void 0,"data-completed":"stepCompleted"===a||void 0};return(0,r.jsxs)(g.k,{...M.getStyles("step",{className:p,style:o,variant:M.orientation,...W}),mod:[{"icon-position":B||M.iconPosition,"allow-click":A},N],ref:t,...O,...D,__vars:{"--step-color":S?(0,s.p)(S,F):void 0},tabIndex:A?0:-1,children:[I&&(0,r.jsxs)("span",{...M.getStyles("stepWrapper",W),children:[(0,r.jsxs)("span",{...M.getStyles("stepIcon",W),...O,children:[(0,r.jsx)(y.u,{mounted:"stepCompleted"===a,transition:"pop",duration:200,children:e=>(0,r.jsx)("span",{...M.getStyles("stepCompletedIcon",{style:e,...W}),children:G?(0,r.jsx)(b.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...M.getStyles("stepLoader",W)}):k(h,l)||(0,r.jsx)(j.n,{size:"60%"})})}),"stepCompleted"!==a?G?(0,r.jsx)(b.a,{...M.getStyles("stepLoader",W),size:"calc(var(--stepper-icon-size) / 2)",color:S}):k(P||u,l):null]}),"vertical"===_&&(0,r.jsx)("span",{...M.getStyles("verticalSeparator",W),"data-active":"stepCompleted"===a||void 0})]}),(v||C)&&(0,r.jsxs)("span",{...M.getStyles("stepBody",W),"data-orientation":M.orientation,"data-icon-position":B||M.iconPosition,children:[v&&(0,r.jsx)("span",{...M.getStyles("stepLabel",W),children:k(v,l)}),C&&(0,r.jsx)("span",{...M.getStyles("stepDescription",W),children:k(C,l)})]})]})});I.classes=C,I.displayName="@mantine/core/StepperStep";let V={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},G=(0,c.Z)((e,{color:t,iconSize:n,size:r,contentPadding:p,radius:c,autoContrast:d})=>({root:{"--stepper-color":t?(0,s.p)(t,e):void 0,"--stepper-icon-color":(0,a.o)(d,e)?(0,l.R)({color:t,theme:e,autoContrast:d}):void 0,"--stepper-icon-size":void 0===n?(0,i.ap)(r,"stepper-icon-size"):(0,o.h)(n),"--stepper-content-padding":(0,i.bG)(p),"--stepper-radius":void 0===c?void 0:(0,i.H5)(c),"--stepper-fz":(0,i.yv)(r),"--stepper-spacing":(0,i.bG)(r)}})),A=(0,h.d)((e,t)=>{let n=(0,d.w)("Stepper",V,e),{classNames:o,className:i,style:c,styles:s,unstyled:l,vars:a,children:h,onStepClick:x,active:f,icon:j,completedIcon:b,progressIcon:y,color:g,iconSize:k,contentPadding:w,orientation:I,iconPosition:A,size:z,radius:B,allowNextStepsSelect:_,wrap:N,...D}=n,M=(0,S.y)({name:"Stepper",classes:C,props:n,className:i,style:c,classNames:o,styles:s,unstyled:l,vars:a,varsResolver:G}),F=p.Children.toArray(h),W=F.filter(e=>e.type!==v),P=F.find(e=>e.type===v),O=W.reduce((e,t,n)=>{let r=f===n?"stepProgress":f>n?"stepCompleted":"stepInactive",o="function"==typeof x&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===r||_);return e.push((0,p.cloneElement)(t,{icon:t.props.icon||j||n+1,key:n,step:n,state:r,onClick:()=>o&&x?.(n),allowStepClick:o,completedIcon:t.props.completedIcon||b,progressIcon:t.props.progressIcon||y,color:t.props.color||g,iconSize:k,radius:B,iconPosition:t.props.iconPosition||A,orientation:I,unstyled:l})),"horizontal"===I&&n!==W.length-1&&e.push((0,p.createElement)("div",{...M("separator"),"data-active":nW.length-1?Z:T;return(0,r.jsx)(m,{value:{getStyles:M,orientation:I,iconPosition:A},children:(0,r.jsxs)(u.x,{...M("root"),ref:t,size:z,...D,children:[(0,r.jsx)(u.x,{...M("steps"),mod:{orientation:I,"icon-position":A,wrap:N&&"vertical"!==I},children:O}),E&&(0,r.jsx)("div",{...M("content"),children:E})]})})});A.classes=C,A.displayName="@mantine/core/Stepper",A.Completed=v,A.Step=I}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=62839)}),_N_E=e.O()}]); \ No newline at end of file + */var r=(0,n(73681).Z)("outline","circle-check","IconCircleCheck",[["path",{d:"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",key:"svg-0"}],["path",{d:"M9 12l2 2l4 -4",key:"svg-1"}]])},6403:function(e,t,n){"use strict";n.d(t,{v:function(){return A}});var r=n(52322),p=n(2784),o=n(58898),i=n(91482),c=n(11200),s=n(13588),l=n(39568),a=n(90006),d=n(38483),S=n(46690),u=n(28559),h=n(82027);let[m,x]=(0,n(89106).R)("Stepper component was not found in tree"),v=()=>null;v.displayName="@mantine/core/StepperCompleted";var f=n(68755),j=n(40284),b=n(12491),y=n(96321),g=n(63409),C={root:"m_cbb4ea7e",steps:"m_aaf89d0b",separator:"m_2a371ac9",content:"m_78da155d",step:"m_cbb57068","step--horizontal":"m_f56b1e2c","step--vertical":"m_833edb7e",verticalSeparator:"m_6496b3f3",stepWrapper:"m_818e70b",stepIcon:"m_1959ad01",stepCompletedIcon:"m_a79331dc",stepBody:"m_1956aa2a",stepLabel:"m_12051f6c",stepDescription:"m_164eea74"};let k=(e,t)=>"function"==typeof e?(0,r.jsx)(e,{step:t||0}):e,w={withIcon:!0,allowStepClick:!0,iconPosition:"left"},I=(0,h.d)((e,t)=>{let{classNames:n,className:p,style:o,styles:i,vars:c,step:l,state:a,color:S,icon:u,completedIcon:h,progressIcon:m,label:v,description:C,withIcon:I,iconSize:V,loading:G,allowStepClick:A,allowStepSelect:z,iconPosition:B,orientation:_,mod:N,...D}=(0,d.w)("StepperStep",w,e),M=x(),F=(0,f.rZ)(),W={classNames:n,styles:i},P="stepCompleted"===a?null:"stepProgress"===a?m:u,O={"data-progress":"stepProgress"===a||void 0,"data-completed":"stepCompleted"===a||void 0};return(0,r.jsxs)(g.k,{...M.getStyles("step",{className:p,style:o,variant:M.orientation,...W}),mod:[{"icon-position":B||M.iconPosition,"allow-click":A},N],ref:t,...O,...D,__vars:{"--step-color":S?(0,s.p)(S,F):void 0},tabIndex:A?0:-1,children:[I&&(0,r.jsxs)("span",{...M.getStyles("stepWrapper",W),children:[(0,r.jsxs)("span",{...M.getStyles("stepIcon",W),...O,children:[(0,r.jsx)(y.u,{mounted:"stepCompleted"===a,transition:"pop",duration:200,children:e=>(0,r.jsx)("span",{...M.getStyles("stepCompletedIcon",{style:e,...W}),children:G?(0,r.jsx)(b.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...M.getStyles("stepLoader",W)}):k(h,l)||(0,r.jsx)(j.n,{size:"60%"})})}),"stepCompleted"!==a?G?(0,r.jsx)(b.a,{...M.getStyles("stepLoader",W),size:"calc(var(--stepper-icon-size) / 2)",color:S}):k(P||u,l):null]}),"vertical"===_&&(0,r.jsx)("span",{...M.getStyles("verticalSeparator",W),"data-active":"stepCompleted"===a||void 0})]}),(v||C)&&(0,r.jsxs)("span",{...M.getStyles("stepBody",W),"data-orientation":M.orientation,"data-icon-position":B||M.iconPosition,children:[v&&(0,r.jsx)("span",{...M.getStyles("stepLabel",W),children:k(v,l)}),C&&(0,r.jsx)("span",{...M.getStyles("stepDescription",W),children:k(C,l)})]})]})});I.classes=C,I.displayName="@mantine/core/StepperStep";let V={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},G=(0,c.Z)((e,{color:t,iconSize:n,size:r,contentPadding:p,radius:c,autoContrast:d})=>({root:{"--stepper-color":t?(0,s.p)(t,e):void 0,"--stepper-icon-color":(0,a.o)(d,e)?(0,l.R)({color:t,theme:e,autoContrast:d}):void 0,"--stepper-icon-size":void 0===n?(0,i.ap)(r,"stepper-icon-size"):(0,o.h)(n),"--stepper-content-padding":(0,i.bG)(p),"--stepper-radius":void 0===c?void 0:(0,i.H5)(c),"--stepper-fz":(0,i.yv)(r),"--stepper-spacing":(0,i.bG)(r)}})),A=(0,h.d)((e,t)=>{let n=(0,d.w)("Stepper",V,e),{classNames:o,className:i,style:c,styles:s,unstyled:l,vars:a,children:h,onStepClick:x,active:f,icon:j,completedIcon:b,progressIcon:y,color:g,iconSize:k,contentPadding:w,orientation:I,iconPosition:A,size:z,radius:B,allowNextStepsSelect:_,wrap:N,autoContrast:D,...M}=n,F=(0,S.y)({name:"Stepper",classes:C,props:n,className:i,style:c,classNames:o,styles:s,unstyled:l,vars:a,varsResolver:G}),W=p.Children.toArray(h),P=W.filter(e=>e.type!==v),O=W.find(e=>e.type===v),T=P.reduce((e,t,n)=>{let r=f===n?"stepProgress":f>n?"stepCompleted":"stepInactive",o="function"==typeof x&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===r||_);return e.push((0,p.cloneElement)(t,{icon:t.props.icon||j||n+1,key:n,step:n,state:r,onClick:()=>o&&x?.(n),allowStepClick:o,completedIcon:t.props.completedIcon||b,progressIcon:t.props.progressIcon||y,color:t.props.color||g,iconSize:k,radius:B,iconPosition:t.props.iconPosition||A,orientation:I,unstyled:l})),"horizontal"===I&&n!==P.length-1&&e.push((0,p.createElement)("div",{...F("separator"),"data-active":nP.length-1?E:Z;return(0,r.jsx)(m,{value:{getStyles:F,orientation:I,iconPosition:A},children:(0,r.jsxs)(u.x,{...F("root"),ref:t,size:z,...M,children:[(0,r.jsx)(u.x,{...F("steps"),mod:{orientation:I,"icon-position":A,wrap:N&&"vertical"!==I},children:T}),L&&(0,r.jsx)("div",{...F("content"),children:L})]})})});A.classes=C,A.displayName="@mantine/core/Stepper",A.Completed=v,A.Step=I}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=62839)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/form/recipes-5956eeadd106838f.js b/_next/static/chunks/pages/form/recipes-46caf224b41d2898.js similarity index 72% rename from _next/static/chunks/pages/form/recipes-5956eeadd106838f.js rename to _next/static/chunks/pages/form/recipes-46caf224b41d2898.js index 6f78976f77e..2351a42ac11 100644 --- a/_next/static/chunks/pages/form/recipes-5956eeadd106838f.js +++ b/_next/static/chunks/pages/form/recipes-46caf224b41d2898.js @@ -276,4 +276,4 @@ function Demo() { ); } -`};var k=o(25071),w=o(15019);let C=(0,k.A)(w.us.formRecipes);function j(e){let t={h2:"h2",...(0,n.a)(),...e.components},{Demo:o}=t;return o||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"set-initial-values-with-async-request",children:"Set initial values with async request"}),"\n",(0,r.jsx)(o,{data:p}),"\n",(0,r.jsx)(t.h2,{id:"save-form-values-to-local-storage",children:"Save form values to local storage"}),"\n",(0,r.jsx)(o,{data:c}),"\n",(0,r.jsx)(t.h2,{id:"list-items-reordering",children:"List items reordering"}),"\n",(0,r.jsx)(o,{data:x}),"\n",(0,r.jsx)(t.h2,{id:"form-with-multiple-steps",children:"Form with multiple steps"}),"\n",(0,r.jsx)(o,{data:S})]})}function P(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(C,{...e,children:(0,r.jsx)(j,{...e})})}},16438:function(e,t,o){"use strict";o.d(t,{M:function(){return m}});var r=o(52322);o(2784);var n=o(38483),a=o(46690),s=o(28559),l=o(33502),i={root:"m_4451eb3a"};let p={},m=(0,l.b)((e,t)=>{let o=(0,n.w)("Center",p,e),{classNames:l,className:m,style:c,styles:d,unstyled:u,vars:f,inline:h,mod:v,...y}=o,x=(0,a.y)({name:"Center",props:o,classes:i,className:m,style:c,classNames:l,styles:d,unstyled:u,vars:f});return(0,r.jsx)(s.x,{ref:t,mod:[{inline:h},v],...x("root"),...y})});m.classes=i,m.displayName="@mantine/core/Center"},60284:function(e,t,o){"use strict";o.d(t,{W:function(){return b}});var r=o(52322),n=o(40489),a=o(66178),s=o(9341);o(2784);var l=o(91482),i=o(11200),p=o(51477),m=o(46690),c=o(38483),d=o(97072),u=o(82027),f=o(54813),h=o(6941),v=o(73063),y={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let x={visibilityToggleIcon:({reveal:e})=>(0,r.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,r.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},g=(0,i.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,l.ap)(t,"psi-icon-size"),"--psi-button-size":(0,l.ap)(t,"psi-button-size")}})),b=(0,u.d)((e,t)=>{let o=(0,c.w)("PasswordInput",x,e),{classNames:l,className:i,style:u,styles:v,unstyled:b,vars:I,required:S,error:k,leftSection:w,disabled:C,id:j,variant:P,inputContainer:_,description:N,label:D,size:E,errorProps:V,descriptionProps:F,labelProps:z,withAsterisk:T,inputWrapperOrder:L,wrapperProps:B,radius:G,rightSection:Z,rightSectionWidth:M,rightSectionPointerEvents:O,leftSectionWidth:W,visible:$,defaultVisible:J,onVisibilityChange:A,visibilityToggleIcon:R,visibilityToggleButtonProps:H,rightSectionProps:U,leftSectionProps:K,leftSectionPointerEvents:X,mod:q,...Q}=o,Y=(0,a.M)(j),[ee,et]=(0,s.C)({value:$,defaultValue:J,finalValue:!1,onChange:A}),eo=()=>et(!ee),er=(0,m.y)({name:"PasswordInput",classes:y,props:o,className:i,style:u,classNames:l,styles:v,unstyled:b,vars:I,varsResolver:g}),{resolvedClassNames:en,resolvedStyles:ea}=(0,p.h)({classNames:l,styles:v,props:o}),{styleProps:es,rest:el}=(0,d.c)(Q),ei=(0,r.jsx)(f.A,{...er("visibilityToggle"),disabled:C,radius:G,"aria-hidden":!H,tabIndex:-1,...H,variant:"subtle",color:"gray",unstyled:b,onMouseDown:e=>{e.preventDefault(),H?.onMouseDown?.(e),eo()},onKeyDown:e=>{H?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),eo())},children:(0,r.jsx)(R,{reveal:ee})});return(0,r.jsx)(h.I.Wrapper,{required:S,id:Y,label:D,error:k,description:N,size:E,classNames:en,styles:ea,__staticSelector:"PasswordInput",errorProps:V,descriptionProps:F,unstyled:b,withAsterisk:T,inputWrapperOrder:L,inputContainer:_,variant:P,labelProps:{...z,htmlFor:Y},mod:q,...er("root"),...es,...B,children:(0,r.jsx)(h.I,{component:"div",error:k,leftSection:w,size:E,classNames:{...en,input:(0,n.Z)(y.input,en.input)},styles:ea,radius:G,disabled:C,__staticSelector:"PasswordInput",rightSectionWidth:M,rightSection:Z??ei,variant:P,unstyled:b,leftSectionWidth:W,rightSectionPointerEvents:O||"all",rightSectionProps:U,leftSectionProps:K,leftSectionPointerEvents:X,withAria:!1,children:(0,r.jsx)("input",{required:S,"data-invalid":!!k||void 0,"data-with-left-section":!!w||void 0,...er("innerInput"),disabled:C,id:Y,ref:t,...el,autoComplete:el.autoComplete||"off",type:ee?"text":"password"})})})});b.classes={...v.M.classes,...y},b.displayName="@mantine/core/PasswordInput"},6403:function(e,t,o){"use strict";o.d(t,{v:function(){return N}});var r=o(52322),n=o(2784),a=o(58898),s=o(91482),l=o(11200),i=o(13588),p=o(39568),m=o(90006),c=o(38483),d=o(46690),u=o(28559),f=o(82027);let[h,v]=(0,o(89106).R)("Stepper component was not found in tree"),y=()=>null;y.displayName="@mantine/core/StepperCompleted";var x=o(68755),g=o(40284),b=o(12491),I=o(96321),S=o(63409),k={root:"m_cbb4ea7e",steps:"m_aaf89d0b",separator:"m_2a371ac9",content:"m_78da155d",step:"m_cbb57068","step--horizontal":"m_f56b1e2c","step--vertical":"m_833edb7e",verticalSeparator:"m_6496b3f3",stepWrapper:"m_818e70b",stepIcon:"m_1959ad01",stepCompletedIcon:"m_a79331dc",stepBody:"m_1956aa2a",stepLabel:"m_12051f6c",stepDescription:"m_164eea74"};let w=(e,t)=>"function"==typeof e?(0,r.jsx)(e,{step:t||0}):e,C={withIcon:!0,allowStepClick:!0,iconPosition:"left"},j=(0,f.d)((e,t)=>{let{classNames:o,className:n,style:a,styles:s,vars:l,step:p,state:m,color:d,icon:u,completedIcon:f,progressIcon:h,label:y,description:k,withIcon:j,iconSize:P,loading:_,allowStepClick:N,allowStepSelect:D,iconPosition:E,orientation:V,mod:F,...z}=(0,c.w)("StepperStep",C,e),T=v(),L=(0,x.rZ)(),B={classNames:o,styles:s},G="stepCompleted"===m?null:"stepProgress"===m?h:u,Z={"data-progress":"stepProgress"===m||void 0,"data-completed":"stepCompleted"===m||void 0};return(0,r.jsxs)(S.k,{...T.getStyles("step",{className:n,style:a,variant:T.orientation,...B}),mod:[{"icon-position":E||T.iconPosition,"allow-click":N},F],ref:t,...Z,...z,__vars:{"--step-color":d?(0,i.p)(d,L):void 0},tabIndex:N?0:-1,children:[j&&(0,r.jsxs)("span",{...T.getStyles("stepWrapper",B),children:[(0,r.jsxs)("span",{...T.getStyles("stepIcon",B),...Z,children:[(0,r.jsx)(I.u,{mounted:"stepCompleted"===m,transition:"pop",duration:200,children:e=>(0,r.jsx)("span",{...T.getStyles("stepCompletedIcon",{style:e,...B}),children:_?(0,r.jsx)(b.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...T.getStyles("stepLoader",B)}):w(f,p)||(0,r.jsx)(g.n,{size:"60%"})})}),"stepCompleted"!==m?_?(0,r.jsx)(b.a,{...T.getStyles("stepLoader",B),size:"calc(var(--stepper-icon-size) / 2)",color:d}):w(G||u,p):null]}),"vertical"===V&&(0,r.jsx)("span",{...T.getStyles("verticalSeparator",B),"data-active":"stepCompleted"===m||void 0})]}),(y||k)&&(0,r.jsxs)("span",{...T.getStyles("stepBody",B),"data-orientation":T.orientation,"data-icon-position":E||T.iconPosition,children:[y&&(0,r.jsx)("span",{...T.getStyles("stepLabel",B),children:w(y,p)}),k&&(0,r.jsx)("span",{...T.getStyles("stepDescription",B),children:w(k,p)})]})]})});j.classes=k,j.displayName="@mantine/core/StepperStep";let P={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},_=(0,l.Z)((e,{color:t,iconSize:o,size:r,contentPadding:n,radius:l,autoContrast:c})=>({root:{"--stepper-color":t?(0,i.p)(t,e):void 0,"--stepper-icon-color":(0,m.o)(c,e)?(0,p.R)({color:t,theme:e,autoContrast:c}):void 0,"--stepper-icon-size":void 0===o?(0,s.ap)(r,"stepper-icon-size"):(0,a.h)(o),"--stepper-content-padding":(0,s.bG)(n),"--stepper-radius":void 0===l?void 0:(0,s.H5)(l),"--stepper-fz":(0,s.yv)(r),"--stepper-spacing":(0,s.bG)(r)}})),N=(0,f.d)((e,t)=>{let o=(0,c.w)("Stepper",P,e),{classNames:a,className:s,style:l,styles:i,unstyled:p,vars:m,children:f,onStepClick:v,active:x,icon:g,completedIcon:b,progressIcon:I,color:S,iconSize:w,contentPadding:C,orientation:j,iconPosition:N,size:D,radius:E,allowNextStepsSelect:V,wrap:F,...z}=o,T=(0,d.y)({name:"Stepper",classes:k,props:o,className:s,style:l,classNames:a,styles:i,unstyled:p,vars:m,varsResolver:_}),L=n.Children.toArray(f),B=L.filter(e=>e.type!==y),G=L.find(e=>e.type===y),Z=B.reduce((e,t,o)=>{let r=x===o?"stepProgress":x>o?"stepCompleted":"stepInactive",a="function"==typeof v&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===r||V);return e.push((0,n.cloneElement)(t,{icon:t.props.icon||g||o+1,key:o,step:o,state:r,onClick:()=>a&&v?.(o),allowStepClick:a,completedIcon:t.props.completedIcon||b,progressIcon:t.props.progressIcon||I,color:t.props.color||S,iconSize:w,radius:E,iconPosition:t.props.iconPosition||N,orientation:j,unstyled:p})),"horizontal"===j&&o!==B.length-1&&e.push((0,n.createElement)("div",{...T("separator"),"data-active":oB.length-1?O:M;return(0,r.jsx)(h,{value:{getStyles:T,orientation:j,iconPosition:N},children:(0,r.jsxs)(u.x,{...T("root"),ref:t,size:D,...z,children:[(0,r.jsx)(u.x,{...T("steps"),mod:{orientation:j,"icon-position":N,wrap:F&&"vertical"!==j},children:Z}),W&&(0,r.jsx)("div",{...T("content"),children:W})]})})});N.classes=k,N.displayName="@mantine/core/Stepper",N.Completed=y,N.Step=j}},function(e){e.O(0,[4185,61177,8511,66748,11340,405,92888,49774,40179],function(){return e(e.s=42464)}),_N_E=e.O()}]); \ No newline at end of file +`};var k=o(25071),w=o(15019);let C=(0,k.A)(w.us.formRecipes);function j(e){let t={h2:"h2",...(0,n.a)(),...e.components},{Demo:o}=t;return o||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"set-initial-values-with-async-request",children:"Set initial values with async request"}),"\n",(0,r.jsx)(o,{data:p}),"\n",(0,r.jsx)(t.h2,{id:"save-form-values-to-local-storage",children:"Save form values to local storage"}),"\n",(0,r.jsx)(o,{data:c}),"\n",(0,r.jsx)(t.h2,{id:"list-items-reordering",children:"List items reordering"}),"\n",(0,r.jsx)(o,{data:x}),"\n",(0,r.jsx)(t.h2,{id:"form-with-multiple-steps",children:"Form with multiple steps"}),"\n",(0,r.jsx)(o,{data:S})]})}function P(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(C,{...e,children:(0,r.jsx)(j,{...e})})}},16438:function(e,t,o){"use strict";o.d(t,{M:function(){return m}});var r=o(52322);o(2784);var n=o(38483),a=o(46690),s=o(28559),l=o(33502),i={root:"m_4451eb3a"};let p={},m=(0,l.b)((e,t)=>{let o=(0,n.w)("Center",p,e),{classNames:l,className:m,style:c,styles:d,unstyled:u,vars:f,inline:h,mod:v,...y}=o,x=(0,a.y)({name:"Center",props:o,classes:i,className:m,style:c,classNames:l,styles:d,unstyled:u,vars:f});return(0,r.jsx)(s.x,{ref:t,mod:[{inline:h},v],...x("root"),...y})});m.classes=i,m.displayName="@mantine/core/Center"},60284:function(e,t,o){"use strict";o.d(t,{W:function(){return b}});var r=o(52322),n=o(40489),a=o(66178),s=o(9341);o(2784);var l=o(91482),i=o(11200),p=o(51477),m=o(46690),c=o(38483),d=o(97072),u=o(82027),f=o(54813),h=o(6941),v=o(73063),y={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let x={visibilityToggleIcon:({reveal:e})=>(0,r.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,r.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},g=(0,i.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,l.ap)(t,"psi-icon-size"),"--psi-button-size":(0,l.ap)(t,"psi-button-size")}})),b=(0,u.d)((e,t)=>{let o=(0,c.w)("PasswordInput",x,e),{classNames:l,className:i,style:u,styles:v,unstyled:b,vars:I,required:S,error:k,leftSection:w,disabled:C,id:j,variant:P,inputContainer:_,description:N,label:D,size:E,errorProps:V,descriptionProps:F,labelProps:z,withAsterisk:T,inputWrapperOrder:L,wrapperProps:B,radius:G,rightSection:Z,rightSectionWidth:M,rightSectionPointerEvents:O,leftSectionWidth:W,visible:$,defaultVisible:J,onVisibilityChange:A,visibilityToggleIcon:R,visibilityToggleButtonProps:H,rightSectionProps:U,leftSectionProps:K,leftSectionPointerEvents:X,withErrorStyles:q,mod:Q,...Y}=o,ee=(0,a.M)(j),[et,eo]=(0,s.C)({value:$,defaultValue:J,finalValue:!1,onChange:A}),er=()=>eo(!et),en=(0,m.y)({name:"PasswordInput",classes:y,props:o,className:i,style:u,classNames:l,styles:v,unstyled:b,vars:I,varsResolver:g}),{resolvedClassNames:ea,resolvedStyles:es}=(0,p.h)({classNames:l,styles:v,props:o}),{styleProps:el,rest:ei}=(0,d.c)(Y),ep=(0,r.jsx)(f.A,{...en("visibilityToggle"),disabled:C,radius:G,"aria-hidden":!H,tabIndex:-1,...H,variant:"subtle",color:"gray",unstyled:b,onMouseDown:e=>{e.preventDefault(),H?.onMouseDown?.(e),er()},onKeyDown:e=>{H?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),er())},children:(0,r.jsx)(R,{reveal:et})});return(0,r.jsx)(h.I.Wrapper,{required:S,id:ee,label:D,error:k,description:N,size:E,classNames:ea,styles:es,__staticSelector:"PasswordInput",errorProps:V,descriptionProps:F,unstyled:b,withAsterisk:T,inputWrapperOrder:L,inputContainer:_,variant:P,labelProps:{...z,htmlFor:ee},mod:Q,...en("root"),...el,...B,children:(0,r.jsx)(h.I,{component:"div",error:k,leftSection:w,size:E,classNames:{...ea,input:(0,n.Z)(y.input,ea.input)},styles:es,radius:G,disabled:C,__staticSelector:"PasswordInput",rightSectionWidth:M,rightSection:Z??ep,variant:P,unstyled:b,leftSectionWidth:W,rightSectionPointerEvents:O||"all",rightSectionProps:U,leftSectionProps:K,leftSectionPointerEvents:X,withAria:!1,withErrorStyles:q,children:(0,r.jsx)("input",{required:S,"data-invalid":!!k||void 0,"data-with-left-section":!!w||void 0,...en("innerInput"),disabled:C,id:ee,ref:t,...ei,autoComplete:ei.autoComplete||"off",type:et?"text":"password"})})})});b.classes={...v.M.classes,...y},b.displayName="@mantine/core/PasswordInput"},6403:function(e,t,o){"use strict";o.d(t,{v:function(){return N}});var r=o(52322),n=o(2784),a=o(58898),s=o(91482),l=o(11200),i=o(13588),p=o(39568),m=o(90006),c=o(38483),d=o(46690),u=o(28559),f=o(82027);let[h,v]=(0,o(89106).R)("Stepper component was not found in tree"),y=()=>null;y.displayName="@mantine/core/StepperCompleted";var x=o(68755),g=o(40284),b=o(12491),I=o(96321),S=o(63409),k={root:"m_cbb4ea7e",steps:"m_aaf89d0b",separator:"m_2a371ac9",content:"m_78da155d",step:"m_cbb57068","step--horizontal":"m_f56b1e2c","step--vertical":"m_833edb7e",verticalSeparator:"m_6496b3f3",stepWrapper:"m_818e70b",stepIcon:"m_1959ad01",stepCompletedIcon:"m_a79331dc",stepBody:"m_1956aa2a",stepLabel:"m_12051f6c",stepDescription:"m_164eea74"};let w=(e,t)=>"function"==typeof e?(0,r.jsx)(e,{step:t||0}):e,C={withIcon:!0,allowStepClick:!0,iconPosition:"left"},j=(0,f.d)((e,t)=>{let{classNames:o,className:n,style:a,styles:s,vars:l,step:p,state:m,color:d,icon:u,completedIcon:f,progressIcon:h,label:y,description:k,withIcon:j,iconSize:P,loading:_,allowStepClick:N,allowStepSelect:D,iconPosition:E,orientation:V,mod:F,...z}=(0,c.w)("StepperStep",C,e),T=v(),L=(0,x.rZ)(),B={classNames:o,styles:s},G="stepCompleted"===m?null:"stepProgress"===m?h:u,Z={"data-progress":"stepProgress"===m||void 0,"data-completed":"stepCompleted"===m||void 0};return(0,r.jsxs)(S.k,{...T.getStyles("step",{className:n,style:a,variant:T.orientation,...B}),mod:[{"icon-position":E||T.iconPosition,"allow-click":N},F],ref:t,...Z,...z,__vars:{"--step-color":d?(0,i.p)(d,L):void 0},tabIndex:N?0:-1,children:[j&&(0,r.jsxs)("span",{...T.getStyles("stepWrapper",B),children:[(0,r.jsxs)("span",{...T.getStyles("stepIcon",B),...Z,children:[(0,r.jsx)(I.u,{mounted:"stepCompleted"===m,transition:"pop",duration:200,children:e=>(0,r.jsx)("span",{...T.getStyles("stepCompletedIcon",{style:e,...B}),children:_?(0,r.jsx)(b.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...T.getStyles("stepLoader",B)}):w(f,p)||(0,r.jsx)(g.n,{size:"60%"})})}),"stepCompleted"!==m?_?(0,r.jsx)(b.a,{...T.getStyles("stepLoader",B),size:"calc(var(--stepper-icon-size) / 2)",color:d}):w(G||u,p):null]}),"vertical"===V&&(0,r.jsx)("span",{...T.getStyles("verticalSeparator",B),"data-active":"stepCompleted"===m||void 0})]}),(y||k)&&(0,r.jsxs)("span",{...T.getStyles("stepBody",B),"data-orientation":T.orientation,"data-icon-position":E||T.iconPosition,children:[y&&(0,r.jsx)("span",{...T.getStyles("stepLabel",B),children:w(y,p)}),k&&(0,r.jsx)("span",{...T.getStyles("stepDescription",B),children:w(k,p)})]})]})});j.classes=k,j.displayName="@mantine/core/StepperStep";let P={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},_=(0,l.Z)((e,{color:t,iconSize:o,size:r,contentPadding:n,radius:l,autoContrast:c})=>({root:{"--stepper-color":t?(0,i.p)(t,e):void 0,"--stepper-icon-color":(0,m.o)(c,e)?(0,p.R)({color:t,theme:e,autoContrast:c}):void 0,"--stepper-icon-size":void 0===o?(0,s.ap)(r,"stepper-icon-size"):(0,a.h)(o),"--stepper-content-padding":(0,s.bG)(n),"--stepper-radius":void 0===l?void 0:(0,s.H5)(l),"--stepper-fz":(0,s.yv)(r),"--stepper-spacing":(0,s.bG)(r)}})),N=(0,f.d)((e,t)=>{let o=(0,c.w)("Stepper",P,e),{classNames:a,className:s,style:l,styles:i,unstyled:p,vars:m,children:f,onStepClick:v,active:x,icon:g,completedIcon:b,progressIcon:I,color:S,iconSize:w,contentPadding:C,orientation:j,iconPosition:N,size:D,radius:E,allowNextStepsSelect:V,wrap:F,autoContrast:z,...T}=o,L=(0,d.y)({name:"Stepper",classes:k,props:o,className:s,style:l,classNames:a,styles:i,unstyled:p,vars:m,varsResolver:_}),B=n.Children.toArray(f),G=B.filter(e=>e.type!==y),Z=B.find(e=>e.type===y),M=G.reduce((e,t,o)=>{let r=x===o?"stepProgress":x>o?"stepCompleted":"stepInactive",a="function"==typeof v&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===r||V);return e.push((0,n.cloneElement)(t,{icon:t.props.icon||g||o+1,key:o,step:o,state:r,onClick:()=>a&&v?.(o),allowStepClick:a,completedIcon:t.props.completedIcon||b,progressIcon:t.props.progressIcon||I,color:t.props.color||S,iconSize:w,radius:E,iconPosition:t.props.iconPosition||N,orientation:j,unstyled:p})),"horizontal"===j&&o!==G.length-1&&e.push((0,n.createElement)("div",{...L("separator"),"data-active":oG.length-1?W:O;return(0,r.jsx)(h,{value:{getStyles:L,orientation:j,iconPosition:N},children:(0,r.jsxs)(u.x,{...L("root"),ref:t,size:D,...T,children:[(0,r.jsx)(u.x,{...L("steps"),mod:{orientation:j,"icon-position":N,wrap:F&&"vertical"!==j},children:M}),$&&(0,r.jsx)("div",{...L("content"),children:$})]})})});N.classes=k,N.displayName="@mantine/core/Stepper",N.Completed=y,N.Step=j}},function(e){e.O(0,[4185,61177,8511,66748,11340,405,92888,49774,40179],function(){return e(e.s=42464)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/form/schema-validation-07f6ff27334c488c.js b/_next/static/chunks/pages/form/schema-validation-3b344e31ca7b87c4.js similarity index 56% rename from _next/static/chunks/pages/form/schema-validation-07f6ff27334c488c.js rename to _next/static/chunks/pages/form/schema-validation-3b344e31ca7b87c4.js index 20ee0a16774..ada7e47a9b4 100644 --- a/_next/static/chunks/pages/form/schema-validation-07f6ff27334c488c.js +++ b/_next/static/chunks/pages/form/schema-validation-3b344e31ca7b87c4.js @@ -1 +1 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[43589],{98002:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/form/schema-validation",function(){return t(98838)}])},98838:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return m}});var s=t(52322),a=t(45392),o=t(25071),r=t(15019);let i=(0,o.A)(r.us.formSchemaValidation);function l(e){let n={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components},{InstallScript: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.")}("InstallScript",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.h2,{id:"schema-based-validation",children:"Schema based validation"}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.code,{children:"@mantine/form"})," supports schema validation with:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/zod",children:"zod"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/joi",children:"joi"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/yup",children:"yup"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/superstruct",children:"superstruct"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/valibot",children:"valibot"})}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You need to install one of the libraries yourself, ",(0,s.jsx)(n.code,{children:"@mantine/form"})," package does not depend on any of them.\nIf you do not know what schema validation library to choose, use ",(0,s.jsx)(n.a,{href:"https://www.npmjs.com/package/zod",children:"zod"}),",\nit is the most modern and developer-friendly library."]}),"\n",(0,s.jsx)(n.h2,{id:"zod",children:"zod"}),"\n",(0,s.jsx)(n.p,{children:"Installation:"}),"\n",(0,s.jsx)(t,{packages:"zod mantine-form-zod-resolver"}),"\n",(0,s.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { zodResolver } from 'mantine-form-zod-resolver';\nimport { z } from 'zod';\nimport { useForm } from '@mantine/form';\n\nconst schema = z.object({\n name: z\n .string()\n .min(2, { message: 'Name should have at least 2 letters' }),\n email: z.string().email({ message: 'Invalid email' }),\n age: z.number().min(18, {\n message: 'You must be at least 18 to create an account',\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: zodResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'Name should have at least 2 letters',\n// email: 'Invalid email',\n// age: 'You must be at least 18 to create an account'\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"Nested fields validation"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { zodResolver } from 'mantine-form-zod-resolver';\nimport { z } from 'zod';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = z.object({\n nested: z.object({\n field: z\n .string()\n .min(2, { message: 'Field should have at least 2 letters' }),\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: zodResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'Field should have at least 2 letters',\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { zodResolver } from 'mantine-form-zod-resolver';\nimport { z } from 'zod';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = z.object({\n list: z.array(\n z.object({\n name: z\n .string()\n .min(2, { message: 'Name should have at least 2 letters' }),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: zodResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list.0.name': 'Name should have at least 2 letters',\n// }\n"})}),"\n",(0,s.jsx)(n.h2,{id:"yup",children:"yup"}),"\n",(0,s.jsx)(n.p,{children:"Installation:"}),"\n",(0,s.jsx)(t,{packages:"yup mantine-form-yup-resolver"}),"\n",(0,s.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { yupResolver } from 'mantine-form-yup-resolver';\nimport * as yup from 'yup';\nimport { useForm } from '@mantine/form';\n\nconst schema = yup.object().shape({\n name: yup.string().min(2, 'Name should have at least 2 letters'),\n email: yup\n .string()\n .required('Invalid email')\n .email('Invalid email'),\n age: yup\n .number()\n .min(18, 'You must be at least 18 to create an account'),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: yupResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'Name should have at least 2 letters',\n// email: 'Invalid email',\n// age: 'You must be at least 18 to create an account'\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"Nested fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { yupResolver } from 'mantine-form-yup-resolver';\nimport * as yup from 'yup';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = yup.object().shape({\n nested: yup.object().shape({\n field: yup\n .string()\n .min(2, 'Field should have at least 2 letters'),\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: yupResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'Field should have at least 2 letters',\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { yupResolver } from 'mantine-form-yup-resolver';\nimport * as yup from 'yup';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = yup.object().shape({\n list: yup.array().of(\n yup.object().shape({\n name: yup\n .string()\n .min(2, 'Name should have at least 2 letters'),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: yupResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list.0.name': 'Name should have at least 2 letters',\n// }\n"})}),"\n",(0,s.jsx)(n.h2,{id:"joi",children:"joi"}),"\n",(0,s.jsx)(n.p,{children:"Installation:"}),"\n",(0,s.jsx)(t,{packages:"joi mantine-form-joi-resolver"}),"\n",(0,s.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import Joi from 'joi';\nimport { joiResolver } from 'mantine-form-joi-resolver';\nimport { useForm } from '@mantine/form';\n\nconst schema = Joi.object({\n name: Joi.string().min(2).messages({\n 'string.min': 'Name should have at least 2 letters',\n 'string.empty': 'Name should have at least 2 letters',\n }),\n email: Joi.string()\n .email({ tlds: { allow: false } })\n .messages({\n 'string.email': 'Invalid email',\n 'string.empty': 'Invalid email',\n }),\n age: Joi.number()\n .min(18)\n .message('You must be at least 18 to create an account'),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: joiResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'Name should have at least 2 letters',\n// email: 'Invalid email',\n// age: 'You must be at least 18 to create an account'\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"Nested fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import Joi from 'joi';\nimport { joiResolver } from 'mantine-form-joi-resolver';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = Joi.object({\n nested: Joi.object({\n field: Joi.string().min(2).messages({\n 'string.min': 'Field should have at least 2 letters',\n 'string.empty': 'Field should have at least 2 letters',\n }),\n }),\n});\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: joiResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'Field should have at least 2 letters',\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import Joi from 'joi';\nimport { joiResolver } from 'mantine-form-joi-resolver';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = Joi.object({\n list: Joi.array().items(\n Joi.object({\n name: Joi.string().min(2).messages({\n 'string.min': 'Name should have at least 2 letters',\n 'string.empty': 'Name should have at least 2 letters',\n }),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: joiResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list.0.name': 'Name should have at least 2 letters',\n// }\n"})}),"\n",(0,s.jsx)(n.h2,{id:"superstruct",children:"superstruct"}),"\n",(0,s.jsx)(n.p,{children:"Installation:"}),"\n",(0,s.jsx)(t,{packages:"superstruct mantine-form-superstruct-resolver"}),"\n",(0,s.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import isEmail from 'is-email';\nimport { superstructResolver } from 'mantine-form-superstruct-resolver';\nimport * as s from 'superstruct';\n\nconst emailString = s.define('email', isEmail);\n\nconst schema = s.object({\n name: s.size(s.string(), 2, 30),\n email: emailString,\n age: s.min(s.number(), 18),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: superstructResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'name: Expected a string with a length between `2` and `30` but received one with a length of `0`',\n// email: 'email: Expected a value of type `email`, but received: `\"\"`',\n// age: 'age: Expected a number greater than or equal to 18 but received `16`',\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"Nested fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { superstructResolver } from 'mantine-form-superstruct-resolver';\nimport * as s from 'superstruct';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = s.object({\n nested: s.object({\n field: s.size(s.string(), 2, 30),\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: superstructResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'nested field: Expected a string with a length between `2` and `30` but received one with a length of `0`',\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { superstructResolver } from 'mantine-form-superstruct-resolver';\nimport * as s from 'superstruct';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = s.object({\n list: s.array(\n s.object({\n name: s.size(s.string(), 2, 30),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: superstructResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list 0 name: Expected a string with a length between `2` and `30` but received one with a length of `0`',\n// }\n"})}),"\n",(0,s.jsx)(n.h2,{id:"valibot",children:"valibot"}),"\n",(0,s.jsx)(n.p,{children:"Installation:"}),"\n",(0,s.jsx)(t,{packages:"valibot mantine-form-valibot-resolver"}),"\n",(0,s.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { valibotResolver } from 'mantine-form-valibot-resolver';\nimport {\n email,\n minLength,\n minValue,\n number,\n object,\n string,\n} from 'valibot';\nimport { useForm } from '@mantine/form';\n\nconst schema = object({\n name: string([minLength(2, 'Name should have at least 2 letters')]),\n email: string([email('Invalid email')]),\n age: number([\n minValue(18, 'You must be at least 18 to create an account'),\n ]),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: valibotResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'Name should have at least 2 letters',\n// email: 'Invalid email',\n// age: 'You must be at least 18 to create an account'\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"Nested fields validation"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { valibotResolver } from 'mantine-form-valibot-resolver';\nimport { minLength, object, string } from 'valibot';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = object({\n nested: object({\n field: string([\n minLength(2, 'Field should have at least 2 letters'),\n ]),\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: valibotResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'Field should have at least 2 letters',\n// }\n"})}),"\n",(0,s.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { valibotResolver } from 'mantine-form-valibot-resolver';\nimport { array, minLength, object, string } from 'valibot';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = object({\n list: array(\n object({\n name: string([\n minLength(2, 'Name should have at least 2 letters'),\n ]),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: valibotResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list.0.name': 'Name should have at least 2 letters',\n// }\n"})})]})}function m(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,s.jsx)(i,{...e,children:(0,s.jsx)(l,{...e})})}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=98002)}),_N_E=e.O()}]); \ No newline at end of file +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[43589],{98002:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/form/schema-validation",function(){return t(98838)}])},98838:function(e,n,t){"use strict";t.r(n),t.d(n,{default:function(){return m}});var a=t(52322),s=t(45392),r=t(25071),o=t(15019);let i=(0,r.A)(o.us.formSchemaValidation);function l(e){let n={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components},{InstallScript: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.")}("InstallScript",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h2,{id:"schema-based-validation",children:"Schema based validation"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"@mantine/form"})," supports schema validation with:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/zod",children:"zod"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/joi",children:"joi"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/yup",children:"yup"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/superstruct",children:"superstruct"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/valibot",children:"valibot"})}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["You need to install one of the libraries yourself, ",(0,a.jsx)(n.code,{children:"@mantine/form"})," package does not depend on any of them.\nIf you do not know what schema validation library to choose, use ",(0,a.jsx)(n.a,{href:"https://www.npmjs.com/package/zod",children:"zod"}),",\nit is the most modern and developer-friendly library."]}),"\n",(0,a.jsx)(n.h2,{id:"zod",children:"zod"}),"\n",(0,a.jsx)(n.p,{children:"Installation:"}),"\n",(0,a.jsx)(t,{packages:"zod mantine-form-zod-resolver"}),"\n",(0,a.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { zodResolver } from 'mantine-form-zod-resolver';\nimport { z } from 'zod';\nimport { useForm } from '@mantine/form';\n\nconst schema = z.object({\n name: z\n .string()\n .min(2, { message: 'Name should have at least 2 letters' }),\n email: z.string().email({ message: 'Invalid email' }),\n age: z.number().min(18, {\n message: 'You must be at least 18 to create an account',\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: zodResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'Name should have at least 2 letters',\n// email: 'Invalid email',\n// age: 'You must be at least 18 to create an account'\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"Nested fields validation"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { zodResolver } from 'mantine-form-zod-resolver';\nimport { z } from 'zod';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = z.object({\n nested: z.object({\n field: z\n .string()\n .min(2, { message: 'Field should have at least 2 letters' }),\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: zodResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'Field should have at least 2 letters',\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { zodResolver } from 'mantine-form-zod-resolver';\nimport { z } from 'zod';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = z.object({\n list: z.array(\n z.object({\n name: z\n .string()\n .min(2, { message: 'Name should have at least 2 letters' }),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: zodResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list.0.name': 'Name should have at least 2 letters',\n// }\n"})}),"\n",(0,a.jsx)(n.h2,{id:"yup",children:"yup"}),"\n",(0,a.jsx)(n.p,{children:"Installation:"}),"\n",(0,a.jsx)(t,{packages:"yup mantine-form-yup-resolver"}),"\n",(0,a.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { yupResolver } from 'mantine-form-yup-resolver';\nimport * as yup from 'yup';\nimport { useForm } from '@mantine/form';\n\nconst schema = yup.object().shape({\n name: yup.string().min(2, 'Name should have at least 2 letters'),\n email: yup\n .string()\n .required('Invalid email')\n .email('Invalid email'),\n age: yup\n .number()\n .min(18, 'You must be at least 18 to create an account'),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: yupResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'Name should have at least 2 letters',\n// email: 'Invalid email',\n// age: 'You must be at least 18 to create an account'\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"Nested fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { yupResolver } from 'mantine-form-yup-resolver';\nimport * as yup from 'yup';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = yup.object().shape({\n nested: yup.object().shape({\n field: yup\n .string()\n .min(2, 'Field should have at least 2 letters'),\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: yupResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'Field should have at least 2 letters',\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { yupResolver } from 'mantine-form-yup-resolver';\nimport * as yup from 'yup';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = yup.object().shape({\n list: yup.array().of(\n yup.object().shape({\n name: yup\n .string()\n .min(2, 'Name should have at least 2 letters'),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: yupResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list.0.name': 'Name should have at least 2 letters',\n// }\n"})}),"\n",(0,a.jsx)(n.h2,{id:"joi",children:"joi"}),"\n",(0,a.jsx)(n.p,{children:"Installation:"}),"\n",(0,a.jsx)(t,{packages:"joi mantine-form-joi-resolver"}),"\n",(0,a.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import Joi from 'joi';\nimport { joiResolver } from 'mantine-form-joi-resolver';\nimport { useForm } from '@mantine/form';\n\nconst schema = Joi.object({\n name: Joi.string().min(2).messages({\n 'string.min': 'Name should have at least 2 letters',\n 'string.empty': 'Name should have at least 2 letters',\n }),\n email: Joi.string()\n .email({ tlds: { allow: false } })\n .messages({\n 'string.email': 'Invalid email',\n 'string.empty': 'Invalid email',\n }),\n age: Joi.number()\n .min(18)\n .message('You must be at least 18 to create an account'),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: joiResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'Name should have at least 2 letters',\n// email: 'Invalid email',\n// age: 'You must be at least 18 to create an account'\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"Nested fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import Joi from 'joi';\nimport { joiResolver } from 'mantine-form-joi-resolver';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = Joi.object({\n nested: Joi.object({\n field: Joi.string().min(2).messages({\n 'string.min': 'Field should have at least 2 letters',\n 'string.empty': 'Field should have at least 2 letters',\n }),\n }),\n});\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: joiResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'Field should have at least 2 letters',\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import Joi from 'joi';\nimport { joiResolver } from 'mantine-form-joi-resolver';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = Joi.object({\n list: Joi.array().items(\n Joi.object({\n name: Joi.string().min(2).messages({\n 'string.min': 'Name should have at least 2 letters',\n 'string.empty': 'Name should have at least 2 letters',\n }),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: joiResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list.0.name': 'Name should have at least 2 letters',\n// }\n"})}),"\n",(0,a.jsx)(n.h2,{id:"superstruct",children:"superstruct"}),"\n",(0,a.jsx)(n.p,{children:"Installation:"}),"\n",(0,a.jsx)(t,{packages:"superstruct mantine-form-superstruct-resolver"}),"\n",(0,a.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import isEmail from 'is-email';\nimport { superstructResolver } from 'mantine-form-superstruct-resolver';\nimport * as s from 'superstruct';\n\nconst emailString = s.define('email', isEmail);\n\nconst schema = s.object({\n name: s.size(s.string(), 2, 30),\n email: emailString,\n age: s.min(s.number(), 18),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: superstructResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'name: Expected a string with a length between `2` and `30` but received one with a length of `0`',\n// email: 'email: Expected a value of type `email`, but received: `\"\"`',\n// age: 'age: Expected a number greater than or equal to 18 but received `16`',\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"Nested fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { superstructResolver } from 'mantine-form-superstruct-resolver';\nimport * as s from 'superstruct';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = s.object({\n nested: s.object({\n field: s.size(s.string(), 2, 30),\n }),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: superstructResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'nested field: Expected a string with a length between `2` and `30` but received one with a length of `0`',\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { superstructResolver } from 'mantine-form-superstruct-resolver';\nimport * as s from 'superstruct';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = s.object({\n list: s.array(\n s.object({\n name: s.size(s.string(), 2, 30),\n })\n ),\n});\n\nconst form = useForm({\n mode: 'uncontrolled',\n initialValues: {\n list: [{ name: '' }],\n },\n validate: superstructResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list 0 name: Expected a string with a length between `2` and `30` but received one with a length of `0`',\n// }\n"})}),"\n",(0,a.jsx)(n.h2,{id:"valibot",children:"valibot"}),"\n",(0,a.jsx)(n.p,{children:"Installation:"}),"\n",(0,a.jsx)(t,{packages:"valibot mantine-form-valibot-resolver"}),"\n",(0,a.jsx)(n.p,{children:"Basic fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { valibotResolver } from 'mantine-form-valibot-resolver';\nimport * as v from 'valibot';\nimport { useForm } from '@mantine/form';\n\nconst schema = v.object({\n name: v.pipe(\n v.string(),\n v.minLength(2, 'Name should have at least 2 letters')\n ),\n email: v.pipe(v.string(), v.email('Invalid email')),\n age: v.pipe(\n v.number(),\n v.minValue(18, 'You must be at least 18 to create an account')\n ),\n});\n\nconst form = useForm({\n initialValues: {\n name: '',\n email: '',\n age: 16,\n },\n validate: valibotResolver(schema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// name: 'Name should have at least 2 letters',\n// email: 'Invalid email',\n// age: 'You must be at least 18 to create an account'\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"Nested fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { valibotResolver } from 'mantine-form-valibot-resolver';\nimport * as v from 'valibot';\nimport { useForm } from '@mantine/form';\n\nconst nestedSchema = v.object({\n nested: v.object({\n field: v.pipe(\n v.string(),\n v.minLength(2, 'Field should have at least 2 letters')\n ),\n }),\n});\n\nconst form = useForm({\n initialValues: {\n nested: {\n field: '',\n },\n },\n validate: valibotResolver(nestedSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'nested.field': 'Field should have at least 2 letters',\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"List fields validation:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { valibotResolver } from 'mantine-form-valibot-resolver';\nimport * as v from 'valibot';\nimport { useForm } from '@mantine/form';\n\nconst listSchema = v.object({\n list: v.array(\n v.object({\n name: v.pipe(\n v.string(),\n v.minLength(2, 'Name should have at least 2 letters')\n ),\n })\n ),\n});\n\nconst form = useForm({\n initialValues: {\n list: [{ name: '' }],\n },\n validate: valibotResolver(listSchema),\n});\n\nform.validate();\nform.errors;\n// -> {\n// 'list.0.name': 'Name should have at least 2 letters',\n// }\n"})}),"\n",(0,a.jsx)(n.p,{children:"With TypeScript:"}),"\n",(0,a.jsxs)(n.p,{children:["You can use the ",(0,a.jsx)(n.code,{children:"InferInput"})," type from the ",(0,a.jsx)(n.code,{children:"valibot"})," library to get the type of the form data."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-tsx",children:"import { valibotResolver } from 'mantine-form-valibot-resolver';\nimport * as v from 'valibot';\nimport { useForm } from '@mantine/form';\n\nexport const userSchema = v.object({\n email: v.pipe(v.string(), v.email()),\n});\n\ntype FormData = v.InferInput;\n\nconst form = useForm({\n initialValues: {\n email: '',\n },\n validate: valibotResolver(userSchema),\n});\n"})})]})}function m(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(i,{...e,children:(0,a.jsx)(l,{...e})})}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=98002)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/form/validation-acd37c0c5307a437.js b/_next/static/chunks/pages/form/validation-47ac62158af40544.js similarity index 94% rename from _next/static/chunks/pages/form/validation-acd37c0c5307a437.js rename to _next/static/chunks/pages/form/validation-47ac62158af40544.js index 7a3e96699dd..cea65385eec 100644 --- a/_next/static/chunks/pages/form/validation-acd37c0c5307a437.js +++ b/_next/static/chunks/pages/form/validation-47ac62158af40544.js @@ -503,4 +503,4 @@ function Demo() { ); } -`,maxWidth:340,centered:!0}},42697:function(e,t,o){"use strict";o.d(t,{Y:function(){return S}});var n=o(52322),l=o(2784),a=o(40489),r=o(9462),i=o(9341),s=o(82692),m=o(70837),u=o(91482),d=o(11200),c=o(51477),p=o(46690),f=o(38483),h=o(82027),g=o(73063),b=o(63409);function v({direction:e,style:t,...o}){return(0,n.jsx)("svg",{style:{width:"var(--ni-chevron-size)",height:"var(--ni-chevron-size)",transform:"up"===e?"rotate(180deg)":void 0,...t},viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:(0,n.jsx)("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})}var x={root:"m_e2f5cd4e",controls:"m_95e17d22",control:"m_80b4b171"};let j=/^(0\.0*|-0(\.0*)?)$/,y=/^-?0\d+(\.\d+)?\.?$/;function I(e,t,o){return void 0===e||(void 0===t||e>=t)&&(void 0===o||e<=o)}let w={step:1,clampBehavior:"blur",allowDecimal:!0,allowNegative:!0,withKeyboardEvents:!0,allowLeadingZeros:!0,trimLeadingZeroesOnBlur:!0,startValue:0},k=(0,d.Z)((e,{size:t})=>({controls:{"--ni-chevron-size":(0,u.ap)(t,"ni-chevron-size")}})),S=(0,h.d)((e,t)=>{let o=(0,f.w)("NumberInput",w,e),{className:u,classNames:d,styles:h,unstyled:S,vars:N,onChange:P,onValueChange:E,value:C,defaultValue:O,max:F,min:T,step:A,hideControls:B,rightSection:_,isAllowed:D,clampBehavior:V,onBlur:M,allowDecimal:Y,decimalScale:R,onKeyDown:z,onKeyDownCapture:$,handlersRef:J,startValue:Z,disabled:G,rightSectionPointerEvents:L,allowNegative:X,readOnly:W,size:q,rightSectionWidth:K,stepHoldInterval:U,stepHoldDelay:H,allowLeadingZeros:Q,withKeyboardEvents:ee,trimLeadingZeroesOnBlur:et,...eo}=o,en=(0,p.y)({name:"NumberInput",classes:x,props:o,classNames:d,styles:h,unstyled:S,vars:N,varsResolver:k}),{resolvedClassNames:el,resolvedStyles:ea}=(0,c.h)({classNames:d,styles:h,props:o}),[er,ei]=(0,i.C)({value:C,defaultValue:O,onChange:P}),es=void 0!==H&&void 0!==U,em=(0,l.useRef)(null),eu=(0,l.useRef)(null),ed=(0,l.useRef)(0),ec=e=>{let t=String(e).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0},ep=e=>{em.current&&void 0!==e&&em.current.setSelectionRange(e,e)},ef=(0,l.useRef)();ef.current=()=>{let e;let t=Math.max(ec(er),ec(A)),o=10**t;if("number"!=typeof er||Number.isNaN(er))e=(0,s.u)(Z,T,F);else if(void 0!==F){let t=(Math.round(er*o)+Math.round(A*o))/o;e=t<=F?t:F}else e=(Math.round(er*o)+Math.round(A*o))/o;let n=e.toFixed(t);ei(parseFloat(n)),E?.({floatValue:parseFloat(n),formattedValue:n,value:n},{source:"increment"}),setTimeout(()=>ep(em.current?.value.length),0)};let eh=(0,l.useRef)();eh.current=()=>{let e;let t=void 0!==T?T:X?Number.MIN_SAFE_INTEGER:0,o=Math.max(ec(er),ec(A)),n=10**o;if("number"!=typeof er||Number.isNaN(er))e=(0,s.u)(Z,t,F);else{let o=(Math.round(er*n)-Math.round(A*n))/n;e=void 0!==t&&oep(em.current?.value.length),0)},(0,m.kR)(J,{increment:ef.current,decrement:eh.current});let eg=e=>{e?ef.current():eh.current(),ed.current+=1},eb=e=>{if(eg(e),es){let t="number"==typeof U?U:U(ed.current);eu.current=window.setTimeout(()=>eb(e),t)}},ev=(e,t)=>{e.preventDefault(),em.current?.focus(),eg(t),es&&(eu.current=window.setTimeout(()=>eb(t),H))},ex=()=>{eu.current&&window.clearTimeout(eu.current),eu.current=null,ed.current=0},ej=(0,n.jsxs)("div",{...en("controls"),children:[(0,n.jsx)(b.k,{...en("control"),tabIndex:-1,"aria-hidden":!0,disabled:G||"number"==typeof er&&void 0!==F&&er>=F,mod:{direction:"up"},onMouseDown:e=>e.preventDefault(),onPointerDown:e=>{ev(e,!0)},onPointerUp:ex,onPointerLeave:ex,children:(0,n.jsx)(v,{direction:"up"})}),(0,n.jsx)(b.k,{...en("control"),tabIndex:-1,"aria-hidden":!0,disabled:G||"number"==typeof er&&void 0!==T&&er<=T,mod:{direction:"down"},onMouseDown:e=>e.preventDefault(),onPointerDown:e=>{ev(e,!1)},onPointerUp:ex,onPointerLeave:ex,children:(0,n.jsx)(v,{direction:"down"})})]});return(0,n.jsx)(g.M,{component:r.h3,allowNegative:X,className:(0,a.Z)(x.root,u),size:q,...eo,readOnly:W,disabled:G,value:er,getInputRef:(0,m.Yx)(t,em),onValueChange:(e,t)=>{if("event"===t.source){var o;ei(!(("number"==typeof(o=e.floatValue)?o{z?.(e),!W&&ee&&("ArrowUp"===e.key&&(e.preventDefault(),ef.current()),"ArrowDown"===e.key&&(e.preventDefault(),eh.current()))},onKeyDownCapture:e=>{if($?.(e),"Backspace"===e.key){let t=em.current;0===t.selectionStart&&t.selectionStart===t.selectionEnd&&(e.preventDefault(),window.setTimeout(()=>ep(0),0))}},rightSectionPointerEvents:L??(G?"none":void 0),rightSectionWidth:K??`var(--ni-right-section-width-${q||"sm"})`,allowLeadingZeros:Q,onBlur:e=>{if(M?.(e),"blur"===V&&"number"==typeof er&&(0,s.u)(er,T,F)!==er&&ei((0,s.u)(er,T,F)),et&&"string"==typeof er){let e=er.replace(/^0+/,""),t=parseFloat(e);ei(Number.isNaN(t)?e:t)}},isAllowed:e=>"strict"===V?D?D(e)&&I(e.floatValue,T,F):I(e.floatValue,T,F):!D||D(e)})});S.classes={...g.M.classes,...x},S.displayName="@mantine/core/NumberInput"},60284:function(e,t,o){"use strict";o.d(t,{W:function(){return j}});var n=o(52322),l=o(40489),a=o(66178),r=o(9341);o(2784);var i=o(91482),s=o(11200),m=o(51477),u=o(46690),d=o(38483),c=o(97072),p=o(82027),f=o(54813),h=o(6941),g=o(73063),b={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let v={visibilityToggleIcon:({reveal:e})=>(0,n.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,n.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},x=(0,s.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,i.ap)(t,"psi-icon-size"),"--psi-button-size":(0,i.ap)(t,"psi-button-size")}})),j=(0,p.d)((e,t)=>{let o=(0,d.w)("PasswordInput",v,e),{classNames:i,className:s,style:p,styles:g,unstyled:j,vars:y,required:I,error:w,leftSection:k,disabled:S,id:N,variant:P,inputContainer:E,description:C,label:O,size:F,errorProps:T,descriptionProps:A,labelProps:B,withAsterisk:_,inputWrapperOrder:D,wrapperProps:V,radius:M,rightSection:Y,rightSectionWidth:R,rightSectionPointerEvents:z,leftSectionWidth:$,visible:J,defaultVisible:Z,onVisibilityChange:G,visibilityToggleIcon:L,visibilityToggleButtonProps:X,rightSectionProps:W,leftSectionProps:q,leftSectionPointerEvents:K,mod:U,...H}=o,Q=(0,a.M)(N),[ee,et]=(0,r.C)({value:J,defaultValue:Z,finalValue:!1,onChange:G}),eo=()=>et(!ee),en=(0,u.y)({name:"PasswordInput",classes:b,props:o,className:s,style:p,classNames:i,styles:g,unstyled:j,vars:y,varsResolver:x}),{resolvedClassNames:el,resolvedStyles:ea}=(0,m.h)({classNames:i,styles:g,props:o}),{styleProps:er,rest:ei}=(0,c.c)(H),es=(0,n.jsx)(f.A,{...en("visibilityToggle"),disabled:S,radius:M,"aria-hidden":!X,tabIndex:-1,...X,variant:"subtle",color:"gray",unstyled:j,onMouseDown:e=>{e.preventDefault(),X?.onMouseDown?.(e),eo()},onKeyDown:e=>{X?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),eo())},children:(0,n.jsx)(L,{reveal:ee})});return(0,n.jsx)(h.I.Wrapper,{required:I,id:Q,label:O,error:w,description:C,size:F,classNames:el,styles:ea,__staticSelector:"PasswordInput",errorProps:T,descriptionProps:A,unstyled:j,withAsterisk:_,inputWrapperOrder:D,inputContainer:E,variant:P,labelProps:{...B,htmlFor:Q},mod:U,...en("root"),...er,...V,children:(0,n.jsx)(h.I,{component:"div",error:w,leftSection:k,size:F,classNames:{...el,input:(0,l.Z)(b.input,el.input)},styles:ea,radius:M,disabled:S,__staticSelector:"PasswordInput",rightSectionWidth:R,rightSection:Y??es,variant:P,unstyled:j,leftSectionWidth:$,rightSectionPointerEvents:z||"all",rightSectionProps:W,leftSectionProps:q,leftSectionPointerEvents:K,withAria:!1,children:(0,n.jsx)("input",{required:I,"data-invalid":!!w||void 0,"data-with-left-section":!!k||void 0,...en("innerInput"),disabled:S,id:Q,ref:t,...ei,autoComplete:ei.autoComplete||"off",type:ee?"text":"password"})})})});j.classes={...g.M.classes,...b},j.displayName="@mantine/core/PasswordInput"},51057:function(e,t,o){"use strict";o.d(t,{J:function(){return l}});var n=o(1328);function l(e){return(0,n.w)(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,e)}},3095:function(e,t,o){"use strict";function n(e){let t=e||!0;return e=>"string"==typeof e?e.trim().length>0?null:t:Array.isArray(e)?e.length>0?null:t:null==e||!1===e?t:null}o.d(t,{U:function(){return n}})},1328:function(e,t,o){"use strict";function n(e,t){let o=t||!0;return t=>"string"!=typeof t?o:e.test(t)?null:o}o.d(t,{w:function(){return n}})}},function(e){e.O(0,[61177,9462,66748,11340,405,92888,49774,40179],function(){return e(e.s=8460)}),_N_E=e.O()}]); \ No newline at end of file +`,maxWidth:340,centered:!0}},42697:function(e,t,o){"use strict";o.d(t,{Y:function(){return S}});var n=o(52322),l=o(2784),a=o(40489),r=o(9462),i=o(9341),s=o(82692),m=o(70837),u=o(91482),d=o(11200),c=o(51477),p=o(46690),f=o(38483),h=o(82027),g=o(73063),b=o(63409);function v({direction:e,style:t,...o}){return(0,n.jsx)("svg",{style:{width:"var(--ni-chevron-size)",height:"var(--ni-chevron-size)",transform:"up"===e?"rotate(180deg)":void 0,...t},viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",...o,children:(0,n.jsx)("path",{d:"M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})}var x={root:"m_e2f5cd4e",controls:"m_95e17d22",control:"m_80b4b171"};let j=/^(0\.0*|-0(\.0*)?)$/,y=/^-?0\d+(\.\d+)?\.?$/;function I(e,t,o){return void 0===e||(void 0===t||e>=t)&&(void 0===o||e<=o)}let w={step:1,clampBehavior:"blur",allowDecimal:!0,allowNegative:!0,withKeyboardEvents:!0,allowLeadingZeros:!0,trimLeadingZeroesOnBlur:!0,startValue:0},k=(0,d.Z)((e,{size:t})=>({controls:{"--ni-chevron-size":(0,u.ap)(t,"ni-chevron-size")}})),S=(0,h.d)((e,t)=>{let o=(0,f.w)("NumberInput",w,e),{className:u,classNames:d,styles:h,unstyled:S,vars:N,onChange:P,onValueChange:E,value:C,defaultValue:O,max:F,min:T,step:A,hideControls:B,rightSection:_,isAllowed:D,clampBehavior:V,onBlur:M,allowDecimal:Y,decimalScale:R,onKeyDown:z,onKeyDownCapture:$,handlersRef:J,startValue:Z,disabled:G,rightSectionPointerEvents:L,allowNegative:X,readOnly:W,size:q,rightSectionWidth:K,stepHoldInterval:U,stepHoldDelay:H,allowLeadingZeros:Q,withKeyboardEvents:ee,trimLeadingZeroesOnBlur:et,...eo}=o,en=(0,p.y)({name:"NumberInput",classes:x,props:o,classNames:d,styles:h,unstyled:S,vars:N,varsResolver:k}),{resolvedClassNames:el,resolvedStyles:ea}=(0,c.h)({classNames:d,styles:h,props:o}),[er,ei]=(0,i.C)({value:C,defaultValue:O,onChange:P}),es=void 0!==H&&void 0!==U,em=(0,l.useRef)(null),eu=(0,l.useRef)(null),ed=(0,l.useRef)(0),ec=e=>{let t=String(e).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0},ep=e=>{em.current&&void 0!==e&&em.current.setSelectionRange(e,e)},ef=(0,l.useRef)();ef.current=()=>{let e;let t=Math.max(ec(er),ec(A)),o=10**t;if("number"!=typeof er||Number.isNaN(er))e=(0,s.u)(Z,T,F);else if(void 0!==F){let t=(Math.round(er*o)+Math.round(A*o))/o;e=t<=F?t:F}else e=(Math.round(er*o)+Math.round(A*o))/o;let n=e.toFixed(t);ei(parseFloat(n)),E?.({floatValue:parseFloat(n),formattedValue:n,value:n},{source:"increment"}),setTimeout(()=>ep(em.current?.value.length),0)};let eh=(0,l.useRef)();eh.current=()=>{let e;let t=void 0!==T?T:X?Number.MIN_SAFE_INTEGER:0,o=Math.max(ec(er),ec(A)),n=10**o;if("number"!=typeof er||Number.isNaN(er))e=(0,s.u)(Z,t,F);else{let o=(Math.round(er*n)-Math.round(A*n))/n;e=void 0!==t&&oep(em.current?.value.length),0)},(0,m.kR)(J,{increment:ef.current,decrement:eh.current});let eg=e=>{e?ef.current():eh.current(),ed.current+=1},eb=e=>{if(eg(e),es){let t="number"==typeof U?U:U(ed.current);eu.current=window.setTimeout(()=>eb(e),t)}},ev=(e,t)=>{e.preventDefault(),em.current?.focus(),eg(t),es&&(eu.current=window.setTimeout(()=>eb(t),H))},ex=()=>{eu.current&&window.clearTimeout(eu.current),eu.current=null,ed.current=0},ej=(0,n.jsxs)("div",{...en("controls"),children:[(0,n.jsx)(b.k,{...en("control"),tabIndex:-1,"aria-hidden":!0,disabled:G||"number"==typeof er&&void 0!==F&&er>=F,mod:{direction:"up"},onMouseDown:e=>e.preventDefault(),onPointerDown:e=>{ev(e,!0)},onPointerUp:ex,onPointerLeave:ex,children:(0,n.jsx)(v,{direction:"up"})}),(0,n.jsx)(b.k,{...en("control"),tabIndex:-1,"aria-hidden":!0,disabled:G||"number"==typeof er&&void 0!==T&&er<=T,mod:{direction:"down"},onMouseDown:e=>e.preventDefault(),onPointerDown:e=>{ev(e,!1)},onPointerUp:ex,onPointerLeave:ex,children:(0,n.jsx)(v,{direction:"down"})})]});return(0,n.jsx)(g.M,{component:r.h3,allowNegative:X,className:(0,a.Z)(x.root,u),size:q,...eo,readOnly:W,disabled:G,value:er,getInputRef:(0,m.Yx)(t,em),onValueChange:(e,t)=>{if("event"===t.source){var o;ei(!(("number"==typeof(o=e.floatValue)?o{z?.(e),!W&&ee&&("ArrowUp"===e.key&&(e.preventDefault(),ef.current()),"ArrowDown"===e.key&&(e.preventDefault(),eh.current()))},onKeyDownCapture:e=>{if($?.(e),"Backspace"===e.key){let t=em.current;0===t.selectionStart&&t.selectionStart===t.selectionEnd&&(e.preventDefault(),window.setTimeout(()=>ep(0),0))}},rightSectionPointerEvents:L??(G?"none":void 0),rightSectionWidth:K??`var(--ni-right-section-width-${q||"sm"})`,allowLeadingZeros:Q,onBlur:e=>{if(M?.(e),"blur"===V&&"number"==typeof er&&(0,s.u)(er,T,F)!==er&&ei((0,s.u)(er,T,F)),et&&"string"==typeof er){let e=er.replace(/^0+/,""),t=parseFloat(e);ei(Number.isNaN(t)?e:t)}},isAllowed:e=>"strict"===V?D?D(e)&&I(e.floatValue,T,F):I(e.floatValue,T,F):!D||D(e)})});S.classes={...g.M.classes,...x},S.displayName="@mantine/core/NumberInput"},60284:function(e,t,o){"use strict";o.d(t,{W:function(){return j}});var n=o(52322),l=o(40489),a=o(66178),r=o(9341);o(2784);var i=o(91482),s=o(11200),m=o(51477),u=o(46690),d=o(38483),c=o(97072),p=o(82027),f=o(54813),h=o(6941),g=o(73063),b={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let v={visibilityToggleIcon:({reveal:e})=>(0,n.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,n.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},x=(0,s.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,i.ap)(t,"psi-icon-size"),"--psi-button-size":(0,i.ap)(t,"psi-button-size")}})),j=(0,p.d)((e,t)=>{let o=(0,d.w)("PasswordInput",v,e),{classNames:i,className:s,style:p,styles:g,unstyled:j,vars:y,required:I,error:w,leftSection:k,disabled:S,id:N,variant:P,inputContainer:E,description:C,label:O,size:F,errorProps:T,descriptionProps:A,labelProps:B,withAsterisk:_,inputWrapperOrder:D,wrapperProps:V,radius:M,rightSection:Y,rightSectionWidth:R,rightSectionPointerEvents:z,leftSectionWidth:$,visible:J,defaultVisible:Z,onVisibilityChange:G,visibilityToggleIcon:L,visibilityToggleButtonProps:X,rightSectionProps:W,leftSectionProps:q,leftSectionPointerEvents:K,withErrorStyles:U,mod:H,...Q}=o,ee=(0,a.M)(N),[et,eo]=(0,r.C)({value:J,defaultValue:Z,finalValue:!1,onChange:G}),en=()=>eo(!et),el=(0,u.y)({name:"PasswordInput",classes:b,props:o,className:s,style:p,classNames:i,styles:g,unstyled:j,vars:y,varsResolver:x}),{resolvedClassNames:ea,resolvedStyles:er}=(0,m.h)({classNames:i,styles:g,props:o}),{styleProps:ei,rest:es}=(0,c.c)(Q),em=(0,n.jsx)(f.A,{...el("visibilityToggle"),disabled:S,radius:M,"aria-hidden":!X,tabIndex:-1,...X,variant:"subtle",color:"gray",unstyled:j,onMouseDown:e=>{e.preventDefault(),X?.onMouseDown?.(e),en()},onKeyDown:e=>{X?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),en())},children:(0,n.jsx)(L,{reveal:et})});return(0,n.jsx)(h.I.Wrapper,{required:I,id:ee,label:O,error:w,description:C,size:F,classNames:ea,styles:er,__staticSelector:"PasswordInput",errorProps:T,descriptionProps:A,unstyled:j,withAsterisk:_,inputWrapperOrder:D,inputContainer:E,variant:P,labelProps:{...B,htmlFor:ee},mod:H,...el("root"),...ei,...V,children:(0,n.jsx)(h.I,{component:"div",error:w,leftSection:k,size:F,classNames:{...ea,input:(0,l.Z)(b.input,ea.input)},styles:er,radius:M,disabled:S,__staticSelector:"PasswordInput",rightSectionWidth:R,rightSection:Y??em,variant:P,unstyled:j,leftSectionWidth:$,rightSectionPointerEvents:z||"all",rightSectionProps:W,leftSectionProps:q,leftSectionPointerEvents:K,withAria:!1,withErrorStyles:U,children:(0,n.jsx)("input",{required:I,"data-invalid":!!w||void 0,"data-with-left-section":!!k||void 0,...el("innerInput"),disabled:S,id:ee,ref:t,...es,autoComplete:es.autoComplete||"off",type:et?"text":"password"})})})});j.classes={...g.M.classes,...b},j.displayName="@mantine/core/PasswordInput"},51057:function(e,t,o){"use strict";o.d(t,{J:function(){return l}});var n=o(1328);function l(e){return(0,n.w)(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,e)}},3095:function(e,t,o){"use strict";function n(e){let t=e||!0;return e=>"string"==typeof e?e.trim().length>0?null:t:Array.isArray(e)?e.length>0?null:t:null==e||!1===e?t:null}o.d(t,{U:function(){return n}})},1328:function(e,t,o){"use strict";function n(e,t){let o=t||!0;return t=>"string"!=typeof t?o:e.test(t)?null:o}o.d(t,{w:function(){return n}})}},function(e){e.O(0,[61177,9462,66748,11340,405,92888,49774,40179],function(){return e(e.s=8460)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/hooks/use-hover-a9cfdd97b934d7ea.js b/_next/static/chunks/pages/hooks/use-hover-b2d985cf79aa2754.js similarity index 86% rename from _next/static/chunks/pages/hooks/use-hover-a9cfdd97b934d7ea.js rename to _next/static/chunks/pages/hooks/use-hover-b2d985cf79aa2754.js index f132347f1da..940d0e840c3 100644 --- a/_next/static/chunks/pages/hooks/use-hover-a9cfdd97b934d7ea.js +++ b/_next/static/chunks/pages/hooks/use-hover-b2d985cf79aa2754.js @@ -9,4 +9,4 @@ function Demo() {
); } -`};var l=t(25071),d=t(15019);let a=(0,l.A)(d.us.useHover);function f(e){let n={code:"code",h2:"h2",pre:"pre",...(0,o.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,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t,{data:c}),"\n",(0,r.jsx)(n.h2,{id:"definition",children:"Definition"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"function useHover(): {\n ref: React.MutableRefObject;\n hovered: boolean;\n};\n"})})]})}function h(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(a,{...e,children:(0,r.jsx)(f,{...e})})}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=40573)}),_N_E=e.O()}]); \ No newline at end of file +`};var l=t(25071),d=t(15019);let a=(0,l.A)(d.us.useHover);function f(e){let n={code:"code",h2:"h2",pre:"pre",...(0,o.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,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(t,{data:c}),"\n",(0,r.jsx)(n.h2,{id:"definition",children:"Definition"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-tsx",children:"function useHover(): {\n ref: React.RefObject;\n hovered: boolean;\n};\n"})})]})}function h(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(a,{...e,children:(0,r.jsx)(f,{...e})})}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=40573)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/hooks/use-previous-0144dea96975594b.js b/_next/static/chunks/pages/hooks/use-previous-5aaf31cdff99911a.js similarity index 69% rename from _next/static/chunks/pages/hooks/use-previous-0144dea96975594b.js rename to _next/static/chunks/pages/hooks/use-previous-5aaf31cdff99911a.js index 87870a36ebd..f48e94e05c3 100644 --- a/_next/static/chunks/pages/hooks/use-previous-0144dea96975594b.js +++ b/_next/static/chunks/pages/hooks/use-previous-5aaf31cdff99911a.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[37932],{67210:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/hooks/use-previous",function(){return n(1323)}])},1323:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return v}});var r=n(52322),u=n(45392),o=n(74770),i=n(8582),s=n(84821),c=n(2784);let l={type:"code",component:function(){let[e,t]=(0,s.U)(""),n=function(e){let t=(0,c.useRef)();return(0,c.useEffect)(()=>{t.current=e},[e]),t.current}(e);return(0,r.jsxs)("div",{children:[(0,r.jsx)(o.o,{label:"Enter some text here",placeholder:"Enter some text here",id:"previous-demo-input",value:e,onChange:t}),(0,r.jsxs)(i.x,{mt:"md",children:["Current value: ",e]}),(0,r.jsxs)(i.x,{children:["Previous value: ",n]})]})},code:` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[37932],{67210:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/hooks/use-previous",function(){return n(29763)}])},29763:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return v}});var r=n(52322),u=n(45392),o=n(74770),i=n(8582),s=n(84821),c=n(85057);let l={type:"code",component:function(){let[e,t]=(0,s.U)(""),n=(0,c.D)(e);return(0,r.jsxs)("div",{children:[(0,r.jsx)(o.o,{label:"Enter some text here",placeholder:"Enter some text here",id:"previous-demo-input",value:e,onChange:t}),(0,r.jsxs)(i.x,{mt:"md",children:["Current value: ",e]}),(0,r.jsxs)(i.x,{children:["Previous value: ",n]})]})},code:` import { TextInput, Text } from '@mantine/core'; import { usePrevious, useInputState } from '@mantine/hooks'; @@ -20,4 +20,4 @@ function Demo() {
); } -`};var a=n(25071),d=n(15019);let f=(0,a.A)(d.us.usePrevious);function p(e){let t={code:"code",h2:"h2",p:"p",pre:"pre",...(0,u.a)(),...e.components},{Demo:n}=t;return n||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"use-previous"})," stores the previous value of a state in a ref.\nIt returns ",(0,r.jsx)(t.code,{children:"undefined"})," on initial render and the previous value of a state after rerender:"]}),"\n",(0,r.jsx)(n,{data:l}),"\n",(0,r.jsx)(t.h2,{id:"definition",children:"Definition"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"function usePrevious(value: T): T | undefined;\n"})})]})}function v(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(f,{...e,children:(0,r.jsx)(p,{...e})})}},84821:function(e,t,n){"use strict";n.d(t,{U:function(){return u}});var r=n(2784);function u(e){let[t,n]=(0,r.useState)(e);return[t,e=>{if(e){if("function"==typeof e)n(e);else if("object"==typeof e&&"nativeEvent"in e){let{currentTarget:t}=e;n("checkbox"===t.type?t.checked:t.value)}else n(e)}else n(e)}]}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=67210)}),_N_E=e.O()}]); \ No newline at end of file +`};var a=n(25071),d=n(15019);let f=(0,a.A)(d.us.usePrevious);function p(e){let t={code:"code",h2:"h2",p:"p",pre:"pre",...(0,u.a)(),...e.components},{Demo:n}=t;return n||function(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Demo",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"use-previous"})," stores the previous value of a state in a ref.\nIt returns ",(0,r.jsx)(t.code,{children:"undefined"})," on initial render and the previous value of a state after rerender:"]}),"\n",(0,r.jsx)(n,{data:l}),"\n",(0,r.jsx)(t.h2,{id:"definition",children:"Definition"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-tsx",children:"function usePrevious(value: T): T | undefined;\n"})})]})}function v(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(f,{...e,children:(0,r.jsx)(p,{...e})})}},84821:function(e,t,n){"use strict";n.d(t,{U:function(){return u}});var r=n(2784);function u(e){let[t,n]=(0,r.useState)(e);return[t,e=>{if(e){if("function"==typeof e)n(e);else if("object"==typeof e&&"nativeEvent"in e){let{currentTarget:t}=e;n("checkbox"===t.type?t.checked:t.value)}else n(e)}else n(e)}]}},85057:function(e,t,n){"use strict";n.d(t,{D:function(){return u}});var r=n(2784);function u(e){let t=(0,r.useRef)();return(0,r.useEffect)(()=>{t.current=e},[e]),t.current}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=67210)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/index-92c2c24b9de76ea7.js b/_next/static/chunks/pages/index-0e1a32551efb02f5.js similarity index 82% rename from _next/static/chunks/pages/index-92c2c24b9de76ea7.js rename to _next/static/chunks/pages/index-0e1a32551efb02f5.js index 2218a894163..505c966f510 100644 --- a/_next/static/chunks/pages/index-92c2c24b9de76ea7.js +++ b/_next/static/chunks/pages/index-0e1a32551efb02f5.js @@ -387,4 +387,4 @@ function Demo() { ); } -`}},3789:function(e,t,r){"use strict";r.d(t,{_:function(){return v}});var o=r(52322),n=r(2784),i=r(89868),s=r(51934),l=r(1198),a=r(20992),c=r(93010),d=r(74770),u=r(60284),m=r(95047),p=r(8582),h=r(71873),x=r(17115),f=r(405);function v({noShadow:e,noPadding:t,noSubmit:r,style:v}){let[g,j]=(0,n.useState)("register"),[b,y]=(0,n.useState)(!1),[w,_]=(0,n.useState)(null),C=(0,f.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return(0,o.jsx)(l.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...v,position:"relative",backgroundColor:"var(--mantine-color-body)"},children:(0,o.jsxs)("form",{onSubmit:C.onSubmit(()=>{y(!0),_(null),setTimeout(()=>{y(!1),_("register"===g?"User with this email already exists":"User with this email does not exist")},3e3)}),children:[(0,o.jsx)(a.f,{visible:b}),"register"===g&&(0,o.jsxs)(c.Z,{grow:!0,children:[(0,o.jsx)(d.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...C.getInputProps("firstName")}),(0,o.jsx)(d.o,{required:!0,placeholder:"Your last name",label:"Last name",...C.getInputProps("lastName")})]}),(0,o.jsx)(d.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:(0,o.jsx)(i.Z,{size:16,stroke:1.5}),...C.getInputProps("email")}),(0,o.jsx)(u.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...C.getInputProps("password")}),"register"===g&&(0,o.jsx)(u.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...C.getInputProps("confirmPassword")}),"register"===g&&(0,o.jsx)(m.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...C.getInputProps("termsOfService",{type:"checkbox"})}),w&&(0,o.jsx)(p.x,{c:"red",size:"sm",mt:"sm",children:w}),!r&&(0,o.jsxs)(c.Z,{justify:"space-between",mt:"xl",children:[(0,o.jsx)(h.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{j(e=>"register"===e?"login":"register"),_(null)},size:"sm",children:"register"===g?"Have an account? Login":"Don't have an account? Register"}),(0,o.jsx)(x.z,{color:"blue",type:"submit",children:"register"===g?"Register":"Login"})]})]})})}},18451:function(e,t,r){"use strict";r.d(t,{l:function(){return H}});var o=r(52322),n=r(2784),i=r(26601),s=r(11200),l=r(58898),a=r(91482),c=r(82027),d=r(38483),u=r(46690),m=r(12063),p=r(89027),h=r(63409),x=r(28559),f=r(46752),v=r(82692);let[g,j]=(0,r(89106).R)("Carousel component was not found in tree");var b={root:"m_17884d0f",viewport:"m_a2dae653",container:"m_fcd81474",controls:"m_39bc3463",control:"m_64f58e10",indicators:"m_71ea3ab1",indicator:"m_eae68602",slide:"m_d98df724"};let y={},w=(0,c.d)((e,t)=>{let{classNames:r,className:n,style:i,styles:s,vars:l,mod:a,...c}=(0,d.w)("CarouselSlide",y,e),u=j();return(0,o.jsx)(x.x,{ref:t,mod:[{orientation:u.orientation},a],...u.getStyles("slide",{className:n,style:i,classNames:r,styles:s}),...c})});w.classes=b,w.displayName="@mantine/carousel/CarouselSlide";var _=r(68755),C=r(40580),k=r(32100),S=r(98446),z=r(54541),T=r(9437);function D({slideGap:e,slideSize:t,selector:r}){let n=(0,_.rZ)(),i=(0,C.L)({"--carousel-slide-gap":(0,a.bG)((0,k.v)(e)),"--carousel-slide-size":(0,l.h)((0,k.v)(t))}),s=(0,S.X)(n.breakpoints).reduce((r,o)=>(r[o]||(r[o]={}),"object"==typeof e&&void 0!==e[o]&&(r[o]["--carousel-slide-gap"]=(0,a.bG)(e[o])),"object"==typeof t&&void 0!==t[o]&&(r[o]["--carousel-slide-size"]=(0,a.bG)(t[o])),r),{}),c=(0,z.I)((0,S.X)(s),n).filter(e=>(0,S.X)(s[e.value]).length>0).map(e=>({query:`(min-width: ${n.breakpoints[e.value]})`,styles:s[e.value]}));return(0,o.jsx)(T.f,{styles:i,media:c,selector:r})}function N({dir:e,orientation:t,direction:r}){return"previous"===r?"horizontal"===t?90*("ltr"===e?1:-1):-180:"horizontal"===t?90*("ltr"===e?-1:1):0}let M={controlSize:26,controlsOffset:"sm",slideSize:"100%",slideGap:0,orientation:"horizontal",align:"center",slidesToScroll:1,includeGapInSize:!0,draggable:!0,dragFree:!1,loop:!1,speed:10,initialSlide:0,inViewThreshold:0,withControls:!0,withIndicators:!1,skipSnaps:!1,containScroll:"",withKeyboardEvents:!0},E=(0,s.Z)((e,{height:t,controlSize:r,controlsOffset:o})=>({root:{"--carousel-height":(0,l.h)(t),"--carousel-control-size":(0,l.h)(r),"--carousel-controls-offset":(0,a.bG)(o)}})),H=(0,c.d)((e,t)=>{let r=(0,d.w)("Carousel",M,e),{classNames:s,className:l,style:a,styles:c,unstyled:j,vars:y,children:w,getEmblaApi:_,onNextSlide:C,onPreviousSlide:k,onSlideChange:S,nextControlProps:z,previousControlProps:T,controlSize:H,controlsOffset:I,slideSize:B,slideGap:R,orientation:G,height:F,align:P,slidesToScroll:A,includeGapInSize:L,draggable:V,dragFree:Z,loop:O,speed:W,initialSlide:q,inViewThreshold:U,withControls:$,withIndicators:Y,plugins:J,nextControlIcon:X,previousControlIcon:K,skipSnaps:Q,containScroll:ee,withKeyboardEvents:et,mod:er,...eo}=r,en=(0,u.y)({name:"Carousel",classes:b,props:r,className:l,style:a,classNames:s,styles:c,unstyled:j,vars:y,varsResolver:E}),ei=(0,m.m)(),{dir:es}=(0,p.gm)(),[el,ea]=(0,i.Z)({axis:"horizontal"===G?"x":"y",direction:"horizontal"===G?es:void 0,startIndex:q,loop:O,align:P,slidesToScroll:A,draggable:V,dragFree:Z,speed:W,inViewThreshold:U,skipSnaps:Q,containScroll:ee},J),[ec,ed]=(0,n.useState)(0),[eu,em]=(0,n.useState)(0),ep=(0,n.useCallback)(e=>ea&&ea.scrollTo(e),[ea]),eh=(0,n.useCallback)(()=>{if(!ea)return;let e=ea.selectedScrollSnap();ed(e),S?.(e)},[ea,ed]),ex=(0,n.useCallback)(()=>{ea?.scrollPrev(),k?.()},[ea]),ef=(0,n.useCallback)(()=>{ea?.scrollNext(),C?.()},[ea]),ev=(0,n.useCallback)(e=>{et&&("ArrowRight"===e.key&&(e.preventDefault(),ef()),"ArrowLeft"===e.key&&(e.preventDefault(),ex()))},[ea]);(0,n.useEffect)(()=>{if(ea)return _?.(ea),eh(),em(ea.scrollSnapList().length),ea.on("select",eh),()=>{ea.off("select",eh)}},[ea,A]),(0,n.useEffect)(()=>{ea&&(ea.reInit(),em(ea.scrollSnapList().length),ed(e=>(0,v.u)(e,0,n.Children.toArray(w).length-1)))},[n.Children.toArray(w).length,A]);let eg=ea?.canScrollPrev()||!1,ej=ea?.canScrollNext()||!1,eb=Array(eu).fill(0).map((e,t)=>(0,n.createElement)(h.k,{...en("indicator"),key:t,"data-active":t===ec||void 0,"aria-hidden":!0,tabIndex:-1,onClick:()=>ep(t),"data-orientation":G}));return(0,o.jsxs)(g,{value:{getStyles:en,orientation:G},children:[(0,o.jsx)(D,{...r,selector:`.${ei}`}),(0,o.jsxs)(x.x,{ref:t,...en("root",{className:ei}),...eo,mod:[{orientation:G,"include-gap-in-size":L},er],onKeyDownCapture:ev,children:[(0,o.jsx)("div",{...en("viewport"),ref:el,children:(0,o.jsx)("div",{...en("container"),"data-orientation":G,children:w})}),Y&&(0,o.jsx)("div",{...en("indicators"),"data-orientation":G,children:eb}),$&&(0,o.jsxs)("div",{...en("controls"),"data-orientation":G,children:[(0,o.jsx)(h.k,{...T,...en("control",{className:T?.className,style:T?.style}),onClick:e=>{ex(),T?.onClick?.(e)},"data-inactive":!eg||void 0,tabIndex:eg?0:-1,children:void 0!==K?K:(0,o.jsx)(f.Q,{style:{transform:`rotate(${N({dir:es,orientation:G,direction:"previous"})}deg)`}})}),(0,o.jsx)(h.k,{...en("control",{className:z?.className,style:z?.style}),...z,onClick:e=>{ef(),z?.onClick?.(e)},"data-inactive":!ej||void 0,tabIndex:ej?0:-1,children:void 0!==X?X:(0,o.jsx)(f.Q,{style:{transform:`rotate(${N({dir:es,orientation:G,direction:"next"})}deg)`}})})]})]})]})});H.classes=b,H.displayName="@mantine/carousel/Carousel",H.Slide=w},62563:function(e,t,r){"use strict";r.d(t,{D:function(){return n}});var o=r(2784);function n(e,t){(0,o.useEffect)(()=>{e&&window.setTimeout(()=>{e.reInit()},t)},[e,t])}},75893:function(e,t,r){"use strict";r.d(t,{F:function(){return v}});var o=r(52322),n=r(2784),i=r(66178),s=r(9341),l=r(51477),a=r(38483),c=r(82027),d=r(29995),u=r(77606),m=r(61324),p=r(66958),h=r(56237),x=r(73063);let f={},v=(0,c.d)((e,t)=>{let r=(0,a.w)("Autocomplete",f,e),{classNames:c,styles:v,unstyled:g,vars:j,dropdownOpened:b,defaultDropdownOpened:y,onDropdownClose:w,onDropdownOpen:_,onFocus:C,onBlur:k,onClick:S,onChange:z,data:T,value:D,defaultValue:N,selectFirstOptionOnChange:M,onOptionSubmit:E,comboboxProps:H,readOnly:I,disabled:B,filter:R,limit:G,withScrollArea:F,maxDropdownHeight:P,size:A,id:L,renderOption:V,autoComplete:Z,scrollAreaProps:O,...W}=r,q=(0,i.M)(L),U=(0,d.R)(T),$=(0,u.g)(U),[Y,J]=(0,s.C)({value:D,defaultValue:N,finalValue:"",onChange:z}),X=(0,h.K)({opened:b,defaultOpened:y,onDropdownOpen:_,onDropdownClose:()=>{w?.(),X.resetSelectedOption()}}),{resolvedClassNames:K,resolvedStyles:Q}=(0,l.h)({props:r,styles:v,classNames:c});return(0,n.useEffect)(()=>{M&&X.selectFirstOption()},[M,Y]),(0,o.jsxs)(m.h,{store:X,__staticSelector:"Autocomplete",classNames:K,styles:Q,unstyled:g,readOnly:I,onOptionSubmit:e=>{E?.(e),J($[e].label),X.closeDropdown()},size:A,...H,children:[(0,o.jsx)(m.h.Target,{autoComplete:Z,children:(0,o.jsx)(x.M,{ref:t,...W,size:A,__staticSelector:"Autocomplete",disabled:B,readOnly:I,value:Y,onChange:e=>{J(e.currentTarget.value),X.openDropdown(),M&&X.selectFirstOption()},onFocus:e=>{X.openDropdown(),C?.(e)},onBlur:e=>{X.closeDropdown(),k?.(e)},onClick:e=>{X.openDropdown(),S?.(e)},classNames:K,styles:Q,unstyled:g,id:q})}),(0,o.jsx)(p.r,{data:U,hidden:I||B,filter:R,search:Y,limit:G,hiddenWhenEmpty:!0,withScrollArea:F,maxDropdownHeight:P,unstyled:g,labelId:W.label?`${q}-label`:void 0,"aria-label":W.label?void 0:W["aria-label"],renderOption:V,scrollAreaProps:O})]})});v.classes={...x.M.classes,...m.h.classes},v.displayName="@mantine/core/Autocomplete"},32581:function(e,t,r){"use strict";r.d(t,{C:function(){return h}});var o=r(52322);r(2784);var n=r(91482),i=r(11200),s=r(13588),l=r(38483),a=r(46690),c=r(28559),d=r(33502),u={root:"m_347db0ec","root--dot":"m_fbd81e3d",label:"m_5add502a",section:"m_91fdda9b"};let m={},p=(0,i.Z)((e,{radius:t,color:r,gradient:o,variant:i,size:l,autoContrast:a})=>{let c=e.variantColorResolver({color:r||e.primaryColor,theme:e,gradient:o,variant:i||"filled",autoContrast:a});return{root:{"--badge-height":(0,n.ap)(l,"badge-height"),"--badge-padding-x":(0,n.ap)(l,"badge-padding-x"),"--badge-fz":(0,n.ap)(l,"badge-fz"),"--badge-radius":void 0===t?void 0:(0,n.H5)(t),"--badge-bg":r||i?c.background:void 0,"--badge-color":r||i?c.color:void 0,"--badge-bd":r||i?c.border:void 0,"--badge-dot-color":"dot"===i?(0,s.p)(r,e):void 0}}}),h=(0,d.b)((e,t)=>{let r=(0,l.w)("Badge",m,e),{classNames:n,className:i,style:s,styles:d,unstyled:h,vars:x,radius:f,color:v,gradient:g,leftSection:j,rightSection:b,children:y,variant:w,fullWidth:_,autoContrast:C,circle:k,mod:S,...z}=r,T=(0,a.y)({name:"Badge",props:r,classes:u,className:i,style:s,classNames:n,styles:d,unstyled:h,vars:x,varsResolver:p});return(0,o.jsxs)(c.x,{variant:w,mod:[{block:_,circle:k},S],...T("root",{variant:w}),ref:t,...z,children:[j&&(0,o.jsx)("span",{...T("section"),"data-position":"left",children:j}),(0,o.jsx)("span",{...T("label"),children:y}),b&&(0,o.jsx)("span",{...T("section"),"data-position":"right",children:b})]})});h.classes=u,h.displayName="@mantine/core/Badge"},87154:function(e,t,r){"use strict";r.d(t,{T:function(){return z}});var o=r(52322),n=r(2784),i=r(9341),s=r(82923),l=r(71978),a=r(91482),c=r(11200),d=r(51477),u=r(46690),m=r(38483),p=r(82027),h=r(54813),x=r(37574),f=r(59835),v=r(88957),g=r(27009),j=r(6941),b=r(7140),y=r(73063),w=r(50205);function _({style:e,...t}){return(0,o.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--ci-eye-dropper-icon-size)",height:"var(--ci-eye-dropper-icon-size)",...e},viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,o.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,o.jsx)("path",{d:"M11 7l6 6"}),(0,o.jsx)("path",{d:"M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z"})]})}var C={eyeDropperIcon:"m_b077c2bc",colorPreview:"m_c5ccdcab",dropdown:"m_5ece2cd7"};let k={format:"hex",fixOnBlur:!0,withPreview:!0,swatchesPerRow:7,withPicker:!0,popoverProps:{transitionProps:{transition:"fade",duration:0}},withEyeDropper:!0},S=(0,c.Z)((e,{size:t})=>({eyeDropperIcon:{"--ci-eye-dropper-icon-size":(0,a.ap)(t,"ci-eye-dropper-icon-size")},colorPreview:{"--ci-preview-size":(0,a.ap)(t,"ci-preview-size")}})),z=(0,p.d)((e,t)=>{let r=(0,m.w)("ColorInput",k,e),{classNames:a,styles:c,unstyled:p,disallowInput:y,fixOnBlur:z,popoverProps:T,withPreview:D,withEyeDropper:N,eyeDropperIcon:M,closeOnColorSwatchClick:E,eyeDropperButtonProps:H,value:I,defaultValue:B,onChange:R,onChangeEnd:G,onClick:F,onFocus:P,onBlur:A,inputProps:L,format:V,wrapperProps:Z,readOnly:O,withPicker:W,swatches:q,disabled:U,leftSection:$,rightSection:Y,swatchesPerRow:J,...X}=(0,b.k)("ColorInput",k,e),K=(0,u.y)({name:"ColorInput",props:r,classes:C,classNames:a,styles:c,unstyled:p,rootSelector:"wrapper",vars:r.vars,varsResolver:S}),{resolvedClassNames:Q,resolvedStyles:ee}=(0,d.h)({classNames:a,styles:c,props:r}),[et,er]=(0,n.useState)(!1),[eo,en]=(0,n.useState)(""),[ei,es]=(0,i.C)({value:I,defaultValue:B,finalValue:"",onChange:R}),{supported:el,open:ea}=(0,s.s)(),ec=(0,o.jsx)(h.A,{...H,...K("eyeDropperButton",{className:H?.className,style:H?.style}),variant:"subtle",color:"gray",size:L.size,unstyled:p,onClick:()=>ea().then(e=>{if(e?.sRGBHex){let t=(0,f.Rt)(V,(0,v.lu)(e.sRGBHex));es(t),G?.(t)}}).catch(()=>{}),children:M||(0,o.jsx)(_,{...K("eyeDropperIcon")})});return(0,n.useEffect)(()=>{((0,v.fi)(ei)||""===ei.trim())&&en(ei)},[ei]),(0,l.l)(()=>{(0,v.fi)(ei)&&es((0,f.Rt)(V,(0,v.lu)(ei)))},[V]),(0,o.jsx)(j.I.Wrapper,{...Z,classNames:Q,styles:ee,__staticSelector:"ColorInput",children:(0,o.jsxs)(w.J,{__staticSelector:"ColorInput",position:"bottom-start",offset:5,...T,opened:et,classNames:Q,styles:ee,unstyled:p,withRoles:!1,disabled:O||!1===W&&(!Array.isArray(q)||0===q.length),children:[(0,o.jsx)(w.J.Target,{children:(0,o.jsx)(j.I,{autoComplete:"off",...X,...L,classNames:Q,styles:ee,disabled:U,ref:t,__staticSelector:"ColorInput",onFocus:e=>{P?.(e),er(!0)},onBlur:e=>{z&&es(eo),A?.(e),er(!1)},onClick:e=>{F?.(e),er(!0)},spellCheck:!1,value:ei,onChange:e=>{let t=e.currentTarget.value;es(t),(0,v.fi)(t)&&G?.(f.Rt(V,v.lu(t)))},leftSection:$||(D?(0,o.jsx)(g.b,{color:(0,v.fi)(ei)?ei:"#fff",size:"var(--ci-preview-size)",...K("colorPreview")}):null),readOnly:y||O,pointer:y,unstyled:p,rightSection:Y||(N&&!U&&!O&&el?ec:null)})}),(0,o.jsx)(w.J.Dropdown,{onMouseDown:e=>e.preventDefault(),className:C.dropdown,children:(0,o.jsx)(x.z,{__staticSelector:"ColorInput",value:ei,onChange:es,onChangeEnd:G,format:V,swatches:q,swatchesPerRow:J,withPicker:W,size:L.size,focusable:!1,unstyled:p,styles:ee,classNames:Q,onColorSwatchClick:()=>E&&er(!1)})})]})})});z.classes=y.M.classes,z.displayName="@mantine/core/ColorInput"},17539:function(e,t,r){"use strict";r.d(t,{i:function(){return h}});var o=r(52322);r(2784);var n=r(91482),i=r(11200),s=r(13588),l=r(38483),a=r(46690),c=r(28559),d=r(82027),u={root:"m_3eebeb36",label:"m_9e365f20"};let m={orientation:"horizontal"},p=(0,i.Z)((e,{color:t,variant:r,size:o})=>({root:{"--divider-color":t?(0,s.p)(t,e):void 0,"--divider-border-style":r,"--divider-size":(0,n.ap)(o,"divider-size")}})),h=(0,d.d)((e,t)=>{let r=(0,l.w)("Divider",m,e),{classNames:n,className:i,style:s,styles:d,unstyled:h,vars:x,color:f,orientation:v,label:g,labelPosition:j,mod:b,...y}=r,w=(0,a.y)({name:"Divider",classes:u,props:r,className:i,style:s,classNames:n,styles:d,unstyled:h,vars:x,varsResolver:p});return(0,o.jsx)(c.x,{ref:t,mod:[{orientation:v,"with-label":!!g},b],...w("root"),...y,role:"separator",children:g&&(0,o.jsx)(c.x,{component:"span",mod:{position:j},...w("label"),children:g})})});h.classes=u,h.displayName="@mantine/core/Divider"},41168:function(e,t,r){"use strict";r.d(t,{d:function(){return L}});var o=r(52322);r(2784);var n=r(97263),i=r(38483),s=r(82027),l=r(83147);let[a,c]=(0,r(89106).R)("Drawer component was not found in tree");var d={root:"m_f11b401e",header:"m_5a7c2c9",content:"m_b8a05bbd",inner:"m_31cd769a"};let u={},m=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:a,vars:d,...m}=(0,i.w)("DrawerBody",u,e),p=c();return(0,o.jsx)(l.y,{ref:t,...p.getStyles("body",{classNames:r,style:s,styles:a,className:n}),...m})});m.classes=d,m.displayName="@mantine/core/DrawerBody";var p=r(91403);let h={},x=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,...d}=(0,i.w)("DrawerCloseButton",h,e),u=c();return(0,o.jsx)(p._,{ref:t,...u.getStyles("close",{classNames:r,style:s,styles:l,className:n}),...d})});x.classes=d,x.displayName="@mantine/core/DrawerCloseButton";var f=r(91822),v=r(9628);let g={},j=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,children:d,radius:u,...m}=(0,i.w)("DrawerContent",g,e),p=c(),h=p.scrollAreaComponent||v.Z;return(0,o.jsx)(f.G,{...p.getStyles("content",{className:n,style:s,styles:l,classNames:r}),innerProps:p.getStyles("inner",{className:n,style:s,styles:l,classNames:r}),ref:t,...m,radius:u||p.radius||0,children:(0,o.jsx)(h,{style:{height:"100vh"},children:d})})});j.classes=d,j.displayName="@mantine/core/DrawerContent";var b=r(79208);let y={},w=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,...d}=(0,i.w)("DrawerHeader",y,e),u=c();return(0,o.jsx)(b.o,{ref:t,...u.getStyles("header",{classNames:r,style:s,styles:l,className:n}),...d})});w.classes=d,w.displayName="@mantine/core/DrawerHeader";var _=r(23461);let C={},k=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,...d}=(0,i.w)("DrawerOverlay",C,e),u=c();return(0,o.jsx)(_.e,{ref:t,...u.getStyles("overlay",{classNames:r,style:s,styles:l,className:n}),...d})});k.classes=d,k.displayName="@mantine/core/DrawerOverlay";var S=r(58898),z=r(91482),T=r(11200),D=r(46690),N=r(89027),M=r(74610);let E={top:"slide-down",bottom:"slide-up",left:"slide-right",right:"slide-left"},H={top:"slide-down",bottom:"slide-up",right:"slide-right",left:"slide-left"},I={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,n.w)("modal"),position:"left"},B=(0,T.Z)((e,{position:t,size:r,offset:o})=>({root:{"--drawer-size":(0,z.ap)(r,"drawer-size"),"--drawer-flex":function(e){if("top"===e||"bottom"===e)return"0 0 calc(100% - var(--drawer-offset, 0rem) * 2)"}(t),"--drawer-height":"left"===t||"right"===t?void 0:"var(--drawer-size)","--drawer-align":function(e){switch(e){case"top":return"flex-start";case"bottom":return"flex-end";default:return}}(t),"--drawer-justify":"right"===t?"flex-end":void 0,"--drawer-offset":(0,S.h)(o)}})),R=(0,s.d)((e,t)=>{let r=(0,i.w)("DrawerRoot",I,e),{classNames:n,className:s,style:l,styles:c,unstyled:u,vars:m,scrollAreaComponent:p,position:h,transitionProps:x,radius:f,...v}=r,{dir:g}=(0,N.gm)(),j=(0,D.y)({name:"Drawer",classes:d,props:r,className:s,style:l,classNames:n,styles:c,unstyled:u,vars:m,varsResolver:B}),b=("rtl"===g?H:E)[h];return(0,o.jsx)(a,{value:{scrollAreaComponent:p,getStyles:j,radius:f},children:(0,o.jsx)(M.e,{ref:t,...j("root"),transitionProps:{transition:b,...x},unstyled:u,...v})})});R.classes=d,R.displayName="@mantine/core/DrawerRoot";var G=r(92682);let F={},P=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,...d}=(0,i.w)("DrawerTitle",F,e),u=c();return(0,o.jsx)(G.q,{ref:t,...u.getStyles("title",{classNames:r,style:s,styles:l,className:n}),...d})});P.classes=d,P.displayName="@mantine/core/DrawerTitle";let A={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,n.w)("modal"),withOverlay:!0,withCloseButton:!0},L=(0,s.d)((e,t)=>{let{title:r,withOverlay:n,overlayProps:s,withCloseButton:l,closeButtonProps:a,children:c,...d}=(0,i.w)("Drawer",A,e),u=!!r||l;return(0,o.jsxs)(R,{ref:t,...d,children:[n&&(0,o.jsx)(k,{...s}),(0,o.jsxs)(j,{children:[u&&(0,o.jsxs)(w,{children:[r&&(0,o.jsx)(P,{children:r}),l&&(0,o.jsx)(x,{...a})]}),(0,o.jsx)(m,{children:c})]})]})});L.classes=d,L.displayName="@mantine/core/Drawer",L.Root=R,L.Overlay=k,L.Content=j,L.Body=m,L.Header=w,L.Title=P,L.CloseButton=x},69659:function(e,t,r){"use strict";r.d(t,{r:function(){return M}});var o=r(52322);r(2784);var n=r(11200),i=r(38483),s=r(46690),l=r(12063),a=r(28559),c=r(82027);let[d,u]=(0,r(89106).R)("Grid component was not found in tree");var m=r(40489),p=r(98446),h=r(40580),x=r(54541),f=r(32100),v=r(68755),g=r(9437);let j=(e,t)=>"content"===e?"auto":"auto"===e?"0rem":e?`${100/(t/e)}%`:void 0,b=(e,t,r)=>r||"auto"===e?"100%":"content"===e?"unset":j(e,t),y=(e,t)=>{if(e)return"auto"===e||t?"1":"auto"},w=(e,t)=>0===e?"0":e?`${100/(t/e)}%`:void 0;function _({span:e,order:t,offset:r,selector:n}){let i=(0,v.rZ)(),s=u(),l=void 0===(0,f.v)(e)?12:(0,f.v)(e),a=(0,h.L)({"--col-order":f.v(t)?.toString(),"--col-flex-grow":y(l,s.grow),"--col-flex-basis":j(l,s.columns),"--col-width":"content"===l?"auto":void 0,"--col-max-width":b(l,s.columns,s.grow),"--col-offset":w((0,f.v)(r),s.columns)}),c=(0,p.X)(i.breakpoints).reduce((o,n)=>(o[n]||(o[n]={}),"object"==typeof t&&void 0!==t[n]&&(o[n]["--col-order"]=t[n]?.toString()),"object"==typeof e&&void 0!==e[n]&&(o[n]["--col-flex-grow"]=y(e[n],s.grow),o[n]["--col-flex-basis"]=j(e[n],s.columns),o[n]["--col-width"]="content"===e[n]?"auto":void 0,o[n]["--col-max-width"]=b(e[n],s.columns,s.grow)),"object"==typeof r&&void 0!==r[n]&&(o[n]["--col-offset"]=w(r[n],s.columns)),o),{}),d=(0,x.I)((0,p.X)(c),i).filter(e=>(0,p.X)(c[e.value]).length>0).map(e=>({query:`(min-width: ${i.breakpoints[e.value]})`,styles:c[e.value]}));return(0,o.jsx)(g.f,{styles:a,media:d,selector:n})}var C={root:"m_410352e9",inner:"m_dee7bd2f",col:"m_96bdd299"};let k={span:12},S=(0,c.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:c,vars:d,span:p,order:h,offset:x,...f}=(0,i.w)("GridCol",k,e),v=u(),g=(0,l.m)();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(_,{selector:`.${g}`,span:p,order:h,offset:x}),(0,o.jsx)(a.x,{ref:t,...v.getStyles("col",{className:(0,m.Z)(n,g),style:s,classNames:r,styles:c}),...f})]})});S.classes=C,S.displayName="@mantine/core/GridCol";var z=r(91482);function T({gutter:e,selector:t}){let r=(0,v.rZ)(),n=(0,h.L)({"--grid-gutter":(0,z.bG)((0,f.v)(e))}),i=(0,p.X)(r.breakpoints).reduce((t,r)=>(t[r]||(t[r]={}),"object"==typeof e&&void 0!==e[r]&&(t[r]["--grid-gutter"]=(0,z.bG)(e[r])),t),{}),s=(0,x.I)((0,p.X)(i),r).filter(e=>(0,p.X)(i[e.value]).length>0).map(e=>({query:`(min-width: ${r.breakpoints[e.value]})`,styles:i[e.value]}));return(0,o.jsx)(g.f,{styles:n,media:s,selector:t})}let D={gutter:"md",grow:!1,columns:12},N=(0,n.Z)((e,{justify:t,align:r,overflow:o})=>({root:{"--grid-justify":t,"--grid-align":r,"--grid-overflow":o}})),M=(0,c.d)((e,t)=>{let r=(0,i.w)("Grid",D,e),{classNames:n,className:c,style:u,styles:m,unstyled:p,vars:h,grow:x,gutter:f,columns:v,align:g,justify:j,children:b,...y}=r,w=(0,s.y)({name:"Grid",classes:C,props:r,className:c,style:u,classNames:n,styles:m,unstyled:p,vars:h,varsResolver:N}),_=(0,l.m)();return(0,o.jsxs)(d,{value:{getStyles:w,grow:x,columns:v},children:[(0,o.jsx)(T,{selector:`.${_}`,...r}),(0,o.jsx)(a.x,{ref:t,...w("root",{className:_}),...y,children:(0,o.jsx)("div",{...w("inner"),children:b})})]})});M.classes=C,M.displayName="@mantine/core/Grid",M.Col=S},68852:function(e,t,r){"use strict";r.d(t,{z:function(){return g}});var o=r(52322),n=r(3900),i=r(2784),s=r(38483),l=r(39461),a=r(50205);let[c,d]=(0,r(89106).R)("HoverCard component was not found in the tree");var u=r(98498);let m={};function p(e){let{children:t,onMouseEnter:r,onMouseLeave:n,...i}=(0,s.w)("HoverCardDropdown",m,e),l=d(),c=(0,u.x)(r,l.openDropdown),p=(0,u.x)(n,l.closeDropdown);return(0,o.jsx)(a.J.Dropdown,{onMouseEnter:c,onMouseLeave:p,...i,children:t})}p.displayName="@mantine/core/HoverCardDropdown";var h=r(98399);let x={refProp:"ref"},f=(0,i.forwardRef)((e,t)=>{let{children:r,refProp:n,eventPropsWrapperName:l,...c}=(0,s.w)("HoverCardTarget",x,e);if(!(0,h.k)(r))throw Error("HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let m=d(),p={onMouseEnter:(0,u.x)(r.props.onMouseEnter,m.openDropdown),onMouseLeave:(0,u.x)(r.props.onMouseLeave,m.closeDropdown)};return(0,o.jsx)(a.J.Target,{refProp:n,ref:t,...c,children:(0,i.cloneElement)(r,l?{[l]:p}:p)})});f.displayName="@mantine/core/HoverCardTarget";let v={openDelay:0,closeDelay:150,initiallyOpened:!1};function g(e){let{children:t,onOpen:r,onClose:i,openDelay:d,closeDelay:u,initiallyOpened:m,...p}=(0,s.w)("HoverCard",v,e),[h,{open:x,close:f}]=(0,n.q)(m,{onClose:i,onOpen:r}),{openDropdown:g,closeDropdown:j}=(0,l.U)({open:x,close:f,openDelay:d,closeDelay:u});return(0,o.jsx)(c,{value:{openDropdown:g,closeDropdown:j},children:(0,o.jsx)(a.J,{...p,opened:h,__staticSelector:"HoverCard",children:t})})}g.displayName="@mantine/core/HoverCard",g.Target=f,g.Dropdown=p,g.extend=e=>e},43076:function(e,t,r){"use strict";r.d(t,{E:function(){return h}});var o=r(52322),n=r(2784),i=r(91482),s=r(11200),l=r(38483),a=r(46690),c=r(28559),d=r(33502),u={root:"m_9e117634"};let m={},p=(0,s.Z)((e,{radius:t,fit:r})=>({root:{"--image-radius":void 0===t?void 0:(0,i.H5)(t),"--image-object-fit":r}})),h=(0,d.b)((e,t)=>{let r=(0,l.w)("Image",m,e),{classNames:i,className:s,style:d,styles:h,unstyled:x,vars:f,onError:v,src:g,radius:j,fit:b,fallbackSrc:y,mod:w,..._}=r,[C,k]=(0,n.useState)(!g);(0,n.useEffect)(()=>k(!g),[g]);let S=(0,a.y)({name:"Image",classes:u,props:r,className:s,style:d,classNames:i,styles:h,unstyled:x,vars:f,varsResolver:p});return C&&y?(0,o.jsx)(c.x,{component:"img",ref:t,src:y,...S("root"),onError:v,mod:["fallback",w],..._}):(0,o.jsx)(c.x,{component:"img",ref:t,...S("root"),src:g,onError:e=>{v?.(e),k(!0)},mod:w,..._})});h.classes=u,h.displayName="@mantine/core/Image"},20992:function(e,t,r){"use strict";r.d(t,{f:function(){return v}});var o=r(52322);r(2784);var n=r(97263),i=r(11200),s=r(68755),l=r(38483),a=r(46690),c=r(28559),d=r(82027),u=r(12491),m=r(87170),p=r(96321),h={root:"m_6e45937b",loader:"m_e8eb006c",overlay:"m_df587f17"};let x={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,n.w)("overlay")},f=(0,i.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),v=(0,d.d)((e,t)=>{let r=(0,l.w)("LoadingOverlay",x,e),{classNames:n,className:i,style:d,styles:v,unstyled:g,vars:j,transitionProps:b,loaderProps:y,overlayProps:w,visible:_,zIndex:C,...k}=r,S=(0,s.rZ)(),z=(0,a.y)({name:"LoadingOverlay",classes:h,props:r,className:i,style:d,classNames:n,styles:v,unstyled:g,vars:j,varsResolver:f}),T={...x.overlayProps,...w};return(0,o.jsx)(p.u,{transition:"fade",...b,mounted:!!_,children:e=>(0,o.jsxs)(c.x,{...z("root",{style:e}),ref:t,...k,children:[(0,o.jsx)(u.a,{...z("loader"),unstyled:g,...y}),(0,o.jsx)(m.a,{...T,...z("overlay"),darkHidden:!0,unstyled:g,color:w?.color||S.white}),(0,o.jsx)(m.a,{...T,...z("overlay"),lightHidden:!0,unstyled:g,color:w?.color||S.colors.dark[5]})]})})});v.classes=h,v.displayName="@mantine/core/LoadingOverlay"},60284:function(e,t,r){"use strict";r.d(t,{W:function(){return b}});var o=r(52322),n=r(40489),i=r(66178),s=r(9341);r(2784);var l=r(91482),a=r(11200),c=r(51477),d=r(46690),u=r(38483),m=r(97072),p=r(82027),h=r(54813),x=r(6941),f=r(73063),v={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let g={visibilityToggleIcon:({reveal:e})=>(0,o.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,o.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},j=(0,a.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,l.ap)(t,"psi-icon-size"),"--psi-button-size":(0,l.ap)(t,"psi-button-size")}})),b=(0,p.d)((e,t)=>{let r=(0,u.w)("PasswordInput",g,e),{classNames:l,className:a,style:p,styles:f,unstyled:b,vars:y,required:w,error:_,leftSection:C,disabled:k,id:S,variant:z,inputContainer:T,description:D,label:N,size:M,errorProps:E,descriptionProps:H,labelProps:I,withAsterisk:B,inputWrapperOrder:R,wrapperProps:G,radius:F,rightSection:P,rightSectionWidth:A,rightSectionPointerEvents:L,leftSectionWidth:V,visible:Z,defaultVisible:O,onVisibilityChange:W,visibilityToggleIcon:q,visibilityToggleButtonProps:U,rightSectionProps:$,leftSectionProps:Y,leftSectionPointerEvents:J,mod:X,...K}=r,Q=(0,i.M)(S),[ee,et]=(0,s.C)({value:Z,defaultValue:O,finalValue:!1,onChange:W}),er=()=>et(!ee),eo=(0,d.y)({name:"PasswordInput",classes:v,props:r,className:a,style:p,classNames:l,styles:f,unstyled:b,vars:y,varsResolver:j}),{resolvedClassNames:en,resolvedStyles:ei}=(0,c.h)({classNames:l,styles:f,props:r}),{styleProps:es,rest:el}=(0,m.c)(K),ea=(0,o.jsx)(h.A,{...eo("visibilityToggle"),disabled:k,radius:F,"aria-hidden":!U,tabIndex:-1,...U,variant:"subtle",color:"gray",unstyled:b,onMouseDown:e=>{e.preventDefault(),U?.onMouseDown?.(e),er()},onKeyDown:e=>{U?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),er())},children:(0,o.jsx)(q,{reveal:ee})});return(0,o.jsx)(x.I.Wrapper,{required:w,id:Q,label:N,error:_,description:D,size:M,classNames:en,styles:ei,__staticSelector:"PasswordInput",errorProps:E,descriptionProps:H,unstyled:b,withAsterisk:B,inputWrapperOrder:R,inputContainer:T,variant:z,labelProps:{...I,htmlFor:Q},mod:X,...eo("root"),...es,...G,children:(0,o.jsx)(x.I,{component:"div",error:_,leftSection:C,size:M,classNames:{...en,input:(0,n.Z)(v.input,en.input)},styles:ei,radius:F,disabled:k,__staticSelector:"PasswordInput",rightSectionWidth:A,rightSection:P??ea,variant:z,unstyled:b,leftSectionWidth:V,rightSectionPointerEvents:L||"all",rightSectionProps:$,leftSectionProps:Y,leftSectionPointerEvents:J,withAria:!1,children:(0,o.jsx)("input",{required:w,"data-invalid":!!_||void 0,"data-with-left-section":!!C||void 0,...eo("innerInput"),disabled:k,id:Q,ref:t,...el,autoComplete:el.autoComplete||"off",type:ee?"text":"password"})})})});b.classes={...f.M.classes,...v},b.displayName="@mantine/core/PasswordInput"},79649:function(e,t,r){"use strict";r.d(t,{P:function(){return v}});var o=r(52322),n=r(2784),i=r(66178),s=r(9341),l=r(51477),a=r(38483),c=r(82027),d=r(29995),u=r(77606),m=r(61324),p=r(66958),h=r(56237),x=r(73063);let f={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},v=(0,c.d)((e,t)=>{let r=(0,a.w)("Select",f,e),{classNames:c,styles:v,unstyled:g,vars:j,dropdownOpened:b,defaultDropdownOpened:y,onDropdownClose:w,onDropdownOpen:_,onFocus:C,onBlur:k,onClick:S,onChange:z,data:T,value:D,defaultValue:N,selectFirstOptionOnChange:M,onOptionSubmit:E,comboboxProps:H,readOnly:I,disabled:B,filter:R,limit:G,withScrollArea:F,maxDropdownHeight:P,size:A,searchable:L,rightSection:V,checkIconPosition:Z,withCheckIcon:O,nothingFoundMessage:W,name:q,form:U,searchValue:$,defaultSearchValue:Y,onSearchChange:J,allowDeselect:X,error:K,rightSectionPointerEvents:Q,id:ee,clearable:et,clearButtonProps:er,hiddenInputProps:eo,renderOption:en,onClear:ei,autoComplete:es,scrollAreaProps:el,...ea}=r,ec=(0,n.useMemo)(()=>(0,d.R)(T),[T]),ed=(0,n.useMemo)(()=>(0,u.g)(ec),[ec]),eu=(0,i.M)(ee),[em,ep,eh]=(0,s.C)({value:D,defaultValue:N,finalValue:null,onChange:z}),ex="string"==typeof em?ed[em]:void 0,[ef,ev]=(0,s.C)({value:$,defaultValue:Y,finalValue:ex?ex.label:"",onChange:J}),eg=(0,h.K)({opened:b,defaultOpened:y,onDropdownOpen:()=>{_?.(),eg.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{w?.(),eg.resetSelectedOption()}}),{resolvedClassNames:ej,resolvedStyles:eb}=(0,l.h)({props:r,styles:v,classNames:c});(0,n.useEffect)(()=>{M&&eg.selectFirstOption()},[M,em]),(0,n.useEffect)(()=>{null===D&&ev(""),"string"==typeof D&&ex&&ev(ex.label)},[D,ex]);let ey=et&&!!em&&!B&&!I&&(0,o.jsx)(m.h.ClearButton,{size:A,...er,onClear:()=>{ep(null,null),ev(""),ei?.()}});return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(m.h,{store:eg,__staticSelector:"Select",classNames:ej,styles:eb,unstyled:g,readOnly:I,onOptionSubmit:e=>{E?.(e);let t=X&&ed[e].value===em?null:ed[e],r=t?t.value:null;ep(r,t),eh||ev("string"==typeof r&&t?.label||""),eg.closeDropdown()},size:A,...H,children:[(0,o.jsx)(m.h.Target,{targetType:L?"input":"button",autoComplete:es,children:(0,o.jsx)(x.M,{id:eu,ref:t,rightSection:V||ey||(0,o.jsx)(m.h.Chevron,{size:A,error:K,unstyled:g}),rightSectionPointerEvents:Q||(ey?"all":"none"),...ea,size:A,__staticSelector:"Select",disabled:B,readOnly:I||!L,value:ef,onChange:e=>{ev(e.currentTarget.value),eg.openDropdown(),M&&eg.selectFirstOption()},onFocus:e=>{L&&eg.openDropdown(),C?.(e)},onBlur:e=>{L&&eg.closeDropdown(),ev(null!=em&&ed[em]?.label||""),k?.(e)},onClick:e=>{L?eg.openDropdown():eg.toggleDropdown(),S?.(e)},classNames:ej,styles:eb,unstyled:g,pointer:!L,error:K})}),(0,o.jsx)(p.r,{data:ec,hidden:I||B,filter:R,search:ef,limit:G,hiddenWhenEmpty:!L||!W,withScrollArea:F,maxDropdownHeight:P,filterOptions:L&&ex?.label!==ef,value:em,checkIconPosition:Z,withCheckIcon:O,nothingFoundMessage:W,unstyled:g,labelId:ea.label?`${eu}-label`:void 0,"aria-label":ea.label?void 0:ea["aria-label"],renderOption:en,scrollAreaProps:el})]}),(0,o.jsx)(m.h.HiddenInput,{value:em,name:q,form:U,disabled:B,...eo})]})});v.classes={...x.M.classes,...m.h.classes},v.displayName="@mantine/core/Select"},41185:function(e,t,r){"use strict";r.d(t,{T:function(){return a}});var o=r(52322);r(2784);var n=r(38483),i=r(28559),s=r(82027);let l={},a=(0,s.d)((e,t)=>{let{w:r,h:s,miw:a,mih:c,...d}=(0,n.w)("Space",l,e);return(0,o.jsx)(i.x,{ref:t,...d,w:r,miw:a??r,h:s,mih:c??s})});a.displayName="@mantine/core/Space"},6403:function(e,t,r){"use strict";r.d(t,{v:function(){return D}});var o=r(52322),n=r(2784),i=r(58898),s=r(91482),l=r(11200),a=r(13588),c=r(39568),d=r(90006),u=r(38483),m=r(46690),p=r(28559),h=r(82027);let[x,f]=(0,r(89106).R)("Stepper component was not found in tree"),v=()=>null;v.displayName="@mantine/core/StepperCompleted";var g=r(68755),j=r(40284),b=r(12491),y=r(96321),w=r(63409),_={root:"m_cbb4ea7e",steps:"m_aaf89d0b",separator:"m_2a371ac9",content:"m_78da155d",step:"m_cbb57068","step--horizontal":"m_f56b1e2c","step--vertical":"m_833edb7e",verticalSeparator:"m_6496b3f3",stepWrapper:"m_818e70b",stepIcon:"m_1959ad01",stepCompletedIcon:"m_a79331dc",stepBody:"m_1956aa2a",stepLabel:"m_12051f6c",stepDescription:"m_164eea74"};let C=(e,t)=>"function"==typeof e?(0,o.jsx)(e,{step:t||0}):e,k={withIcon:!0,allowStepClick:!0,iconPosition:"left"},S=(0,h.d)((e,t)=>{let{classNames:r,className:n,style:i,styles:s,vars:l,step:c,state:d,color:m,icon:p,completedIcon:h,progressIcon:x,label:v,description:_,withIcon:S,iconSize:z,loading:T,allowStepClick:D,allowStepSelect:N,iconPosition:M,orientation:E,mod:H,...I}=(0,u.w)("StepperStep",k,e),B=f(),R=(0,g.rZ)(),G={classNames:r,styles:s},F="stepCompleted"===d?null:"stepProgress"===d?x:p,P={"data-progress":"stepProgress"===d||void 0,"data-completed":"stepCompleted"===d||void 0};return(0,o.jsxs)(w.k,{...B.getStyles("step",{className:n,style:i,variant:B.orientation,...G}),mod:[{"icon-position":M||B.iconPosition,"allow-click":D},H],ref:t,...P,...I,__vars:{"--step-color":m?(0,a.p)(m,R):void 0},tabIndex:D?0:-1,children:[S&&(0,o.jsxs)("span",{...B.getStyles("stepWrapper",G),children:[(0,o.jsxs)("span",{...B.getStyles("stepIcon",G),...P,children:[(0,o.jsx)(y.u,{mounted:"stepCompleted"===d,transition:"pop",duration:200,children:e=>(0,o.jsx)("span",{...B.getStyles("stepCompletedIcon",{style:e,...G}),children:T?(0,o.jsx)(b.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...B.getStyles("stepLoader",G)}):C(h,c)||(0,o.jsx)(j.n,{size:"60%"})})}),"stepCompleted"!==d?T?(0,o.jsx)(b.a,{...B.getStyles("stepLoader",G),size:"calc(var(--stepper-icon-size) / 2)",color:m}):C(F||p,c):null]}),"vertical"===E&&(0,o.jsx)("span",{...B.getStyles("verticalSeparator",G),"data-active":"stepCompleted"===d||void 0})]}),(v||_)&&(0,o.jsxs)("span",{...B.getStyles("stepBody",G),"data-orientation":B.orientation,"data-icon-position":M||B.iconPosition,children:[v&&(0,o.jsx)("span",{...B.getStyles("stepLabel",G),children:C(v,c)}),_&&(0,o.jsx)("span",{...B.getStyles("stepDescription",G),children:C(_,c)})]})]})});S.classes=_,S.displayName="@mantine/core/StepperStep";let z={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},T=(0,l.Z)((e,{color:t,iconSize:r,size:o,contentPadding:n,radius:l,autoContrast:u})=>({root:{"--stepper-color":t?(0,a.p)(t,e):void 0,"--stepper-icon-color":(0,d.o)(u,e)?(0,c.R)({color:t,theme:e,autoContrast:u}):void 0,"--stepper-icon-size":void 0===r?(0,s.ap)(o,"stepper-icon-size"):(0,i.h)(r),"--stepper-content-padding":(0,s.bG)(n),"--stepper-radius":void 0===l?void 0:(0,s.H5)(l),"--stepper-fz":(0,s.yv)(o),"--stepper-spacing":(0,s.bG)(o)}})),D=(0,h.d)((e,t)=>{let r=(0,u.w)("Stepper",z,e),{classNames:i,className:s,style:l,styles:a,unstyled:c,vars:d,children:h,onStepClick:f,active:g,icon:j,completedIcon:b,progressIcon:y,color:w,iconSize:C,contentPadding:k,orientation:S,iconPosition:D,size:N,radius:M,allowNextStepsSelect:E,wrap:H,...I}=r,B=(0,m.y)({name:"Stepper",classes:_,props:r,className:s,style:l,classNames:i,styles:a,unstyled:c,vars:d,varsResolver:T}),R=n.Children.toArray(h),G=R.filter(e=>e.type!==v),F=R.find(e=>e.type===v),P=G.reduce((e,t,r)=>{let o=g===r?"stepProgress":g>r?"stepCompleted":"stepInactive",i="function"==typeof f&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===o||E);return e.push((0,n.cloneElement)(t,{icon:t.props.icon||j||r+1,key:r,step:r,state:o,onClick:()=>i&&f?.(r),allowStepClick:i,completedIcon:t.props.completedIcon||b,progressIcon:t.props.progressIcon||y,color:t.props.color||w,iconSize:C,radius:M,iconPosition:t.props.iconPosition||D,orientation:S,unstyled:c})),"horizontal"===S&&r!==G.length-1&&e.push((0,n.createElement)("div",{...B("separator"),"data-active":rG.length-1?L:A;return(0,o.jsx)(x,{value:{getStyles:B,orientation:S,iconPosition:D},children:(0,o.jsxs)(p.x,{...B("root"),ref:t,size:N,...I,children:[(0,o.jsx)(p.x,{...B("steps"),mod:{orientation:S,"icon-position":D,wrap:H&&"vertical"!==S},children:P}),V&&(0,o.jsx)("div",{...B("content"),children:V})]})})});D.classes=_,D.displayName="@mantine/core/Stepper",D.Completed=v,D.Step=S},84786:function(e,t,r){"use strict";r.d(t,{T:function(){return _}});var o=r(52322),n=r(2784),i=r(58898),s=r(91482),l=r(11200),a=r(13588),c=r(39568),d=r(90006),u=r(38483),m=r(46690),p=r(28559),h=r(82027);let[x,f]=(0,r(89106).R)("Timeline component was not found in tree");var v=r(68755),g={root:"m_43657ece",itemTitle:"m_2ebe8099",item:"m_436178ff",itemBullet:"m_8affcee1",itemBody:"m_540e8f41"};let j={},b=(0,h.d)((e,t)=>{let{classNames:r,className:n,style:i,styles:l,vars:c,__active:d,__align:m,__lineActive:h,__vars:x,bullet:g,radius:b,color:y,lineVariant:w,children:_,title:C,mod:k,...S}=(0,u.w)("TimelineItem",j,e),z=f(),T=(0,v.rZ)(),D={classNames:r,styles:l};return(0,o.jsxs)(p.x,{...z.getStyles("item",{...D,className:n,style:i}),mod:[{"line-active":h,active:d},k],ref:t,__vars:{"--tli-radius":b?(0,s.H5)(b):void 0,"--tli-color":y?(0,a.p)(y,T):void 0,"--tli-border-style":w||void 0},...S,children:[(0,o.jsx)(p.x,{...z.getStyles("itemBullet",D),mod:{"with-child":!!g,align:m,active:d},children:g}),(0,o.jsxs)("div",{...z.getStyles("itemBody",D),children:[C&&(0,o.jsx)("div",{...z.getStyles("itemTitle",D),children:C}),(0,o.jsx)("div",{...z.getStyles("itemContent",D),children:_})]})]})});b.classes=g,b.displayName="@mantine/core/TimelineItem";let y={active:-1,align:"left",reverseActive:!1},w=(0,l.Z)((e,{bulletSize:t,lineWidth:r,radius:o,color:n,autoContrast:l})=>({root:{"--tl-bullet-size":(0,i.h)(t),"--tl-line-width":(0,i.h)(r),"--tl-radius":void 0===o?void 0:(0,s.H5)(o),"--tl-color":n?(0,a.p)(n,e):void 0,"--tl-icon-color":(0,d.o)(l,e)?(0,c.R)({color:n,theme:e,autoContrast:l}):void 0}})),_=(0,h.d)((e,t)=>{let r=(0,u.w)("Timeline",y,e),{classNames:i,className:s,style:l,styles:a,unstyled:c,vars:d,children:h,active:f,color:v,radius:j,bulletSize:b,align:_,lineWidth:C,reverseActive:k,mod:S,autoContrast:z,...T}=r,D=(0,m.y)({name:"Timeline",classes:g,props:r,className:s,style:l,classNames:i,styles:a,unstyled:c,vars:d,varsResolver:w}),N=n.Children.toArray(h),M=N.map((e,t)=>(0,n.cloneElement)(e,{unstyled:c,__align:_,__active:e.props?.active||(k?f>=N.length-t-1:f>=t),__lineActive:e.props?.lineActive||(k?f>=N.length-t-1:f-1>=t)}));return(0,o.jsx)(x,{value:{getStyles:D},children:(0,o.jsx)(p.x,{...D("root"),mod:[{align:_},S],ref:t,...T,children:M})})});_.classes=g,_.displayName="@mantine/core/Timeline",_.Item=b},59526:function(e,t,r){"use strict";r.d(t,{x:function(){return k}});var o=r(52322),n=r(28879),i=r(2784),s=r(82027),l=r(38483),a=r(46690),c=r(51477),d=r(54813),u=r(40284),m=r(70837),p=r(3900),h=r(71978),x=r(93141),f=r(46766),v=r(57888),g=r(51235),j=r(9882),b=r(95488),y=r(71686),w=r(35963),_={timeWrapper:"m_208d2562",timeInput:"m_62ee059"};let C={dropdownType:"popover"},k=(0,s.d)((e,t)=>{let r=(0,l.w)("DateTimePicker",C,e),{value:s,defaultValue:k,onChange:S,valueFormat:z,locale:T,classNames:D,styles:N,unstyled:M,timeInputProps:E,submitButtonProps:H,withSeconds:I,level:B,defaultLevel:R,size:G,variant:F,dropdownType:P,vars:A,minDate:L,maxDate:V,...Z}=r,O=(0,a.y)({name:"DateTimePicker",classes:_,props:r,classNames:D,styles:N,unstyled:M,vars:A}),{resolvedClassNames:W,resolvedStyles:q}=(0,c.h)({classNames:D,styles:N,props:r}),U=(0,i.useRef)(),$=(0,m.Yx)(U,E?.ref),{calendarProps:{allowSingleDateInRange:Y,...J},others:X}=(0,j.M)(Z),K=(0,f.e)(),[Q,ee]=(0,x.l)({type:"default",value:s,defaultValue:k,onChange:S}),et=e=>e?n(e).format(I?"HH:mm:ss":"HH:mm"):"",[er,eo]=(0,i.useState)(et(Q)),[en,ei]=(0,i.useState)(B||R||"month"),[es,el]=(0,p.q)(!1),ea=Q?n(Q).locale(K.getLocale(T)).format(z||(I?"DD/MM/YYYY HH:mm:ss":"DD/MM/YYYY HH:mm")):"";(0,h.l)(()=>{es||eo(et(Q))},[Q,es]),(0,h.l)(()=>{es&&ei("month")},[es]);let ec=L?n(L).format("HH:mm:ss"):null,ed=V?n(V).format("HH:mm:ss"):null,eu="popover"===P;return(0,o.jsxs)(y.i,{formattedValue:ea,dropdownOpened:es,dropdownHandlers:el,classNames:W,styles:q,unstyled:M,ref:t,onClear:()=>ee(null),shouldClear:!!Q,value:Q,size:G,variant:F,dropdownType:P,...X,type:"default",__staticSelector:"DateTimePicker",children:[(0,o.jsx)(b.M,{...J,maxDate:V,minDate:L,size:G,variant:F,type:"default",value:Q,defaultDate:Q,onChange:e=>{e&&ee((0,v.o)(Q,e)),U.current?.focus()},locale:T,classNames:W,styles:q,unstyled:M,__staticSelector:"DateTimePicker",__stopPropagation:eu,level:B,defaultLevel:R,onLevelChange:e=>{ei(e),J.onLevelChange?.(e)},__timezoneApplied:!0}),"month"===en&&(0,o.jsxs)("div",{...O("timeWrapper"),children:[(0,o.jsx)(w.M,{value:er,withSeconds:I,ref:$,unstyled:M,minTime:Q&&L&&Q.toDateString()===L.toDateString()&&null!=ec?ec:void 0,maxTime:Q&&V&&Q.toDateString()===V.toDateString()&&null!=ed?ed:void 0,...E,...O("timeInput",{className:E?.className,style:E?.style}),onChange:e=>{E?.onChange?.(e);let t=e.currentTarget.value;if(eo(t),t){let[e,r,o]=t.split(":").map(Number),n=(0,g.w)("add",new Date,K.getTimezone());n.setHours(e),n.setMinutes(r),n.setSeconds(o||0),ee((0,v.o)(n,Q||(0,g.w)("add",new Date,K.getTimezone())))}},onKeyDown:e=>{E?.onKeyDown?.(e),"Enter"===e.key&&(e.preventDefault(),el.close())},size:G,"data-mantine-stop-propagation":eu||void 0}),(0,o.jsx)(d.A,{variant:"default",size:`input-${G||"sm"}`,...O("submitButton",{className:H?.className,style:H?.style}),unstyled:M,"data-mantine-stop-propagation":eu||void 0,children:(0,o.jsx)(u.n,{size:"30%"}),...H,onClick:e=>{H?.onClick?.(e),el.close()}})]})]})});k.classes={..._,...y.i.classes,...b.M.classes},k.displayName="@mantine/dates/DateTimePicker"},35963:function(e,t,r){"use strict";r.d(t,{M:function(){return d}});var o=r(52322),n=r(40489),i=r(82027),s=r(38483),l=r(51477),a=r(73063);let c={},d=(0,i.d)((e,t)=>{let r=(0,s.w)("TimeInput",c,e),{classNames:i,styles:d,unstyled:u,vars:m,withSeconds:p,minTime:h,maxTime:x,value:f,onChange:v,...g}=r,{resolvedClassNames:j,resolvedStyles:b}=(0,l.h)({classNames:i,styles:d,props:r}),y=e=>{if(void 0!==h||void 0!==x){let[t,r,o]=e.split(":").map(Number);if(h){let[e,n,i]=h.split(":").map(Number);if(te||t===e&&r>n||p&&t===e&&r===n&&o>i)return 1}}return 0};return(0,o.jsx)(a.M,{classNames:{...j,input:(0,n.Z)("m_468e7eda",j?.input)},styles:b,unstyled:u,ref:t,value:f,...g,step:p?1:60,onChange:v,onBlur:e=>{if(r.onBlur?.(e),void 0!==h||void 0!==x){let t=e.currentTarget.value;if(t){let o=y(t);1===o?(e.currentTarget.value=x,r.onChange?.(e)):-1===o&&(e.currentTarget.value=h,r.onChange?.(e))}}},type:"time",__staticSelector:"TimeInput"})});d.classes=a.M.classes,d.displayName="@mantine/dates/TimeInput"},57888:function(e,t,r){"use strict";function o(e,t){if(!e||!t)return t;let r=e.getHours(),o=e.getMinutes(),n=e.getSeconds(),i=e.getMilliseconds(),s=new Date(t);return s.setHours(r),s.setMinutes(o),s.setSeconds(n),s.setMilliseconds(i),s}r.d(t,{o:function(){return o}})},34089:function(e,t,r){"use strict";r.d(t,{c:function(){return n}});var o=r(2784);function n(e,t,r={leading:!1}){let[n,i]=(0,o.useState)(e),s=(0,o.useRef)(!1),l=(0,o.useRef)(null),a=(0,o.useRef)(!1),c=()=>window.clearTimeout(l.current);return(0,o.useEffect)(()=>{s.current&&(!a.current&&r.leading?(a.current=!0,i(e)):(c(),l.current=window.setTimeout(()=>{a.current=!1,i(e)},t)))},[e,r.leading,t]),(0,o.useEffect)(()=>(s.current=!0,c),[]),[n,c]}},82923:function(e,t,r){"use strict";r.d(t,{s:function(){return i}});var o=r(2784),n=r(64261);function i(){let[e,t]=(0,o.useState)(!1);(0,n.Y)(()=>{t("undefined"!=typeof window&&"EyeDropper"in window)},[]);let r=(0,o.useCallback)((t={})=>e?new window.EyeDropper().open(t):Promise.resolve(void 0),[e]);return{supported:e,open:r}}},49910:function(e,t,r){"use strict";r.d(t,{O:function(){return c}});var o=r(2784);function n(){let e=window.document;return e.fullscreenElement||e.webkitFullscreenElement||e.mozFullScreenElement||e.msFullscreenElement}async function i(){let e=window.document;return"function"==typeof e.exitFullscreen?e.exitFullscreen():"function"==typeof e.msExitFullscreen?e.msExitFullscreen():"function"==typeof e.webkitExitFullscreen?e.webkitExitFullscreen():"function"==typeof e.mozCancelFullScreen?e.mozCancelFullScreen():null}async function s(e){return e.requestFullscreen?.()||e.msRequestFullscreen?.()||e.webkitEnterFullscreen?.()||e.webkitRequestFullscreen?.()||e.mozRequestFullscreen?.()}let l=["","webkit","moz","ms"];function a(e,{onFullScreen:t,onError:r}){return l.forEach(o=>{e.addEventListener(`${o}fullscreenchange`,t),e.addEventListener(`${o}fullscreenerror`,r)}),()=>{l.forEach(o=>{e.removeEventListener(`${o}fullscreenchange`,t),e.removeEventListener(`${o}fullscreenerror`,r)})}}function c(){let[e,t]=(0,o.useState)(!1),r=(0,o.useRef)(),l=(0,o.useCallback)(e=>{t(e.target===n())},[t]),c=(0,o.useCallback)(e=>{t(!1),console.error(`[@mantine/hooks] use-fullscreen: Error attempting full-screen mode method: ${e} (${e.target})`)},[t]),d=(0,o.useCallback)(async()=>{n()?await i():await s(r.current)},[]),u=(0,o.useCallback)(e=>{null===e?r.current=window.document.documentElement:r.current=e},[]);return(0,o.useEffect)(()=>!r.current&&window.document?(r.current=window.document.documentElement,a(r.current,{onFullScreen:l,onError:c})):r.current?a(r.current,{onFullScreen:l,onError:c}):void 0,[]),{ref:u,toggle:d,fullscreen:e}}},82890:function(e,t,r){"use strict";r.d(t,{c:function(){return i}});var o=r(2784);let n={events:["keypress","mousemove","touchmove","click","scroll"],initialState:!0};function i(e,t){let{events:r,initialState:i}={...n,...t},[s,l]=(0,o.useState)(i),a=(0,o.useRef)();return(0,o.useEffect)(()=>{let t=()=>{l(!1),a.current&&window.clearTimeout(a.current),a.current=window.setTimeout(()=>{l(!0)},e)};return r.forEach(e=>document.addEventListener(e,t)),()=>{r.forEach(e=>document.removeEventListener(e,t))}},[e]),s}},88916:function(e,t,r){"use strict";r.d(t,{h:function(){return s},y:function(){return i}});var o=r(2784);let n={x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0};function i(e){let t=(0,o.useRef)(0),r=(0,o.useRef)(null),[i,s]=(0,o.useState)(n),l=(0,o.useMemo)(()=>"undefined"!=typeof window?new ResizeObserver(e=>{let o=e[0];o&&(cancelAnimationFrame(t.current),t.current=requestAnimationFrame(()=>{r.current&&s(o.contentRect)}))}):null,[]);return(0,o.useEffect)(()=>(r.current&&l?.observe(r.current,e),()=>{l?.disconnect(),t.current&&cancelAnimationFrame(t.current)}),[r.current]),[r,i]}function s(e){let[t,{width:r,height:o}]=i(e);return{ref:t,width:r,height:o}}},67778:function(e,t,r){"use strict";r.d(t,{r:function(){return o}});let o=r(70675).ZP.extend({addKeyboardShortcuts:()=>({"Mod-k":()=>(window.dispatchEvent(new Event("edit-link")),!0)})}).configure({openOnClick:!1})}},function(e){e.O(0,[72812,47091,75417,29985,26601,94323,86179,66748,405,11204,61324,18738,76124,46159,7854,91062,92888,49774,40179],function(){return e(e.s=87314)}),_N_E=e.O()}]); \ No newline at end of file +`}},3789:function(e,t,r){"use strict";r.d(t,{_:function(){return v}});var o=r(52322),n=r(2784),i=r(89868),s=r(51934),l=r(1198),a=r(20992),c=r(93010),d=r(74770),u=r(60284),m=r(95047),p=r(8582),h=r(71873),x=r(17115),f=r(405);function v({noShadow:e,noPadding:t,noSubmit:r,style:v}){let[g,j]=(0,n.useState)("register"),[b,y]=(0,n.useState)(!1),[w,_]=(0,n.useState)(null),C=(0,f.c)({initialValues:{firstName:"",lastName:"",email:"",password:"",confirmPassword:"",termsOfService:!0}});return(0,o.jsx)(l.X,{p:t?0:"lg",shadow:e?"none":"sm",style:{...v,position:"relative",backgroundColor:"var(--mantine-color-body)"},children:(0,o.jsxs)("form",{onSubmit:C.onSubmit(()=>{y(!0),_(null),setTimeout(()=>{y(!1),_("register"===g?"User with this email already exists":"User with this email does not exist")},3e3)}),children:[(0,o.jsx)(a.f,{visible:b}),"register"===g&&(0,o.jsxs)(c.Z,{grow:!0,children:[(0,o.jsx)(d.o,{"data-autofocus":!0,required:!0,placeholder:"Your first name",label:"First name",...C.getInputProps("firstName")}),(0,o.jsx)(d.o,{required:!0,placeholder:"Your last name",label:"Last name",...C.getInputProps("lastName")})]}),(0,o.jsx)(d.o,{mt:"md",required:!0,placeholder:"Your email",label:"Email",leftSection:(0,o.jsx)(i.Z,{size:16,stroke:1.5}),...C.getInputProps("email")}),(0,o.jsx)(u.W,{mt:"md",required:!0,placeholder:"Password",label:"Password",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...C.getInputProps("password")}),"register"===g&&(0,o.jsx)(u.W,{mt:"md",required:!0,label:"Confirm Password",placeholder:"Confirm password",leftSection:(0,o.jsx)(s.Z,{size:16,stroke:1.5}),...C.getInputProps("confirmPassword")}),"register"===g&&(0,o.jsx)(m.X,{mt:"xl",label:"I agree to sell my soul and privacy to this corporation",...C.getInputProps("termsOfService",{type:"checkbox"})}),w&&(0,o.jsx)(p.x,{c:"red",size:"sm",mt:"sm",children:w}),!r&&(0,o.jsxs)(c.Z,{justify:"space-between",mt:"xl",children:[(0,o.jsx)(h.e,{component:"button",type:"button",c:"dimmed",onClick:()=>{j(e=>"register"===e?"login":"register"),_(null)},size:"sm",children:"register"===g?"Have an account? Login":"Don't have an account? Register"}),(0,o.jsx)(x.z,{color:"blue",type:"submit",children:"register"===g?"Register":"Login"})]})]})})}},18451:function(e,t,r){"use strict";r.d(t,{l:function(){return H}});var o=r(52322),n=r(2784),i=r(26601),s=r(11200),l=r(58898),a=r(91482),c=r(82027),d=r(38483),u=r(46690),m=r(12063),p=r(89027),h=r(63409),x=r(28559),f=r(46752),v=r(82692);let[g,j]=(0,r(89106).R)("Carousel component was not found in tree");var b={root:"m_17884d0f",viewport:"m_a2dae653",container:"m_fcd81474",controls:"m_39bc3463",control:"m_64f58e10",indicators:"m_71ea3ab1",indicator:"m_eae68602",slide:"m_d98df724"};let y={},w=(0,c.d)((e,t)=>{let{classNames:r,className:n,style:i,styles:s,vars:l,mod:a,...c}=(0,d.w)("CarouselSlide",y,e),u=j();return(0,o.jsx)(x.x,{ref:t,mod:[{orientation:u.orientation},a],...u.getStyles("slide",{className:n,style:i,classNames:r,styles:s}),...c})});w.classes=b,w.displayName="@mantine/carousel/CarouselSlide";var _=r(68755),C=r(40580),k=r(32100),S=r(98446),z=r(54541),T=r(9437);function D({slideGap:e,slideSize:t,selector:r}){let n=(0,_.rZ)(),i=(0,C.L)({"--carousel-slide-gap":(0,a.bG)((0,k.v)(e)),"--carousel-slide-size":(0,l.h)((0,k.v)(t))}),s=(0,S.X)(n.breakpoints).reduce((r,o)=>(r[o]||(r[o]={}),"object"==typeof e&&void 0!==e[o]&&(r[o]["--carousel-slide-gap"]=(0,a.bG)(e[o])),"object"==typeof t&&void 0!==t[o]&&(r[o]["--carousel-slide-size"]=(0,a.bG)(t[o])),r),{}),c=(0,z.I)((0,S.X)(s),n).filter(e=>(0,S.X)(s[e.value]).length>0).map(e=>({query:`(min-width: ${n.breakpoints[e.value]})`,styles:s[e.value]}));return(0,o.jsx)(T.f,{styles:i,media:c,selector:r})}function N({dir:e,orientation:t,direction:r}){return"previous"===r?"horizontal"===t?90*("ltr"===e?1:-1):-180:"horizontal"===t?90*("ltr"===e?-1:1):0}let M={controlSize:26,controlsOffset:"sm",slideSize:"100%",slideGap:0,orientation:"horizontal",align:"center",slidesToScroll:1,includeGapInSize:!0,draggable:!0,dragFree:!1,loop:!1,speed:10,initialSlide:0,inViewThreshold:0,withControls:!0,withIndicators:!1,skipSnaps:!1,containScroll:"",withKeyboardEvents:!0},E=(0,s.Z)((e,{height:t,controlSize:r,controlsOffset:o})=>({root:{"--carousel-height":(0,l.h)(t),"--carousel-control-size":(0,l.h)(r),"--carousel-controls-offset":(0,a.bG)(o)}})),H=(0,c.d)((e,t)=>{let r=(0,d.w)("Carousel",M,e),{classNames:s,className:l,style:a,styles:c,unstyled:j,vars:y,children:w,getEmblaApi:_,onNextSlide:C,onPreviousSlide:k,onSlideChange:S,nextControlProps:z,previousControlProps:T,controlSize:H,controlsOffset:I,slideSize:B,slideGap:R,orientation:G,height:F,align:P,slidesToScroll:A,includeGapInSize:L,draggable:V,dragFree:Z,loop:O,speed:W,initialSlide:q,inViewThreshold:U,withControls:$,withIndicators:Y,plugins:J,nextControlIcon:X,previousControlIcon:K,skipSnaps:Q,containScroll:ee,withKeyboardEvents:et,mod:er,...eo}=r,en=(0,u.y)({name:"Carousel",classes:b,props:r,className:l,style:a,classNames:s,styles:c,unstyled:j,vars:y,varsResolver:E}),ei=(0,m.m)(),{dir:es}=(0,p.gm)(),[el,ea]=(0,i.Z)({axis:"horizontal"===G?"x":"y",direction:"horizontal"===G?es:void 0,startIndex:q,loop:O,align:P,slidesToScroll:A,draggable:V,dragFree:Z,speed:W,inViewThreshold:U,skipSnaps:Q,containScroll:ee},J),[ec,ed]=(0,n.useState)(0),[eu,em]=(0,n.useState)(0),ep=(0,n.useCallback)(e=>ea&&ea.scrollTo(e),[ea]),eh=(0,n.useCallback)(()=>{if(!ea)return;let e=ea.selectedScrollSnap();ed(e),S?.(e)},[ea,ed]),ex=(0,n.useCallback)(()=>{ea?.scrollPrev(),k?.()},[ea]),ef=(0,n.useCallback)(()=>{ea?.scrollNext(),C?.()},[ea]),ev=(0,n.useCallback)(e=>{et&&("ArrowRight"===e.key&&(e.preventDefault(),ef()),"ArrowLeft"===e.key&&(e.preventDefault(),ex()))},[ea]);(0,n.useEffect)(()=>{if(ea)return _?.(ea),eh(),em(ea.scrollSnapList().length),ea.on("select",eh),()=>{ea.off("select",eh)}},[ea,A]),(0,n.useEffect)(()=>{ea&&(ea.reInit(),em(ea.scrollSnapList().length),ed(e=>(0,v.u)(e,0,n.Children.toArray(w).length-1)))},[n.Children.toArray(w).length,A]);let eg=ea?.canScrollPrev()||!1,ej=ea?.canScrollNext()||!1,eb=Array(eu).fill(0).map((e,t)=>(0,n.createElement)(h.k,{...en("indicator"),key:t,"data-active":t===ec||void 0,"aria-hidden":!0,tabIndex:-1,onClick:()=>ep(t),"data-orientation":G}));return(0,o.jsxs)(g,{value:{getStyles:en,orientation:G},children:[(0,o.jsx)(D,{...r,selector:`.${ei}`}),(0,o.jsxs)(x.x,{ref:t,...en("root",{className:ei}),...eo,mod:[{orientation:G,"include-gap-in-size":L},er],onKeyDownCapture:ev,children:[(0,o.jsx)("div",{...en("viewport"),ref:el,children:(0,o.jsx)("div",{...en("container"),"data-orientation":G,children:w})}),Y&&(0,o.jsx)("div",{...en("indicators"),"data-orientation":G,children:eb}),$&&(0,o.jsxs)("div",{...en("controls"),"data-orientation":G,children:[(0,o.jsx)(h.k,{...T,...en("control",{className:T?.className,style:T?.style}),onClick:e=>{ex(),T?.onClick?.(e)},"data-inactive":!eg||void 0,tabIndex:eg?0:-1,children:void 0!==K?K:(0,o.jsx)(f.Q,{style:{transform:`rotate(${N({dir:es,orientation:G,direction:"previous"})}deg)`}})}),(0,o.jsx)(h.k,{...en("control",{className:z?.className,style:z?.style}),...z,onClick:e=>{ef(),z?.onClick?.(e)},"data-inactive":!ej||void 0,tabIndex:ej?0:-1,children:void 0!==X?X:(0,o.jsx)(f.Q,{style:{transform:`rotate(${N({dir:es,orientation:G,direction:"next"})}deg)`}})})]})]})]})});H.classes=b,H.displayName="@mantine/carousel/Carousel",H.Slide=w},62563:function(e,t,r){"use strict";r.d(t,{D:function(){return n}});var o=r(2784);function n(e,t){(0,o.useEffect)(()=>{e&&window.setTimeout(()=>{e.reInit()},t)},[e,t])}},75893:function(e,t,r){"use strict";r.d(t,{F:function(){return v}});var o=r(52322),n=r(2784),i=r(66178),s=r(9341),l=r(51477),a=r(38483),c=r(82027),d=r(29995),u=r(77606),m=r(61324),p=r(66958),h=r(56237),x=r(73063);let f={},v=(0,c.d)((e,t)=>{let r=(0,a.w)("Autocomplete",f,e),{classNames:c,styles:v,unstyled:g,vars:j,dropdownOpened:b,defaultDropdownOpened:y,onDropdownClose:w,onDropdownOpen:_,onFocus:C,onBlur:k,onClick:S,onChange:z,data:T,value:D,defaultValue:N,selectFirstOptionOnChange:M,onOptionSubmit:E,comboboxProps:H,readOnly:I,disabled:B,filter:R,limit:G,withScrollArea:F,maxDropdownHeight:P,size:A,id:L,renderOption:V,autoComplete:Z,scrollAreaProps:O,...W}=r,q=(0,i.M)(L),U=(0,d.R)(T),$=(0,u.g)(U),[Y,J]=(0,s.C)({value:D,defaultValue:N,finalValue:"",onChange:z}),X=(0,h.K)({opened:b,defaultOpened:y,onDropdownOpen:_,onDropdownClose:()=>{w?.(),X.resetSelectedOption()}}),{resolvedClassNames:K,resolvedStyles:Q}=(0,l.h)({props:r,styles:v,classNames:c});return(0,n.useEffect)(()=>{M&&X.selectFirstOption()},[M,Y]),(0,o.jsxs)(m.h,{store:X,__staticSelector:"Autocomplete",classNames:K,styles:Q,unstyled:g,readOnly:I,onOptionSubmit:e=>{E?.(e),J($[e].label),X.closeDropdown()},size:A,...H,children:[(0,o.jsx)(m.h.Target,{autoComplete:Z,children:(0,o.jsx)(x.M,{ref:t,...W,size:A,__staticSelector:"Autocomplete",disabled:B,readOnly:I,value:Y,onChange:e=>{J(e.currentTarget.value),X.openDropdown(),M&&X.selectFirstOption()},onFocus:e=>{X.openDropdown(),C?.(e)},onBlur:e=>{X.closeDropdown(),k?.(e)},onClick:e=>{X.openDropdown(),S?.(e)},classNames:K,styles:Q,unstyled:g,id:q})}),(0,o.jsx)(p.r,{data:U,hidden:I||B,filter:R,search:Y,limit:G,hiddenWhenEmpty:!0,withScrollArea:F,maxDropdownHeight:P,unstyled:g,labelId:W.label?`${q}-label`:void 0,"aria-label":W.label?void 0:W["aria-label"],renderOption:V,scrollAreaProps:O})]})});v.classes={...x.M.classes,...m.h.classes},v.displayName="@mantine/core/Autocomplete"},32581:function(e,t,r){"use strict";r.d(t,{C:function(){return h}});var o=r(52322);r(2784);var n=r(91482),i=r(11200),s=r(13588),l=r(38483),a=r(46690),c=r(28559),d=r(33502),u={root:"m_347db0ec","root--dot":"m_fbd81e3d",label:"m_5add502a",section:"m_91fdda9b"};let m={},p=(0,i.Z)((e,{radius:t,color:r,gradient:o,variant:i,size:l,autoContrast:a})=>{let c=e.variantColorResolver({color:r||e.primaryColor,theme:e,gradient:o,variant:i||"filled",autoContrast:a});return{root:{"--badge-height":(0,n.ap)(l,"badge-height"),"--badge-padding-x":(0,n.ap)(l,"badge-padding-x"),"--badge-fz":(0,n.ap)(l,"badge-fz"),"--badge-radius":void 0===t?void 0:(0,n.H5)(t),"--badge-bg":r||i?c.background:void 0,"--badge-color":r||i?c.color:void 0,"--badge-bd":r||i?c.border:void 0,"--badge-dot-color":"dot"===i?(0,s.p)(r,e):void 0}}}),h=(0,d.b)((e,t)=>{let r=(0,l.w)("Badge",m,e),{classNames:n,className:i,style:s,styles:d,unstyled:h,vars:x,radius:f,color:v,gradient:g,leftSection:j,rightSection:b,children:y,variant:w,fullWidth:_,autoContrast:C,circle:k,mod:S,...z}=r,T=(0,a.y)({name:"Badge",props:r,classes:u,className:i,style:s,classNames:n,styles:d,unstyled:h,vars:x,varsResolver:p});return(0,o.jsxs)(c.x,{variant:w,mod:[{block:_,circle:k},S],...T("root",{variant:w}),ref:t,...z,children:[j&&(0,o.jsx)("span",{...T("section"),"data-position":"left",children:j}),(0,o.jsx)("span",{...T("label"),children:y}),b&&(0,o.jsx)("span",{...T("section"),"data-position":"right",children:b})]})});h.classes=u,h.displayName="@mantine/core/Badge"},87154:function(e,t,r){"use strict";r.d(t,{T:function(){return z}});var o=r(52322),n=r(2784),i=r(9341),s=r(82923),l=r(71978),a=r(91482),c=r(11200),d=r(51477),u=r(46690),m=r(38483),p=r(82027),h=r(54813),x=r(37574),f=r(59835),v=r(88957),g=r(27009),j=r(6941),b=r(7140),y=r(73063),w=r(50205);function _({style:e,...t}){return(0,o.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--ci-eye-dropper-icon-size)",height:"var(--ci-eye-dropper-icon-size)",...e},viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,o.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,o.jsx)("path",{d:"M11 7l6 6"}),(0,o.jsx)("path",{d:"M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z"})]})}var C={eyeDropperIcon:"m_b077c2bc",colorPreview:"m_c5ccdcab",dropdown:"m_5ece2cd7"};let k={format:"hex",fixOnBlur:!0,withPreview:!0,swatchesPerRow:7,withPicker:!0,popoverProps:{transitionProps:{transition:"fade",duration:0}},withEyeDropper:!0},S=(0,c.Z)((e,{size:t})=>({eyeDropperIcon:{"--ci-eye-dropper-icon-size":(0,a.ap)(t,"ci-eye-dropper-icon-size")},colorPreview:{"--ci-preview-size":(0,a.ap)(t,"ci-preview-size")}})),z=(0,p.d)((e,t)=>{let r=(0,m.w)("ColorInput",k,e),{classNames:a,styles:c,unstyled:p,disallowInput:y,fixOnBlur:z,popoverProps:T,withPreview:D,withEyeDropper:N,eyeDropperIcon:M,closeOnColorSwatchClick:E,eyeDropperButtonProps:H,value:I,defaultValue:B,onChange:R,onChangeEnd:G,onClick:F,onFocus:P,onBlur:A,inputProps:L,format:V,wrapperProps:Z,readOnly:O,withPicker:W,swatches:q,disabled:U,leftSection:$,rightSection:Y,swatchesPerRow:J,...X}=(0,b.k)("ColorInput",k,e),K=(0,u.y)({name:"ColorInput",props:r,classes:C,classNames:a,styles:c,unstyled:p,rootSelector:"wrapper",vars:r.vars,varsResolver:S}),{resolvedClassNames:Q,resolvedStyles:ee}=(0,d.h)({classNames:a,styles:c,props:r}),[et,er]=(0,n.useState)(!1),[eo,en]=(0,n.useState)(""),[ei,es]=(0,i.C)({value:I,defaultValue:B,finalValue:"",onChange:R}),{supported:el,open:ea}=(0,s.s)(),ec=(0,o.jsx)(h.A,{...H,...K("eyeDropperButton",{className:H?.className,style:H?.style}),variant:"subtle",color:"gray",size:L.size,unstyled:p,onClick:()=>ea().then(e=>{if(e?.sRGBHex){let t=(0,f.Rt)(V,(0,v.lu)(e.sRGBHex));es(t),G?.(t)}}).catch(()=>{}),children:M||(0,o.jsx)(_,{...K("eyeDropperIcon")})});return(0,n.useEffect)(()=>{((0,v.fi)(ei)||""===ei.trim())&&en(ei)},[ei]),(0,l.l)(()=>{(0,v.fi)(ei)&&es((0,f.Rt)(V,(0,v.lu)(ei)))},[V]),(0,o.jsx)(j.I.Wrapper,{...Z,classNames:Q,styles:ee,__staticSelector:"ColorInput",children:(0,o.jsxs)(w.J,{__staticSelector:"ColorInput",position:"bottom-start",offset:5,...T,opened:et,classNames:Q,styles:ee,unstyled:p,withRoles:!1,disabled:O||!1===W&&(!Array.isArray(q)||0===q.length),children:[(0,o.jsx)(w.J.Target,{children:(0,o.jsx)(j.I,{autoComplete:"off",...X,...L,classNames:Q,styles:ee,disabled:U,ref:t,__staticSelector:"ColorInput",onFocus:e=>{P?.(e),er(!0)},onBlur:e=>{z&&es(eo),A?.(e),er(!1)},onClick:e=>{F?.(e),er(!0)},spellCheck:!1,value:ei,onChange:e=>{let t=e.currentTarget.value;es(t),(0,v.fi)(t)&&G?.(f.Rt(V,v.lu(t)))},leftSection:$||(D?(0,o.jsx)(g.b,{color:(0,v.fi)(ei)?ei:"#fff",size:"var(--ci-preview-size)",...K("colorPreview")}):null),readOnly:y||O,pointer:y,unstyled:p,rightSection:Y||(N&&!U&&!O&&el?ec:null)})}),(0,o.jsx)(w.J.Dropdown,{onMouseDown:e=>e.preventDefault(),className:C.dropdown,children:(0,o.jsx)(x.z,{__staticSelector:"ColorInput",value:ei,onChange:es,onChangeEnd:G,format:V,swatches:q,swatchesPerRow:J,withPicker:W,size:L.size,focusable:!1,unstyled:p,styles:ee,classNames:Q,onColorSwatchClick:()=>E&&er(!1)})})]})})});z.classes=y.M.classes,z.displayName="@mantine/core/ColorInput"},17539:function(e,t,r){"use strict";r.d(t,{i:function(){return h}});var o=r(52322);r(2784);var n=r(91482),i=r(11200),s=r(13588),l=r(38483),a=r(46690),c=r(28559),d=r(82027),u={root:"m_3eebeb36",label:"m_9e365f20"};let m={orientation:"horizontal"},p=(0,i.Z)((e,{color:t,variant:r,size:o})=>({root:{"--divider-color":t?(0,s.p)(t,e):void 0,"--divider-border-style":r,"--divider-size":(0,n.ap)(o,"divider-size")}})),h=(0,d.d)((e,t)=>{let r=(0,l.w)("Divider",m,e),{classNames:n,className:i,style:s,styles:d,unstyled:h,vars:x,color:f,orientation:v,label:g,labelPosition:j,mod:b,...y}=r,w=(0,a.y)({name:"Divider",classes:u,props:r,className:i,style:s,classNames:n,styles:d,unstyled:h,vars:x,varsResolver:p});return(0,o.jsx)(c.x,{ref:t,mod:[{orientation:v,"with-label":!!g},b],...w("root"),...y,role:"separator",children:g&&(0,o.jsx)(c.x,{component:"span",mod:{position:j},...w("label"),children:g})})});h.classes=u,h.displayName="@mantine/core/Divider"},41168:function(e,t,r){"use strict";r.d(t,{d:function(){return L}});var o=r(52322);r(2784);var n=r(97263),i=r(38483),s=r(82027),l=r(83147);let[a,c]=(0,r(89106).R)("Drawer component was not found in tree");var d={root:"m_f11b401e",header:"m_5a7c2c9",content:"m_b8a05bbd",inner:"m_31cd769a"};let u={},m=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:a,vars:d,...m}=(0,i.w)("DrawerBody",u,e),p=c();return(0,o.jsx)(l.y,{ref:t,...p.getStyles("body",{classNames:r,style:s,styles:a,className:n}),...m})});m.classes=d,m.displayName="@mantine/core/DrawerBody";var p=r(91403);let h={},x=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,...d}=(0,i.w)("DrawerCloseButton",h,e),u=c();return(0,o.jsx)(p._,{ref:t,...u.getStyles("close",{classNames:r,style:s,styles:l,className:n}),...d})});x.classes=d,x.displayName="@mantine/core/DrawerCloseButton";var f=r(91822),v=r(9628);let g={},j=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,children:d,radius:u,...m}=(0,i.w)("DrawerContent",g,e),p=c(),h=p.scrollAreaComponent||v.Z;return(0,o.jsx)(f.G,{...p.getStyles("content",{className:n,style:s,styles:l,classNames:r}),innerProps:p.getStyles("inner",{className:n,style:s,styles:l,classNames:r}),ref:t,...m,radius:u||p.radius||0,children:(0,o.jsx)(h,{style:{height:"100vh"},children:d})})});j.classes=d,j.displayName="@mantine/core/DrawerContent";var b=r(79208);let y={},w=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,...d}=(0,i.w)("DrawerHeader",y,e),u=c();return(0,o.jsx)(b.o,{ref:t,...u.getStyles("header",{classNames:r,style:s,styles:l,className:n}),...d})});w.classes=d,w.displayName="@mantine/core/DrawerHeader";var _=r(23461);let C={},k=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,...d}=(0,i.w)("DrawerOverlay",C,e),u=c();return(0,o.jsx)(_.e,{ref:t,...u.getStyles("overlay",{classNames:r,style:s,styles:l,className:n}),...d})});k.classes=d,k.displayName="@mantine/core/DrawerOverlay";var S=r(58898),z=r(91482),T=r(11200),D=r(46690),N=r(89027),M=r(74610);let E={top:"slide-down",bottom:"slide-up",left:"slide-right",right:"slide-left"},H={top:"slide-down",bottom:"slide-up",right:"slide-right",left:"slide-left"},I={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,n.w)("modal"),position:"left"},B=(0,T.Z)((e,{position:t,size:r,offset:o})=>({root:{"--drawer-size":(0,z.ap)(r,"drawer-size"),"--drawer-flex":function(e){if("top"===e||"bottom"===e)return"0 0 calc(100% - var(--drawer-offset, 0rem) * 2)"}(t),"--drawer-height":"left"===t||"right"===t?void 0:"var(--drawer-size)","--drawer-align":function(e){switch(e){case"top":return"flex-start";case"bottom":return"flex-end";default:return}}(t),"--drawer-justify":"right"===t?"flex-end":void 0,"--drawer-offset":(0,S.h)(o)}})),R=(0,s.d)((e,t)=>{let r=(0,i.w)("DrawerRoot",I,e),{classNames:n,className:s,style:l,styles:c,unstyled:u,vars:m,scrollAreaComponent:p,position:h,transitionProps:x,radius:f,...v}=r,{dir:g}=(0,N.gm)(),j=(0,D.y)({name:"Drawer",classes:d,props:r,className:s,style:l,classNames:n,styles:c,unstyled:u,vars:m,varsResolver:B}),b=("rtl"===g?H:E)[h];return(0,o.jsx)(a,{value:{scrollAreaComponent:p,getStyles:j,radius:f},children:(0,o.jsx)(M.e,{ref:t,...j("root"),transitionProps:{transition:b,...x},unstyled:u,...v})})});R.classes=d,R.displayName="@mantine/core/DrawerRoot";var G=r(92682);let F={},P=(0,s.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:l,vars:a,...d}=(0,i.w)("DrawerTitle",F,e),u=c();return(0,o.jsx)(G.q,{ref:t,...u.getStyles("title",{classNames:r,style:s,styles:l,className:n}),...d})});P.classes=d,P.displayName="@mantine/core/DrawerTitle";let A={closeOnClickOutside:!0,withinPortal:!0,lockScroll:!0,trapFocus:!0,returnFocus:!0,closeOnEscape:!0,keepMounted:!1,zIndex:(0,n.w)("modal"),withOverlay:!0,withCloseButton:!0},L=(0,s.d)((e,t)=>{let{title:r,withOverlay:n,overlayProps:s,withCloseButton:l,closeButtonProps:a,children:c,...d}=(0,i.w)("Drawer",A,e),u=!!r||l;return(0,o.jsxs)(R,{ref:t,...d,children:[n&&(0,o.jsx)(k,{...s}),(0,o.jsxs)(j,{children:[u&&(0,o.jsxs)(w,{children:[r&&(0,o.jsx)(P,{children:r}),l&&(0,o.jsx)(x,{...a})]}),(0,o.jsx)(m,{children:c})]})]})});L.classes=d,L.displayName="@mantine/core/Drawer",L.Root=R,L.Overlay=k,L.Content=j,L.Body=m,L.Header=w,L.Title=P,L.CloseButton=x},69659:function(e,t,r){"use strict";r.d(t,{r:function(){return M}});var o=r(52322);r(2784);var n=r(11200),i=r(38483),s=r(46690),l=r(12063),a=r(28559),c=r(82027);let[d,u]=(0,r(89106).R)("Grid component was not found in tree");var m=r(40489),p=r(98446),h=r(40580),x=r(54541),f=r(32100),v=r(68755),g=r(9437);let j=(e,t)=>"content"===e?"auto":"auto"===e?"0rem":e?`${100/(t/e)}%`:void 0,b=(e,t,r)=>r||"auto"===e?"100%":"content"===e?"unset":j(e,t),y=(e,t)=>{if(e)return"auto"===e||t?"1":"auto"},w=(e,t)=>0===e?"0":e?`${100/(t/e)}%`:void 0;function _({span:e,order:t,offset:r,selector:n}){let i=(0,v.rZ)(),s=u(),l=void 0===(0,f.v)(e)?12:(0,f.v)(e),a=(0,h.L)({"--col-order":f.v(t)?.toString(),"--col-flex-grow":y(l,s.grow),"--col-flex-basis":j(l,s.columns),"--col-width":"content"===l?"auto":void 0,"--col-max-width":b(l,s.columns,s.grow),"--col-offset":w((0,f.v)(r),s.columns)}),c=(0,p.X)(i.breakpoints).reduce((o,n)=>(o[n]||(o[n]={}),"object"==typeof t&&void 0!==t[n]&&(o[n]["--col-order"]=t[n]?.toString()),"object"==typeof e&&void 0!==e[n]&&(o[n]["--col-flex-grow"]=y(e[n],s.grow),o[n]["--col-flex-basis"]=j(e[n],s.columns),o[n]["--col-width"]="content"===e[n]?"auto":void 0,o[n]["--col-max-width"]=b(e[n],s.columns,s.grow)),"object"==typeof r&&void 0!==r[n]&&(o[n]["--col-offset"]=w(r[n],s.columns)),o),{}),d=(0,x.I)((0,p.X)(c),i).filter(e=>(0,p.X)(c[e.value]).length>0).map(e=>({query:`(min-width: ${i.breakpoints[e.value]})`,styles:c[e.value]}));return(0,o.jsx)(g.f,{styles:a,media:d,selector:n})}var C={root:"m_410352e9",inner:"m_dee7bd2f",col:"m_96bdd299"};let k={span:12},S=(0,c.d)((e,t)=>{let{classNames:r,className:n,style:s,styles:c,vars:d,span:p,order:h,offset:x,...f}=(0,i.w)("GridCol",k,e),v=u(),g=(0,l.m)();return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(_,{selector:`.${g}`,span:p,order:h,offset:x}),(0,o.jsx)(a.x,{ref:t,...v.getStyles("col",{className:(0,m.Z)(n,g),style:s,classNames:r,styles:c}),...f})]})});S.classes=C,S.displayName="@mantine/core/GridCol";var z=r(91482);function T({gutter:e,selector:t}){let r=(0,v.rZ)(),n=(0,h.L)({"--grid-gutter":(0,z.bG)((0,f.v)(e))}),i=(0,p.X)(r.breakpoints).reduce((t,r)=>(t[r]||(t[r]={}),"object"==typeof e&&void 0!==e[r]&&(t[r]["--grid-gutter"]=(0,z.bG)(e[r])),t),{}),s=(0,x.I)((0,p.X)(i),r).filter(e=>(0,p.X)(i[e.value]).length>0).map(e=>({query:`(min-width: ${r.breakpoints[e.value]})`,styles:i[e.value]}));return(0,o.jsx)(g.f,{styles:n,media:s,selector:t})}let D={gutter:"md",grow:!1,columns:12},N=(0,n.Z)((e,{justify:t,align:r,overflow:o})=>({root:{"--grid-justify":t,"--grid-align":r,"--grid-overflow":o}})),M=(0,c.d)((e,t)=>{let r=(0,i.w)("Grid",D,e),{classNames:n,className:c,style:u,styles:m,unstyled:p,vars:h,grow:x,gutter:f,columns:v,align:g,justify:j,children:b,...y}=r,w=(0,s.y)({name:"Grid",classes:C,props:r,className:c,style:u,classNames:n,styles:m,unstyled:p,vars:h,varsResolver:N}),_=(0,l.m)();return(0,o.jsxs)(d,{value:{getStyles:w,grow:x,columns:v},children:[(0,o.jsx)(T,{selector:`.${_}`,...r}),(0,o.jsx)(a.x,{ref:t,...w("root",{className:_}),...y,children:(0,o.jsx)("div",{...w("inner"),children:b})})]})});M.classes=C,M.displayName="@mantine/core/Grid",M.Col=S},68852:function(e,t,r){"use strict";r.d(t,{z:function(){return g}});var o=r(52322),n=r(3900),i=r(2784),s=r(38483),l=r(39461),a=r(50205);let[c,d]=(0,r(89106).R)("HoverCard component was not found in the tree");var u=r(98498);let m={};function p(e){let{children:t,onMouseEnter:r,onMouseLeave:n,...i}=(0,s.w)("HoverCardDropdown",m,e),l=d(),c=(0,u.x)(r,l.openDropdown),p=(0,u.x)(n,l.closeDropdown);return(0,o.jsx)(a.J.Dropdown,{onMouseEnter:c,onMouseLeave:p,...i,children:t})}p.displayName="@mantine/core/HoverCardDropdown";var h=r(98399);let x={refProp:"ref"},f=(0,i.forwardRef)((e,t)=>{let{children:r,refProp:n,eventPropsWrapperName:l,...c}=(0,s.w)("HoverCardTarget",x,e);if(!(0,h.k)(r))throw Error("HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");let m=d(),p={onMouseEnter:(0,u.x)(r.props.onMouseEnter,m.openDropdown),onMouseLeave:(0,u.x)(r.props.onMouseLeave,m.closeDropdown)};return(0,o.jsx)(a.J.Target,{refProp:n,ref:t,...c,children:(0,i.cloneElement)(r,l?{[l]:p}:p)})});f.displayName="@mantine/core/HoverCardTarget";let v={openDelay:0,closeDelay:150,initiallyOpened:!1};function g(e){let{children:t,onOpen:r,onClose:i,openDelay:d,closeDelay:u,initiallyOpened:m,...p}=(0,s.w)("HoverCard",v,e),[h,{open:x,close:f}]=(0,n.q)(m,{onClose:i,onOpen:r}),{openDropdown:g,closeDropdown:j}=(0,l.U)({open:x,close:f,openDelay:d,closeDelay:u});return(0,o.jsx)(c,{value:{openDropdown:g,closeDropdown:j},children:(0,o.jsx)(a.J,{...p,opened:h,__staticSelector:"HoverCard",children:t})})}g.displayName="@mantine/core/HoverCard",g.Target=f,g.Dropdown=p,g.extend=e=>e},43076:function(e,t,r){"use strict";r.d(t,{E:function(){return h}});var o=r(52322),n=r(2784),i=r(91482),s=r(11200),l=r(38483),a=r(46690),c=r(28559),d=r(33502),u={root:"m_9e117634"};let m={},p=(0,s.Z)((e,{radius:t,fit:r})=>({root:{"--image-radius":void 0===t?void 0:(0,i.H5)(t),"--image-object-fit":r}})),h=(0,d.b)((e,t)=>{let r=(0,l.w)("Image",m,e),{classNames:i,className:s,style:d,styles:h,unstyled:x,vars:f,onError:v,src:g,radius:j,fit:b,fallbackSrc:y,mod:w,..._}=r,[C,k]=(0,n.useState)(!g);(0,n.useEffect)(()=>k(!g),[g]);let S=(0,a.y)({name:"Image",classes:u,props:r,className:s,style:d,classNames:i,styles:h,unstyled:x,vars:f,varsResolver:p});return C&&y?(0,o.jsx)(c.x,{component:"img",ref:t,src:y,...S("root"),onError:v,mod:["fallback",w],..._}):(0,o.jsx)(c.x,{component:"img",ref:t,...S("root"),src:g,onError:e=>{v?.(e),k(!0)},mod:w,..._})});h.classes=u,h.displayName="@mantine/core/Image"},20992:function(e,t,r){"use strict";r.d(t,{f:function(){return v}});var o=r(52322);r(2784);var n=r(97263),i=r(11200),s=r(68755),l=r(38483),a=r(46690),c=r(28559),d=r(82027),u=r(12491),m=r(87170),p=r(96321),h={root:"m_6e45937b",loader:"m_e8eb006c",overlay:"m_df587f17"};let x={transitionProps:{transition:"fade",duration:0},overlayProps:{backgroundOpacity:.75},zIndex:(0,n.w)("overlay")},f=(0,i.Z)((e,{zIndex:t})=>({root:{"--lo-z-index":t?.toString()}})),v=(0,d.d)((e,t)=>{let r=(0,l.w)("LoadingOverlay",x,e),{classNames:n,className:i,style:d,styles:v,unstyled:g,vars:j,transitionProps:b,loaderProps:y,overlayProps:w,visible:_,zIndex:C,...k}=r,S=(0,s.rZ)(),z=(0,a.y)({name:"LoadingOverlay",classes:h,props:r,className:i,style:d,classNames:n,styles:v,unstyled:g,vars:j,varsResolver:f}),T={...x.overlayProps,...w};return(0,o.jsx)(p.u,{transition:"fade",...b,mounted:!!_,children:e=>(0,o.jsxs)(c.x,{...z("root",{style:e}),ref:t,...k,children:[(0,o.jsx)(u.a,{...z("loader"),unstyled:g,...y}),(0,o.jsx)(m.a,{...T,...z("overlay"),darkHidden:!0,unstyled:g,color:w?.color||S.white}),(0,o.jsx)(m.a,{...T,...z("overlay"),lightHidden:!0,unstyled:g,color:w?.color||S.colors.dark[5]})]})})});v.classes=h,v.displayName="@mantine/core/LoadingOverlay"},60284:function(e,t,r){"use strict";r.d(t,{W:function(){return b}});var o=r(52322),n=r(40489),i=r(66178),s=r(9341);r(2784);var l=r(91482),a=r(11200),c=r(51477),d=r(46690),u=r(38483),m=r(97072),p=r(82027),h=r(54813),x=r(6941),f=r(73063),v={root:"m_f61ca620",input:"m_ccf8da4c",innerInput:"m_f2d85dd2",visibilityToggle:"m_b1072d44"};let g={visibilityToggleIcon:({reveal:e})=>(0,o.jsx)("svg",{viewBox:"0 0 15 15",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{width:"var(--psi-icon-size)",height:"var(--psi-icon-size)"},children:(0,o.jsx)("path",{d:e?"M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z":"M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z",fill:"currentColor",fillRule:"evenodd",clipRule:"evenodd"})})},j=(0,a.Z)((e,{size:t})=>({root:{"--psi-icon-size":(0,l.ap)(t,"psi-icon-size"),"--psi-button-size":(0,l.ap)(t,"psi-button-size")}})),b=(0,p.d)((e,t)=>{let r=(0,u.w)("PasswordInput",g,e),{classNames:l,className:a,style:p,styles:f,unstyled:b,vars:y,required:w,error:_,leftSection:C,disabled:k,id:S,variant:z,inputContainer:T,description:D,label:N,size:M,errorProps:E,descriptionProps:H,labelProps:I,withAsterisk:B,inputWrapperOrder:R,wrapperProps:G,radius:F,rightSection:P,rightSectionWidth:A,rightSectionPointerEvents:L,leftSectionWidth:V,visible:Z,defaultVisible:O,onVisibilityChange:W,visibilityToggleIcon:q,visibilityToggleButtonProps:U,rightSectionProps:$,leftSectionProps:Y,leftSectionPointerEvents:J,withErrorStyles:X,mod:K,...Q}=r,ee=(0,i.M)(S),[et,er]=(0,s.C)({value:Z,defaultValue:O,finalValue:!1,onChange:W}),eo=()=>er(!et),en=(0,d.y)({name:"PasswordInput",classes:v,props:r,className:a,style:p,classNames:l,styles:f,unstyled:b,vars:y,varsResolver:j}),{resolvedClassNames:ei,resolvedStyles:es}=(0,c.h)({classNames:l,styles:f,props:r}),{styleProps:el,rest:ea}=(0,m.c)(Q),ec=(0,o.jsx)(h.A,{...en("visibilityToggle"),disabled:k,radius:F,"aria-hidden":!U,tabIndex:-1,...U,variant:"subtle",color:"gray",unstyled:b,onMouseDown:e=>{e.preventDefault(),U?.onMouseDown?.(e),eo()},onKeyDown:e=>{U?.onKeyDown?.(e)," "===e.key&&(e.preventDefault(),eo())},children:(0,o.jsx)(q,{reveal:et})});return(0,o.jsx)(x.I.Wrapper,{required:w,id:ee,label:N,error:_,description:D,size:M,classNames:ei,styles:es,__staticSelector:"PasswordInput",errorProps:E,descriptionProps:H,unstyled:b,withAsterisk:B,inputWrapperOrder:R,inputContainer:T,variant:z,labelProps:{...I,htmlFor:ee},mod:K,...en("root"),...el,...G,children:(0,o.jsx)(x.I,{component:"div",error:_,leftSection:C,size:M,classNames:{...ei,input:(0,n.Z)(v.input,ei.input)},styles:es,radius:F,disabled:k,__staticSelector:"PasswordInput",rightSectionWidth:A,rightSection:P??ec,variant:z,unstyled:b,leftSectionWidth:V,rightSectionPointerEvents:L||"all",rightSectionProps:$,leftSectionProps:Y,leftSectionPointerEvents:J,withAria:!1,withErrorStyles:X,children:(0,o.jsx)("input",{required:w,"data-invalid":!!_||void 0,"data-with-left-section":!!C||void 0,...en("innerInput"),disabled:k,id:ee,ref:t,...ea,autoComplete:ea.autoComplete||"off",type:et?"text":"password"})})})});b.classes={...f.M.classes,...v},b.displayName="@mantine/core/PasswordInput"},79649:function(e,t,r){"use strict";r.d(t,{P:function(){return g}});var o=r(52322),n=r(2784),i=r(66178),s=r(9341),l=r(85057),a=r(51477),c=r(38483),d=r(82027),u=r(29995),m=r(77606),p=r(61324),h=r(66958),x=r(56237),f=r(73063);let v={searchable:!1,withCheckIcon:!0,allowDeselect:!0,checkIconPosition:"left"},g=(0,d.d)((e,t)=>{let r=(0,c.w)("Select",v,e),{classNames:d,styles:g,unstyled:j,vars:b,dropdownOpened:y,defaultDropdownOpened:w,onDropdownClose:_,onDropdownOpen:C,onFocus:k,onBlur:S,onClick:z,onChange:T,data:D,value:N,defaultValue:M,selectFirstOptionOnChange:E,onOptionSubmit:H,comboboxProps:I,readOnly:B,disabled:R,filter:G,limit:F,withScrollArea:P,maxDropdownHeight:A,size:L,searchable:V,rightSection:Z,checkIconPosition:O,withCheckIcon:W,nothingFoundMessage:q,name:U,form:$,searchValue:Y,defaultSearchValue:J,onSearchChange:X,allowDeselect:K,error:Q,rightSectionPointerEvents:ee,id:et,clearable:er,clearButtonProps:eo,hiddenInputProps:en,renderOption:ei,onClear:es,autoComplete:el,scrollAreaProps:ea,...ec}=r,ed=(0,n.useMemo)(()=>(0,u.R)(D),[D]),eu=(0,n.useMemo)(()=>(0,m.g)(ed),[ed]),em=(0,i.M)(et),[ep,eh,ex]=(0,s.C)({value:N,defaultValue:M,finalValue:null,onChange:T}),ef="string"==typeof ep?eu[ep]:void 0,ev=(0,l.D)(ef),[eg,ej]=(0,s.C)({value:Y,defaultValue:J,finalValue:ef?ef.label:"",onChange:X}),eb=(0,x.K)({opened:y,defaultOpened:w,onDropdownOpen:()=>{C?.(),eb.updateSelectedOptionIndex("active",{scrollIntoView:!0})},onDropdownClose:()=>{_?.(),eb.resetSelectedOption()}}),{resolvedClassNames:ey,resolvedStyles:ew}=(0,a.h)({props:r,styles:g,classNames:d});(0,n.useEffect)(()=>{E&&eb.selectFirstOption()},[E,ep]),(0,n.useEffect)(()=>{null===N&&ej(""),"string"==typeof N&&ef&&(ev?.value!==ef.value||ev?.label!==ef.label)&&ej(ef.label)},[N,ef]);let e_=er&&!!ep&&!R&&!B&&(0,o.jsx)(p.h.ClearButton,{size:L,...eo,onClear:()=>{eh(null,null),ej(""),es?.()}});return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(p.h,{store:eb,__staticSelector:"Select",classNames:ey,styles:ew,unstyled:j,readOnly:B,onOptionSubmit:e=>{H?.(e);let t=K&&eu[e].value===ep?null:eu[e],r=t?t.value:null;eh(r,t),ex||ej("string"==typeof r&&t?.label||""),eb.closeDropdown()},size:L,...I,children:[(0,o.jsx)(p.h.Target,{targetType:V?"input":"button",autoComplete:el,children:(0,o.jsx)(f.M,{id:em,ref:t,rightSection:Z||e_||(0,o.jsx)(p.h.Chevron,{size:L,error:Q,unstyled:j}),rightSectionPointerEvents:ee||(e_?"all":"none"),...ec,size:L,__staticSelector:"Select",disabled:R,readOnly:B||!V,value:eg,onChange:e=>{ej(e.currentTarget.value),eb.openDropdown(),E&&eb.selectFirstOption()},onFocus:e=>{V&&eb.openDropdown(),k?.(e)},onBlur:e=>{V&&eb.closeDropdown(),ej(null!=ep&&eu[ep]?.label||""),S?.(e)},onClick:e=>{V?eb.openDropdown():eb.toggleDropdown(),z?.(e)},classNames:ey,styles:ew,unstyled:j,pointer:!V,error:Q})}),(0,o.jsx)(h.r,{data:ed,hidden:B||R,filter:G,search:eg,limit:F,hiddenWhenEmpty:!V||!q,withScrollArea:P,maxDropdownHeight:A,filterOptions:V&&ef?.label!==eg,value:ep,checkIconPosition:O,withCheckIcon:W,nothingFoundMessage:q,unstyled:j,labelId:ec.label?`${em}-label`:void 0,"aria-label":ec.label?void 0:ec["aria-label"],renderOption:ei,scrollAreaProps:ea})]}),(0,o.jsx)(p.h.HiddenInput,{value:ep,name:U,form:$,disabled:R,...en})]})});g.classes={...f.M.classes,...p.h.classes},g.displayName="@mantine/core/Select"},41185:function(e,t,r){"use strict";r.d(t,{T:function(){return a}});var o=r(52322);r(2784);var n=r(38483),i=r(28559),s=r(82027);let l={},a=(0,s.d)((e,t)=>{let{w:r,h:s,miw:a,mih:c,...d}=(0,n.w)("Space",l,e);return(0,o.jsx)(i.x,{ref:t,...d,w:r,miw:a??r,h:s,mih:c??s})});a.displayName="@mantine/core/Space"},6403:function(e,t,r){"use strict";r.d(t,{v:function(){return D}});var o=r(52322),n=r(2784),i=r(58898),s=r(91482),l=r(11200),a=r(13588),c=r(39568),d=r(90006),u=r(38483),m=r(46690),p=r(28559),h=r(82027);let[x,f]=(0,r(89106).R)("Stepper component was not found in tree"),v=()=>null;v.displayName="@mantine/core/StepperCompleted";var g=r(68755),j=r(40284),b=r(12491),y=r(96321),w=r(63409),_={root:"m_cbb4ea7e",steps:"m_aaf89d0b",separator:"m_2a371ac9",content:"m_78da155d",step:"m_cbb57068","step--horizontal":"m_f56b1e2c","step--vertical":"m_833edb7e",verticalSeparator:"m_6496b3f3",stepWrapper:"m_818e70b",stepIcon:"m_1959ad01",stepCompletedIcon:"m_a79331dc",stepBody:"m_1956aa2a",stepLabel:"m_12051f6c",stepDescription:"m_164eea74"};let C=(e,t)=>"function"==typeof e?(0,o.jsx)(e,{step:t||0}):e,k={withIcon:!0,allowStepClick:!0,iconPosition:"left"},S=(0,h.d)((e,t)=>{let{classNames:r,className:n,style:i,styles:s,vars:l,step:c,state:d,color:m,icon:p,completedIcon:h,progressIcon:x,label:v,description:_,withIcon:S,iconSize:z,loading:T,allowStepClick:D,allowStepSelect:N,iconPosition:M,orientation:E,mod:H,...I}=(0,u.w)("StepperStep",k,e),B=f(),R=(0,g.rZ)(),G={classNames:r,styles:s},F="stepCompleted"===d?null:"stepProgress"===d?x:p,P={"data-progress":"stepProgress"===d||void 0,"data-completed":"stepCompleted"===d||void 0};return(0,o.jsxs)(w.k,{...B.getStyles("step",{className:n,style:i,variant:B.orientation,...G}),mod:[{"icon-position":M||B.iconPosition,"allow-click":D},H],ref:t,...P,...I,__vars:{"--step-color":m?(0,a.p)(m,R):void 0},tabIndex:D?0:-1,children:[S&&(0,o.jsxs)("span",{...B.getStyles("stepWrapper",G),children:[(0,o.jsxs)("span",{...B.getStyles("stepIcon",G),...P,children:[(0,o.jsx)(y.u,{mounted:"stepCompleted"===d,transition:"pop",duration:200,children:e=>(0,o.jsx)("span",{...B.getStyles("stepCompletedIcon",{style:e,...G}),children:T?(0,o.jsx)(b.a,{color:"var(--mantine-color-white)",size:"calc(var(--stepper-icon-size) / 2)",...B.getStyles("stepLoader",G)}):C(h,c)||(0,o.jsx)(j.n,{size:"60%"})})}),"stepCompleted"!==d?T?(0,o.jsx)(b.a,{...B.getStyles("stepLoader",G),size:"calc(var(--stepper-icon-size) / 2)",color:m}):C(F||p,c):null]}),"vertical"===E&&(0,o.jsx)("span",{...B.getStyles("verticalSeparator",G),"data-active":"stepCompleted"===d||void 0})]}),(v||_)&&(0,o.jsxs)("span",{...B.getStyles("stepBody",G),"data-orientation":B.orientation,"data-icon-position":M||B.iconPosition,children:[v&&(0,o.jsx)("span",{...B.getStyles("stepLabel",G),children:C(v,c)}),_&&(0,o.jsx)("span",{...B.getStyles("stepDescription",G),children:C(_,c)})]})]})});S.classes=_,S.displayName="@mantine/core/StepperStep";let z={orientation:"horizontal",iconPosition:"left",allowNextStepsSelect:!0,wrap:!0},T=(0,l.Z)((e,{color:t,iconSize:r,size:o,contentPadding:n,radius:l,autoContrast:u})=>({root:{"--stepper-color":t?(0,a.p)(t,e):void 0,"--stepper-icon-color":(0,d.o)(u,e)?(0,c.R)({color:t,theme:e,autoContrast:u}):void 0,"--stepper-icon-size":void 0===r?(0,s.ap)(o,"stepper-icon-size"):(0,i.h)(r),"--stepper-content-padding":(0,s.bG)(n),"--stepper-radius":void 0===l?void 0:(0,s.H5)(l),"--stepper-fz":(0,s.yv)(o),"--stepper-spacing":(0,s.bG)(o)}})),D=(0,h.d)((e,t)=>{let r=(0,u.w)("Stepper",z,e),{classNames:i,className:s,style:l,styles:a,unstyled:c,vars:d,children:h,onStepClick:f,active:g,icon:j,completedIcon:b,progressIcon:y,color:w,iconSize:C,contentPadding:k,orientation:S,iconPosition:D,size:N,radius:M,allowNextStepsSelect:E,wrap:H,autoContrast:I,...B}=r,R=(0,m.y)({name:"Stepper",classes:_,props:r,className:s,style:l,classNames:i,styles:a,unstyled:c,vars:d,varsResolver:T}),G=n.Children.toArray(h),F=G.filter(e=>e.type!==v),P=G.find(e=>e.type===v),A=F.reduce((e,t,r)=>{let o=g===r?"stepProgress":g>r?"stepCompleted":"stepInactive",i="function"==typeof f&&("boolean"==typeof t.props.allowStepSelect?t.props.allowStepSelect:"stepCompleted"===o||E);return e.push((0,n.cloneElement)(t,{icon:t.props.icon||j||r+1,key:r,step:r,state:o,onClick:()=>i&&f?.(r),allowStepClick:i,completedIcon:t.props.completedIcon||b,progressIcon:t.props.progressIcon||y,color:t.props.color||w,iconSize:C,radius:M,iconPosition:t.props.iconPosition||D,orientation:S,unstyled:c})),"horizontal"===S&&r!==F.length-1&&e.push((0,n.createElement)("div",{...R("separator"),"data-active":rF.length-1?V:L;return(0,o.jsx)(x,{value:{getStyles:R,orientation:S,iconPosition:D},children:(0,o.jsxs)(p.x,{...R("root"),ref:t,size:N,...B,children:[(0,o.jsx)(p.x,{...R("steps"),mod:{orientation:S,"icon-position":D,wrap:H&&"vertical"!==S},children:A}),Z&&(0,o.jsx)("div",{...R("content"),children:Z})]})})});D.classes=_,D.displayName="@mantine/core/Stepper",D.Completed=v,D.Step=S},84786:function(e,t,r){"use strict";r.d(t,{T:function(){return _}});var o=r(52322),n=r(2784),i=r(58898),s=r(91482),l=r(11200),a=r(13588),c=r(39568),d=r(90006),u=r(38483),m=r(46690),p=r(28559),h=r(82027);let[x,f]=(0,r(89106).R)("Timeline component was not found in tree");var v=r(68755),g={root:"m_43657ece",itemTitle:"m_2ebe8099",item:"m_436178ff",itemBullet:"m_8affcee1",itemBody:"m_540e8f41"};let j={},b=(0,h.d)((e,t)=>{let{classNames:r,className:n,style:i,styles:l,vars:c,__active:d,__align:m,__lineActive:h,__vars:x,bullet:g,radius:b,color:y,lineVariant:w,children:_,title:C,mod:k,...S}=(0,u.w)("TimelineItem",j,e),z=f(),T=(0,v.rZ)(),D={classNames:r,styles:l};return(0,o.jsxs)(p.x,{...z.getStyles("item",{...D,className:n,style:i}),mod:[{"line-active":h,active:d},k],ref:t,__vars:{"--tli-radius":b?(0,s.H5)(b):void 0,"--tli-color":y?(0,a.p)(y,T):void 0,"--tli-border-style":w||void 0},...S,children:[(0,o.jsx)(p.x,{...z.getStyles("itemBullet",D),mod:{"with-child":!!g,align:m,active:d},children:g}),(0,o.jsxs)("div",{...z.getStyles("itemBody",D),children:[C&&(0,o.jsx)("div",{...z.getStyles("itemTitle",D),children:C}),(0,o.jsx)("div",{...z.getStyles("itemContent",D),children:_})]})]})});b.classes=g,b.displayName="@mantine/core/TimelineItem";let y={active:-1,align:"left",reverseActive:!1},w=(0,l.Z)((e,{bulletSize:t,lineWidth:r,radius:o,color:n,autoContrast:l})=>({root:{"--tl-bullet-size":(0,i.h)(t),"--tl-line-width":(0,i.h)(r),"--tl-radius":void 0===o?void 0:(0,s.H5)(o),"--tl-color":n?(0,a.p)(n,e):void 0,"--tl-icon-color":(0,d.o)(l,e)?(0,c.R)({color:n,theme:e,autoContrast:l}):void 0}})),_=(0,h.d)((e,t)=>{let r=(0,u.w)("Timeline",y,e),{classNames:i,className:s,style:l,styles:a,unstyled:c,vars:d,children:h,active:f,color:v,radius:j,bulletSize:b,align:_,lineWidth:C,reverseActive:k,mod:S,autoContrast:z,...T}=r,D=(0,m.y)({name:"Timeline",classes:g,props:r,className:s,style:l,classNames:i,styles:a,unstyled:c,vars:d,varsResolver:w}),N=n.Children.toArray(h),M=N.map((e,t)=>(0,n.cloneElement)(e,{unstyled:c,__align:_,__active:e.props?.active||(k?f>=N.length-t-1:f>=t),__lineActive:e.props?.lineActive||(k?f>=N.length-t-1:f-1>=t)}));return(0,o.jsx)(x,{value:{getStyles:D},children:(0,o.jsx)(p.x,{...D("root"),mod:[{align:_},S],ref:t,...T,children:M})})});_.classes=g,_.displayName="@mantine/core/Timeline",_.Item=b},59526:function(e,t,r){"use strict";r.d(t,{x:function(){return k}});var o=r(52322),n=r(28879),i=r(2784),s=r(82027),l=r(38483),a=r(46690),c=r(51477),d=r(54813),u=r(40284),m=r(70837),p=r(3900),h=r(71978),x=r(93141),f=r(46766),v=r(57888),g=r(51235),j=r(9882),b=r(95488),y=r(71686),w=r(35963),_={timeWrapper:"m_208d2562",timeInput:"m_62ee059"};let C={dropdownType:"popover"},k=(0,s.d)((e,t)=>{let r=(0,l.w)("DateTimePicker",C,e),{value:s,defaultValue:k,onChange:S,valueFormat:z,locale:T,classNames:D,styles:N,unstyled:M,timeInputProps:E,submitButtonProps:H,withSeconds:I,level:B,defaultLevel:R,size:G,variant:F,dropdownType:P,vars:A,minDate:L,maxDate:V,...Z}=r,O=(0,a.y)({name:"DateTimePicker",classes:_,props:r,classNames:D,styles:N,unstyled:M,vars:A}),{resolvedClassNames:W,resolvedStyles:q}=(0,c.h)({classNames:D,styles:N,props:r}),U=(0,i.useRef)(),$=(0,m.Yx)(U,E?.ref),{calendarProps:{allowSingleDateInRange:Y,...J},others:X}=(0,j.M)(Z),K=(0,f.e)(),[Q,ee]=(0,x.l)({type:"default",value:s,defaultValue:k,onChange:S}),et=e=>e?n(e).format(I?"HH:mm:ss":"HH:mm"):"",[er,eo]=(0,i.useState)(et(Q)),[en,ei]=(0,i.useState)(B||R||"month"),[es,el]=(0,p.q)(!1),ea=Q?n(Q).locale(K.getLocale(T)).format(z||(I?"DD/MM/YYYY HH:mm:ss":"DD/MM/YYYY HH:mm")):"";(0,h.l)(()=>{es||eo(et(Q))},[Q,es]),(0,h.l)(()=>{es&&ei("month")},[es]);let ec=L?n(L).format("HH:mm:ss"):null,ed=V?n(V).format("HH:mm:ss"):null,eu="popover"===P;return(0,o.jsxs)(y.i,{formattedValue:ea,dropdownOpened:es,dropdownHandlers:el,classNames:W,styles:q,unstyled:M,ref:t,onClear:()=>ee(null),shouldClear:!!Q,value:Q,size:G,variant:F,dropdownType:P,...X,type:"default",__staticSelector:"DateTimePicker",children:[(0,o.jsx)(b.M,{...J,maxDate:V,minDate:L,size:G,variant:F,type:"default",value:Q,defaultDate:Q,onChange:e=>{e&&ee((0,v.o)(Q,e)),U.current?.focus()},locale:T,classNames:W,styles:q,unstyled:M,__staticSelector:"DateTimePicker",__stopPropagation:eu,level:B,defaultLevel:R,onLevelChange:e=>{ei(e),J.onLevelChange?.(e)},__timezoneApplied:!0}),"month"===en&&(0,o.jsxs)("div",{...O("timeWrapper"),children:[(0,o.jsx)(w.M,{value:er,withSeconds:I,ref:$,unstyled:M,minTime:Q&&L&&Q.toDateString()===L.toDateString()&&null!=ec?ec:void 0,maxTime:Q&&V&&Q.toDateString()===V.toDateString()&&null!=ed?ed:void 0,...E,...O("timeInput",{className:E?.className,style:E?.style}),onChange:e=>{E?.onChange?.(e);let t=e.currentTarget.value;if(eo(t),t){let[e,r,o]=t.split(":").map(Number),n=(0,g.w)("add",new Date,K.getTimezone());n.setHours(e),n.setMinutes(r),n.setSeconds(o||0),ee((0,v.o)(n,Q||(0,g.w)("add",new Date,K.getTimezone())))}},onKeyDown:e=>{E?.onKeyDown?.(e),"Enter"===e.key&&(e.preventDefault(),el.close())},size:G,"data-mantine-stop-propagation":eu||void 0}),(0,o.jsx)(d.A,{variant:"default",size:`input-${G||"sm"}`,...O("submitButton",{className:H?.className,style:H?.style}),unstyled:M,"data-mantine-stop-propagation":eu||void 0,children:(0,o.jsx)(u.n,{size:"30%"}),...H,onClick:e=>{H?.onClick?.(e),el.close()}})]})]})});k.classes={..._,...y.i.classes,...b.M.classes},k.displayName="@mantine/dates/DateTimePicker"},35963:function(e,t,r){"use strict";r.d(t,{M:function(){return d}});var o=r(52322),n=r(40489),i=r(82027),s=r(38483),l=r(51477),a=r(73063);let c={},d=(0,i.d)((e,t)=>{let r=(0,s.w)("TimeInput",c,e),{classNames:i,styles:d,unstyled:u,vars:m,withSeconds:p,minTime:h,maxTime:x,value:f,onChange:v,...g}=r,{resolvedClassNames:j,resolvedStyles:b}=(0,l.h)({classNames:i,styles:d,props:r}),y=e=>{if(void 0!==h||void 0!==x){let[t,r,o]=e.split(":").map(Number);if(h){let[e,n,i]=h.split(":").map(Number);if(te||t===e&&r>n||p&&t===e&&r===n&&o>i)return 1}}return 0};return(0,o.jsx)(a.M,{classNames:{...j,input:(0,n.Z)("m_468e7eda",j?.input)},styles:b,unstyled:u,ref:t,value:f,...g,step:p?1:60,onChange:v,onBlur:e=>{if(r.onBlur?.(e),void 0!==h||void 0!==x){let t=e.currentTarget.value;if(t){let o=y(t);1===o?(e.currentTarget.value=x,r.onChange?.(e)):-1===o&&(e.currentTarget.value=h,r.onChange?.(e))}}},type:"time",__staticSelector:"TimeInput"})});d.classes=a.M.classes,d.displayName="@mantine/dates/TimeInput"},57888:function(e,t,r){"use strict";function o(e,t){if(!e||!t)return t;let r=e.getHours(),o=e.getMinutes(),n=e.getSeconds(),i=e.getMilliseconds(),s=new Date(t);return s.setHours(r),s.setMinutes(o),s.setSeconds(n),s.setMilliseconds(i),s}r.d(t,{o:function(){return o}})},34089:function(e,t,r){"use strict";r.d(t,{c:function(){return n}});var o=r(2784);function n(e,t,r={leading:!1}){let[n,i]=(0,o.useState)(e),s=(0,o.useRef)(!1),l=(0,o.useRef)(null),a=(0,o.useRef)(!1),c=()=>window.clearTimeout(l.current);return(0,o.useEffect)(()=>{s.current&&(!a.current&&r.leading?(a.current=!0,i(e)):(c(),l.current=window.setTimeout(()=>{a.current=!1,i(e)},t)))},[e,r.leading,t]),(0,o.useEffect)(()=>(s.current=!0,c),[]),[n,c]}},82923:function(e,t,r){"use strict";r.d(t,{s:function(){return i}});var o=r(2784),n=r(64261);function i(){let[e,t]=(0,o.useState)(!1);(0,n.Y)(()=>{t("undefined"!=typeof window&&"EyeDropper"in window)},[]);let r=(0,o.useCallback)((t={})=>e?new window.EyeDropper().open(t):Promise.resolve(void 0),[e]);return{supported:e,open:r}}},49910:function(e,t,r){"use strict";r.d(t,{O:function(){return c}});var o=r(2784);function n(){let e=window.document;return e.fullscreenElement||e.webkitFullscreenElement||e.mozFullScreenElement||e.msFullscreenElement}async function i(){let e=window.document;return"function"==typeof e.exitFullscreen?e.exitFullscreen():"function"==typeof e.msExitFullscreen?e.msExitFullscreen():"function"==typeof e.webkitExitFullscreen?e.webkitExitFullscreen():"function"==typeof e.mozCancelFullScreen?e.mozCancelFullScreen():null}async function s(e){return e.requestFullscreen?.()||e.msRequestFullscreen?.()||e.webkitEnterFullscreen?.()||e.webkitRequestFullscreen?.()||e.mozRequestFullscreen?.()}let l=["","webkit","moz","ms"];function a(e,{onFullScreen:t,onError:r}){return l.forEach(o=>{e.addEventListener(`${o}fullscreenchange`,t),e.addEventListener(`${o}fullscreenerror`,r)}),()=>{l.forEach(o=>{e.removeEventListener(`${o}fullscreenchange`,t),e.removeEventListener(`${o}fullscreenerror`,r)})}}function c(){let[e,t]=(0,o.useState)(!1),r=(0,o.useRef)(),l=(0,o.useCallback)(e=>{t(e.target===n())},[t]),c=(0,o.useCallback)(e=>{t(!1),console.error(`[@mantine/hooks] use-fullscreen: Error attempting full-screen mode method: ${e} (${e.target})`)},[t]),d=(0,o.useCallback)(async()=>{n()?await i():await s(r.current)},[]),u=(0,o.useCallback)(e=>{null===e?r.current=window.document.documentElement:r.current=e},[]);return(0,o.useEffect)(()=>!r.current&&window.document?(r.current=window.document.documentElement,a(r.current,{onFullScreen:l,onError:c})):r.current?a(r.current,{onFullScreen:l,onError:c}):void 0,[]),{ref:u,toggle:d,fullscreen:e}}},82890:function(e,t,r){"use strict";r.d(t,{c:function(){return i}});var o=r(2784);let n={events:["keypress","mousemove","touchmove","click","scroll"],initialState:!0};function i(e,t){let{events:r,initialState:i}={...n,...t},[s,l]=(0,o.useState)(i),a=(0,o.useRef)();return(0,o.useEffect)(()=>{let t=()=>{l(!1),a.current&&window.clearTimeout(a.current),a.current=window.setTimeout(()=>{l(!0)},e)};return r.forEach(e=>document.addEventListener(e,t)),()=>{r.forEach(e=>document.removeEventListener(e,t))}},[e]),s}},85057:function(e,t,r){"use strict";r.d(t,{D:function(){return n}});var o=r(2784);function n(e){let t=(0,o.useRef)();return(0,o.useEffect)(()=>{t.current=e},[e]),t.current}},88916:function(e,t,r){"use strict";r.d(t,{h:function(){return s},y:function(){return i}});var o=r(2784);let n={x:0,y:0,width:0,height:0,top:0,left:0,bottom:0,right:0};function i(e){let t=(0,o.useRef)(0),r=(0,o.useRef)(null),[i,s]=(0,o.useState)(n),l=(0,o.useMemo)(()=>"undefined"!=typeof window?new ResizeObserver(e=>{let o=e[0];o&&(cancelAnimationFrame(t.current),t.current=requestAnimationFrame(()=>{r.current&&s(o.contentRect)}))}):null,[]);return(0,o.useEffect)(()=>(r.current&&l?.observe(r.current,e),()=>{l?.disconnect(),t.current&&cancelAnimationFrame(t.current)}),[r.current]),[r,i]}function s(e){let[t,{width:r,height:o}]=i(e);return{ref:t,width:r,height:o}}},67778:function(e,t,r){"use strict";r.d(t,{r:function(){return o}});let o=r(70675).ZP.extend({addKeyboardShortcuts:()=>({"Mod-k":()=>(window.dispatchEvent(new Event("edit-link")),!0)})}).configure({openOnClick:!1})}},function(e){e.O(0,[72812,47091,75417,29985,26601,94323,86179,66748,405,11204,61324,18738,76124,46159,7854,91062,92888,49774,40179],function(){return e(e.s=87314)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/styles/css-files-list-0fb69f35e431c594.js b/_next/static/chunks/pages/styles/css-files-list-19bbb65e07d00084.js similarity index 81% rename from _next/static/chunks/pages/styles/css-files-list-0fb69f35e431c594.js rename to _next/static/chunks/pages/styles/css-files-list-19bbb65e07d00084.js index 88141c6f7b1..be3899212b6 100644 --- a/_next/static/chunks/pages/styles/css-files-list-0fb69f35e431c594.js +++ b/_next/static/chunks/pages/styles/css-files-list-19bbb65e07d00084.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[26337],{3962:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styles/css-files-list",function(){return n(91269)}])},91269:function(s,e,n){"use strict";n.r(e),n.d(e,{default:function(){return j}});var t=n(52322),o=n(45392),c=n(9705),r=n(51732),i=n(93010),l=n(45909),a=n(87385),d=n(54813),p=JSON.parse('{"q":["Accordion.css","ActionIcon.css","Alert.css","Affix.css","AppShell.css","Anchor.css","AspectRatio.css","Avatar.css","Badge.css","BackgroundImage.css","Breadcrumbs.css","Burger.css","Blockquote.css","Button.css","Chip.css","Card.css","Checkbox.css","Center.css","ColorInput.css","CloseButton.css","Code.css","Container.css","ColorSwatch.css","ColorPicker.css","Combobox.css","Divider.css","Drawer.css","Dialog.css","Fieldset.css","Flex.css","FloatingIndicator.css","Grid.css","Image.css","Group.css","InlineInput.css","Indicator.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","Pagination.css","Overlay.css","PillsInput.css","Pill.css","PasswordInput.css","Paper.css","PinInput.css","Popover.css","Progress.css","RingProgress.css","Radio.css","Rating.css","ScrollArea.css","SegmentedControl.css","Skeleton.css","SimpleGrid.css","Slider.css","Spoiler.css","Stepper.css","Stack.css","Switch.css","Table.css","Tabs.css","Text.css","Timeline.css","Title.css","ThemeIcon.css","Tree.css","TypographyStylesProvider.css","VisuallyHidden.css","UnstyledButton.css","Tooltip.css","CheckboxCard.css","CheckboxIndicator.css","RadioCard.css","RadioIndicator.css"]}'),u=n(52905);function m(){let s=["global.css",...p.q].map(s=>[s.replace(".css",""),(0,t.jsxs)(i.Z,{children:[(0,t.jsx)(l.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(25071),y=n(15019);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})})}},51732:function(s,e,n){"use strict";n.d(e,{Z:function(){return t}});/** +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[26337],{3962:function(s,e,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styles/css-files-list",function(){return n(91269)}])},91269:function(s,e,n){"use strict";n.r(e),n.d(e,{default:function(){return j}});var t=n(52322),o=n(45392),c=n(9705),r=n(51732),i=n(93010),l=n(45909),a=n(87385),d=n(54813),p=JSON.parse('{"q":["Accordion.css","ActionIcon.css","Alert.css","Anchor.css","Affix.css","AppShell.css","AspectRatio.css","Avatar.css","Badge.css","Blockquote.css","Breadcrumbs.css","BackgroundImage.css","Burger.css","Button.css","Card.css","Center.css","Checkbox.css","Chip.css","Code.css","ColorInput.css","CloseButton.css","ColorSwatch.css","ColorPicker.css","Container.css","Combobox.css","Dialog.css","Fieldset.css","Drawer.css","Divider.css","Flex.css","FloatingIndicator.css","Grid.css","Group.css","Image.css","Indicator.css","Input.css","InlineInput.css","Kbd.css","Loader.css","Mark.css","List.css","LoadingOverlay.css","Modal.css","Menu.css","ModalBase.css","NavLink.css","Notification.css","Pagination.css","NumberInput.css","Overlay.css","Paper.css","PillsInput.css","PasswordInput.css","Pill.css","PinInput.css","Popover.css","Progress.css","Radio.css","RingProgress.css","Rating.css","ScrollArea.css","SimpleGrid.css","Skeleton.css","SegmentedControl.css","Slider.css","Spoiler.css","Stack.css","Table.css","Stepper.css","Switch.css","Tabs.css","Text.css","ThemeIcon.css","Timeline.css","Tooltip.css","Title.css","Tree.css","TypographyStylesProvider.css","UnstyledButton.css","VisuallyHidden.css","CheckboxCard.css","CheckboxIndicator.css","RadioCard.css","RadioIndicator.css"]}'),u=n(52905);function m(){let s=["global.css",...p.q].map(s=>[s.replace(".css",""),(0,t.jsxs)(i.Z,{children:[(0,t.jsx)(l.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(25071),y=n(15019);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})})}},51732:function(s,e,n){"use strict";n.d(e,{Z:function(){return t}});/** * @license @tabler/icons-react v3.3.0 - MIT * * This source code is licensed under the MIT license. diff --git a/_next/static/0MRRW8kpHckxqSyJvSOT5/_buildManifest.js b/_next/static/s_zwUFMxIcbex0313I_bs/_buildManifest.js similarity index 95% rename from _next/static/0MRRW8kpHckxqSyJvSOT5/_buildManifest.js rename to _next/static/s_zwUFMxIcbex0313I_bs/_buildManifest.js index 18cac3bbd38..dbc42850d07 100644 --- a/_next/static/0MRRW8kpHckxqSyJvSOT5/_buildManifest.js +++ b/_next/static/s_zwUFMxIcbex0313I_bs/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST=function(s,e,c,t,a,o,i,r,u,h,n,d,k,p,g,l,f,b,j,m,y,v,x,w,z,_,q,I,B,F,A,D,E,L,M,N,S,T,U){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[g,l,f,b,j,_,"static/chunks/86179-a2fb11e2e0c9eb2c.js",s,a,o,r,h,m,y,q,I,"static/css/689f4ba1bc212255.css","static/chunks/pages/index-92c2c24b9de76ea7.js"],"/404":[e,s,c,t,"static/chunks/pages/404-801f418b703fdd8f.js"],"/_error":["static/chunks/pages/_error-95d51db2fb6a2e23.js"],"/about":[e,s,c,t,"static/css/7c164d03fceab98f.css","static/chunks/pages/about-c2303e16dc6d35ad.js"],"/app-shell":["static/css/dc549a3d8b9a0209.css","static/chunks/pages/app-shell-8546ef3cb2e1232f.js"],"/changelog/7-0-0":[e,u,j,s,c,t,r,v,B,"static/chunks/pages/changelog/7-0-0-c49c3bd957cb713c.js"],"/changelog/7-1-0":[e,s,c,t,"static/chunks/pages/changelog/7-1-0-d106ff05f83d05a5.js"],"/changelog/7-10-0":[e,s,c,t,a,F,A,"static/chunks/pages/changelog/7-10-0-83f04f50fdfd2deb.js"],"/changelog/7-2-0":[e,u,s,c,t,a,x,"static/chunks/pages/changelog/7-2-0-358c3e428e92b271.js"],"/changelog/7-3-0":[e,s,c,t,a,D,"static/chunks/pages/changelog/7-3-0-6f345552449ff5f3.js"],"/changelog/7-4-0":[e,i,u,n,E,s,c,t,a,k,w,"static/chunks/pages/changelog/7-4-0-ca2c39929763c2fb.js"],"/changelog/7-5-0":[e,i,n,d,p,"static/chunks/79545-cfb3c56a2743405f.js",s,c,t,o,h,k,"static/chunks/pages/changelog/7-5-0-e769e91337d16e72.js"],"/changelog/7-6-0":[g,l,f,e,i,n,d,p,b,L,"static/chunks/97054-61e963695112bcf1.js",s,c,t,r,m,v,"static/chunks/pages/changelog/7-6-0-a5e36a97ff86dce0.js"],"/changelog/7-7-0":[e,i,n,M,s,c,t,k,"static/chunks/pages/changelog/7-7-0-df8712a8011fdc92.js"],"/changelog/7-8-0":[e,s,c,t,a,"static/chunks/pages/changelog/7-8-0-5bc0551013c2c363.js"],"/changelog/7-9-0":[e,i,"static/chunks/79518-0a02230cdc91ebbb.js",s,c,t,"static/chunks/pages/changelog/7-9-0-d8a0b7f5bb5cccb2.js"],"/changelog/all-releases":[e,s,c,t,N,S,"static/chunks/pages/changelog/all-releases-ba9509eb98e67a8d.js"],"/changelog/previous-versions":[e,s,c,t,N,S,"static/chunks/pages/changelog/previous-versions-e4214f76d6356c6e.js"],"/charts/area-chart":[e,i,n,s,c,t,k,"static/chunks/pages/charts/area-chart-1c04c9835779b49b.js"],"/charts/bar-chart":[e,i,s,c,t,"static/chunks/pages/charts/bar-chart-f75e94b3013d0724.js"],"/charts/donut-chart":[e,i,d,p,s,c,t,"static/chunks/pages/charts/donut-chart-3a99669b266e69c4.js"],"/charts/getting-started":[e,s,c,t,"static/chunks/pages/charts/getting-started-daff1f25fb834dec.js"],"/charts/line-chart":[e,i,E,s,c,t,"static/chunks/pages/charts/line-chart-4546c03079d6b93a.js"],"/charts/pie-chart":[e,i,d,p,s,c,t,"static/chunks/pages/charts/pie-chart-8c32394f82007c7e.js"],"/charts/radar-chart":[e,i,d,L,s,c,t,"static/chunks/pages/charts/radar-chart-9db56811eb02c3be.js"],"/charts/scatter-chart":[e,i,M,s,c,t,"static/chunks/pages/charts/scatter-chart-703a2237df29a23f.js"],"/charts/sparkline":[e,i,n,s,c,t,"static/chunks/pages/charts/sparkline-f3cce18517b06acd.js"],"/colors-generator":["static/chunks/15451-2b0a1c30bcfaa971.js","static/css/b22ed36d8530d17d.css","static/chunks/pages/colors-generator-9c14df3a08c44a83.js"],"/combobox":[r,"static/css/f928343dfc69fe64.css","static/chunks/pages/combobox-163acb0387c52861.js"],"/contribute":[e,s,c,t,"static/chunks/pages/contribute-9b9c2f5b8cb37e19.js"],"/core/accordion":[e,s,c,t,I,"static/chunks/pages/core/accordion-eb61e41d27f5ed8f.js"],"/core/action-icon":[e,s,c,t,"static/chunks/pages/core/action-icon-7af1fc71ab3aca2d.js"],"/core/affix":[e,s,c,t,"static/chunks/pages/core/affix-405b7bf2a6053fd1.js"],"/core/alert":[e,s,c,t,"static/chunks/pages/core/alert-5ab29de1ad139eef.js"],"/core/anchor":[e,s,c,t,"static/chunks/pages/core/anchor-f2b97baf241e94a1.js"],"/core/app-shell":[e,s,c,t,"static/chunks/pages/core/app-shell-5fff14c1bbeaea14.js"],"/core/aspect-ratio":[e,s,c,t,"static/chunks/pages/core/aspect-ratio-3e97f496c72d1cf9.js"],"/core/autocomplete":[e,s,c,t,r,"static/chunks/pages/core/autocomplete-5882d7636cbd7be4.js"],"/core/avatar":[e,s,c,t,"static/chunks/pages/core/avatar-1914e30f9543d72e.js"],"/core/background-image":[e,s,c,t,"static/chunks/pages/core/background-image-40889aae8aad6917.js"],"/core/badge":[e,s,c,t,"static/chunks/pages/core/badge-c8dce5894e7be942.js"],"/core/blockquote":[e,s,c,t,"static/chunks/pages/core/blockquote-3c34d3f0d9e47694.js"],"/core/box":[e,s,c,t,"static/chunks/pages/core/box-cc4612f4ab2ad236.js"],"/core/breadcrumbs":[e,s,c,t,"static/chunks/pages/core/breadcrumbs-91dab877212b7ea9.js"],"/core/burger":[e,s,c,t,"static/chunks/pages/core/burger-82b86317559a8f47.js"],"/core/button":[e,s,c,t,"static/chunks/pages/core/button-babc4b84effef648.js"],"/core/card":[e,s,c,t,"static/chunks/pages/core/card-af85cc3a2ad5ded3.js"],"/core/center":[e,s,c,t,"static/chunks/pages/core/center-ec5cd73a9634b056.js"],"/core/checkbox":[e,s,c,t,"static/chunks/pages/core/checkbox-e304f0f26e5f7381.js"],"/core/chip":[e,s,c,t,"static/chunks/pages/core/chip-dec5402186c2db1a.js"],"/core/close-button":[e,s,c,t,"static/chunks/pages/core/close-button-536ed95286ebee9f.js"],"/core/code":[e,s,c,t,"static/chunks/pages/core/code-f96ff96b5de1482d.js"],"/core/collapse":[e,s,c,t,"static/chunks/pages/core/collapse-96cca72995599ba7.js"],"/core/color-input":[e,s,c,t,"static/chunks/pages/core/color-input-49ebbb92b12a49b3.js"],"/core/color-picker":[e,s,c,t,"static/chunks/pages/core/color-picker-a3e4316343c39179.js"],"/core/color-swatch":[e,s,c,t,"static/chunks/pages/core/color-swatch-b3c80ac6ff7bca08.js"],"/core/combobox":[e,s,c,t,r,"static/chunks/pages/core/combobox-b3784e955e43b08b.js"],"/core/container":[e,s,c,t,"static/chunks/pages/core/container-3180514e655550a4.js"],"/core/copy-button":[e,s,c,t,"static/chunks/pages/core/copy-button-00da05690c890626.js"],"/core/dialog":[e,s,c,t,"static/chunks/pages/core/dialog-d4f8bec622c187a6.js"],"/core/divider":[e,s,c,t,"static/chunks/pages/core/divider-d8fece98b3d374c2.js"],"/core/drawer":[e,s,c,t,a,D,"static/chunks/pages/core/drawer-6b458e52af38b49d.js"],"/core/fieldset":[e,s,c,t,"static/chunks/pages/core/fieldset-111991762032a6df.js"],"/core/file-button":[e,s,c,t,"static/chunks/pages/core/file-button-98eb58cbb9f30aba.js"],"/core/file-input":[e,s,c,t,"static/chunks/pages/core/file-input-8652dd0a3f473372.js"],"/core/flex":[e,s,c,t,"static/chunks/pages/core/flex-c3eac5a2ec60cbe4.js"],"/core/floating-indicator":[e,s,c,t,"static/chunks/pages/core/floating-indicator-825b70dc89e45d54.js"],"/core/focus-trap":[e,s,c,t,"static/chunks/pages/core/focus-trap-9cd02eed98ba3510.js"],"/core/grid":[e,s,c,t,"static/chunks/pages/core/grid-d0e7386a077fe7f2.js"],"/core/group":[e,s,c,t,"static/chunks/pages/core/group-6bc9884caa2fb84e.js"],"/core/highlight":[e,s,c,t,"static/chunks/pages/core/highlight-023a355f22761bc9.js"],"/core/hover-card":[e,s,c,t,"static/chunks/pages/core/hover-card-6c9c79ddbb690a59.js"],"/core/image":[e,s,c,t,"static/chunks/pages/core/image-5712fe9ab35fe431.js"],"/core/indicator":[e,s,c,t,"static/chunks/pages/core/indicator-0aff38197b650df9.js"],"/core/input":[e,"static/chunks/67915-5d3cf12ccca34636.js",s,c,t,"static/chunks/pages/core/input-1e66aaa49bc28335.js"],"/core/json-input":[e,s,c,t,"static/chunks/pages/core/json-input-b2642823ac063bd4.js"],"/core/kbd":[e,s,c,t,"static/chunks/pages/core/kbd-248ccd62118ff161.js"],"/core/list":[e,s,c,t,"static/chunks/pages/core/list-a9ad0ada9b4e0cf0.js"],"/core/loader":[e,s,c,t,a,x,"static/chunks/pages/core/loader-473905c6ba4e75b2.js"],"/core/loading-overlay":[e,s,c,t,a,x,"static/chunks/pages/core/loading-overlay-14cbfc2ac055bd4e.js"],"/core/mark":[e,s,c,t,"static/chunks/pages/core/mark-e32ff4aaeaa9a58d.js"],"/core/menu":[e,s,c,t,"static/chunks/pages/core/menu-fd9494714efec5c6.js"],"/core/modal":[e,s,c,t,a,T,"static/chunks/pages/core/modal-1badd2d61e1c505c.js"],"/core/multi-select":[e,s,c,t,r,q,"static/chunks/pages/core/multi-select-ffd6dcfe68e3662b.js"],"/core/native-select":[e,s,c,t,"static/chunks/pages/core/native-select-e1fd1ca76dcfd6b4.js"],"/core/nav-link":[e,s,c,t,"static/chunks/pages/core/nav-link-52d83234703a76a0.js"],"/core/notification":[e,s,c,t,"static/chunks/pages/core/notification-a5ae4f2f98c7c62d.js"],"/core/number-formatter":[e,u,s,c,t,"static/chunks/pages/core/number-formatter-b9bfce4030a60b95.js"],"/core/number-input":[e,u,s,c,t,"static/chunks/pages/core/number-input-0d5846d81bab9625.js"],"/core/overlay":[e,s,c,t,"static/chunks/pages/core/overlay-cb325c3a8c37d15d.js"],"/core/pagination":[e,s,c,t,y,"static/chunks/pages/core/pagination-364fa94e7ced3fb6.js"],"/core/paper":[e,s,c,t,"static/chunks/pages/core/paper-d6d7e481657db4fc.js"],"/core/password-input":[e,s,c,t,"static/chunks/pages/core/password-input-11dab0bacaa2a38a.js"],"/core/pill":[e,s,c,t,"static/chunks/pages/core/pill-b6a3aeff8923d879.js"],"/core/pills-input":[e,s,c,t,r,"static/chunks/pages/core/pills-input-778af71a5c9966e8.js"],"/core/pin-input":[e,s,c,t,"static/chunks/pages/core/pin-input-a3d253c9cf323099.js"],"/core/popover":[e,s,c,t,o,r,h,"static/chunks/pages/core/popover-7265ea73db009595.js"],"/core/portal":[e,s,c,t,"static/chunks/pages/core/portal-1363dd519609aebe.js"],"/core/progress":[e,s,c,t,"static/chunks/pages/core/progress-132482258dd96f80.js"],"/core/radio":[e,s,c,t,F,"static/chunks/pages/core/radio-e445ffc09012534f.js"],"/core/rating":[e,s,c,t,"static/chunks/pages/core/rating-d43b799647fd861f.js"],"/core/ring-progress":[e,s,c,t,"static/chunks/pages/core/ring-progress-1bad35967494b165.js"],"/core/scroll-area":[e,s,c,t,"static/chunks/pages/core/scroll-area-2df61ddda7d87d54.js"],"/core/segmented-control":[e,s,c,t,"static/chunks/pages/core/segmented-control-5a142e2e0d48295e.js"],"/core/select":[e,s,c,t,r,"static/chunks/pages/core/select-7dd118e28072a25d.js"],"/core/simple-grid":[e,s,c,t,"static/chunks/pages/core/simple-grid-e03e9b70a2887447.js"],"/core/skeleton":[e,s,c,t,"static/chunks/pages/core/skeleton-a936c34b4365ad9b.js"],"/core/slider":[e,s,c,t,"static/chunks/pages/core/slider-511dfb0d81d1ac6e.js"],"/core/space":[e,s,c,t,"static/chunks/pages/core/space-50ef51bc36fd1af0.js"],"/core/spoiler":[e,s,c,t,"static/chunks/pages/core/spoiler-2b20ed4c1a4f138d.js"],"/core/stack":[e,s,c,t,"static/chunks/pages/core/stack-e39b9605b73e6334.js"],"/core/stepper":[e,s,c,t,"static/chunks/pages/core/stepper-f0647948bdc6befc.js"],"/core/switch":[e,s,c,t,"static/chunks/pages/core/switch-b8fae4d60f3a2ce8.js"],"/core/table":[e,s,c,t,"static/chunks/pages/core/table-7e6090ae919dc8c0.js"],"/core/tabs":[e,s,c,t,"static/chunks/pages/core/tabs-b4d76e20a8bef4b5.js"],"/core/tags-input":[e,s,c,t,r,v,"static/chunks/pages/core/tags-input-bfbbdb5ccdcea854.js"],"/core/text":[e,s,c,t,"static/chunks/pages/core/text-fc66aac59c9d43c6.js"],"/core/text-input":[e,s,c,t,"static/chunks/pages/core/text-input-72edb458de5e76ee.js"],"/core/textarea":[e,s,c,t,"static/chunks/pages/core/textarea-70a12b152a6833f3.js"],"/core/theme-icon":[e,s,c,t,"static/chunks/pages/core/theme-icon-ac131878b9c91469.js"],"/core/timeline":[e,s,c,t,"static/chunks/pages/core/timeline-70bb28044c8a2ffa.js"],"/core/title":[e,s,c,t,"static/chunks/pages/core/title-594d04fc591aa2ae.js"],"/core/tooltip":[e,s,c,t,"static/chunks/pages/core/tooltip-3ffd31af74b3f890.js"],"/core/transition":[e,s,c,t,"static/chunks/pages/core/transition-5674725e583a7451.js"],"/core/tree":[e,s,c,t,A,"static/chunks/pages/core/tree-9410073c23dde8cd.js"],"/core/typography-styles-provider":[e,s,c,t,"static/chunks/pages/core/typography-styles-provider-991785235d47bac4.js"],"/core/unstyled-button":[e,s,c,t,"static/chunks/pages/core/unstyled-button-74f2c84f98b28047.js"],"/core/visually-hidden":[e,s,c,t,"static/chunks/pages/core/visually-hidden-ffe148fc33cb6140.js"],"/dates/calendar":[e,s,c,t,o,"static/chunks/pages/dates/calendar-fd72aac43958daeb.js"],"/dates/date-input":[e,s,c,t,o,"static/chunks/pages/dates/date-input-00f63184b72400bb.js"],"/dates/date-picker":[e,s,c,t,o,z,"static/chunks/pages/dates/date-picker-563b0de370ecd59f.js"],"/dates/date-picker-input":[e,s,c,t,o,h,"static/chunks/pages/dates/date-picker-input-4f07b3067a329bd2.js"],"/dates/date-time-picker":[e,s,c,t,o,"static/chunks/pages/dates/date-time-picker-10162f7367b65c7d.js"],"/dates/dates-provider":[e,s,c,t,o,h,"static/chunks/pages/dates/dates-provider-02c509ee207f73aa.js"],"/dates/getting-started":[e,s,c,t,o,h,"static/chunks/pages/dates/getting-started-f4d36aa9e2676b07.js"],"/dates/month-picker":[e,s,c,t,o,z,"static/chunks/pages/dates/month-picker-28e8ee5efcae0357.js"],"/dates/month-picker-input":[e,s,c,t,o,"static/chunks/pages/dates/month-picker-input-5fb0fcbf3a47aee6.js"],"/dates/time-input":[e,s,c,t,"static/chunks/pages/dates/time-input-40a913a5b2e0b4b8.js"],"/dates/year-picker":[e,s,c,t,o,z,"static/chunks/pages/dates/year-picker-a8ae1518f35b28f9.js"],"/dates/year-picker-input":[e,s,c,t,o,"static/chunks/pages/dates/year-picker-input-39a900cb82e218d3.js"],"/form/actions":[e,s,c,t,"static/chunks/pages/form/actions-aa38e76fc147991e.js"],"/form/create-form-context":[e,s,c,t,"static/chunks/pages/form/create-form-context-7140909fbc3f9831.js"],"/form/errors":[e,s,c,t,"static/chunks/pages/form/errors-746f76565d294cec.js"],"/form/get-input-props":[e,u,s,c,t,a,w,"static/chunks/pages/form/get-input-props-fd8fa77f29a47828.js"],"/form/nested":[e,s,c,t,a,"static/chunks/pages/form/nested-5b8b726487aedfcb.js"],"/form/recipes":["static/chunks/e1533f8b-7153877f366db892.js",e,"static/chunks/8511-b05a219dca3bece8.js",s,c,t,a,"static/chunks/pages/form/recipes-5956eeadd106838f.js"],"/form/schema-validation":[e,s,c,t,"static/chunks/pages/form/schema-validation-07f6ff27334c488c.js"],"/form/status":[e,s,c,t,a,"static/chunks/pages/form/status-86011d150796eaa2.js"],"/form/uncontrolled":[e,s,c,t,a,"static/chunks/pages/form/uncontrolled-933dd7beaf07aa28.js"],"/form/use-field":[e,s,c,t,"static/chunks/pages/form/use-field-0ae2fbc51e35b345.js"],"/form/use-form":[e,s,c,t,a,"static/chunks/pages/form/use-form-69a249d2629e54b6.js"],"/form/validation":[e,u,s,c,t,a,"static/chunks/pages/form/validation-acd37c0c5307a437.js"],"/form/validators":[e,u,s,c,t,a,"static/chunks/pages/form/validators-8cd1ea749b5e5322.js"],"/form/values":[e,u,s,c,t,a,w,"static/chunks/pages/form/values-1503f0ed105d6423.js"],"/getting-started":[e,s,c,t,"static/css/ce241340c0eeed15.css","static/chunks/pages/getting-started-91f4668bb6c31a02.js"],"/guides/6x-to-7x":[e,s,c,t,"static/chunks/pages/guides/6x-to-7x-d00e21fdad68cae9.js"],"/guides/functions-reference":[e,s,c,t,"static/chunks/pages/guides/functions-reference-a01ff09834e7a430.js"],"/guides/gatsby":[e,s,c,t,"static/chunks/pages/guides/gatsby-bcf5bdd3f6fcecb3.js"],"/guides/icons":[e,s,c,t,"static/chunks/pages/guides/icons-11f4e715f4433df8.js"],"/guides/javascript":[e,s,c,t,"static/chunks/pages/guides/javascript-439389dc78da3ace.js"],"/guides/jest":[e,s,c,t,"static/chunks/pages/guides/jest-18e1e6e6b5fbb25d.js"],"/guides/next":[e,s,c,t,"static/chunks/pages/guides/next-42adb0503dcd5c6a.js"],"/guides/polymorphic":[e,s,c,t,"static/chunks/pages/guides/polymorphic-09adc4fd0e06180b.js"],"/guides/redwood":[e,s,c,t,"static/chunks/pages/guides/redwood-e67f05edc9e4bcc4.js"],"/guides/remix":[e,s,c,t,"static/chunks/pages/guides/remix-0b60b2d48c0ced76.js"],"/guides/storybook":[e,s,c,t,"static/chunks/pages/guides/storybook-c9ed984535571945.js"],"/guides/typescript":[e,s,c,t,"static/chunks/pages/guides/typescript-81ef866e51f9fcb6.js"],"/guides/vite":[e,s,c,t,"static/chunks/pages/guides/vite-5f3ff15cc405bf27.js"],"/guides/vitest":[e,s,c,t,"static/chunks/pages/guides/vitest-e99ff163fad05f17.js"],"/hooks/use-click-outside":[e,s,c,t,"static/chunks/pages/hooks/use-click-outside-5c6dbe83f4b7fc11.js"],"/hooks/use-clipboard":[e,s,c,t,"static/chunks/pages/hooks/use-clipboard-4aeabb10d4e8e146.js"],"/hooks/use-color-scheme":[e,s,c,t,"static/chunks/pages/hooks/use-color-scheme-c683018a1213242e.js"],"/hooks/use-counter":[e,s,c,t,"static/chunks/pages/hooks/use-counter-4b9fc8dd8f135f88.js"],"/hooks/use-debounced-callback":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-callback-4ac3871f0a5653a5.js"],"/hooks/use-debounced-state":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-state-38887c94e3ddeb11.js"],"/hooks/use-debounced-value":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-value-46578fb2028d657c.js"],"/hooks/use-did-update":[e,s,c,t,"static/chunks/pages/hooks/use-did-update-94312ecc04744c93.js"],"/hooks/use-disclosure":[e,s,c,t,"static/chunks/pages/hooks/use-disclosure-b9404e4de1440386.js"],"/hooks/use-document-title":[e,s,c,t,"static/chunks/pages/hooks/use-document-title-4c8bf8dcb3b8aeac.js"],"/hooks/use-document-visibility":[e,s,c,t,"static/chunks/pages/hooks/use-document-visibility-3c75dbb7778367d3.js"],"/hooks/use-element-size":[e,s,c,t,"static/chunks/pages/hooks/use-element-size-13d9a4d76a44fbd3.js"],"/hooks/use-event-listener":[e,s,c,t,"static/chunks/pages/hooks/use-event-listener-19a810ee7a311677.js"],"/hooks/use-eye-dropper":[e,s,c,t,"static/chunks/pages/hooks/use-eye-dropper-7ad715983689cae7.js"],"/hooks/use-favicon":[e,s,c,t,"static/chunks/pages/hooks/use-favicon-d0e57ada4f0afaf2.js"],"/hooks/use-fetch":[e,s,c,t,"static/chunks/pages/hooks/use-fetch-9e1f6efb21469af4.js"],"/hooks/use-focus-return":[e,s,c,t,a,T,"static/chunks/pages/hooks/use-focus-return-15462b45a43c6c9c.js"],"/hooks/use-focus-trap":[e,s,c,t,"static/chunks/pages/hooks/use-focus-trap-eeef8e033d4c04cd.js"],"/hooks/use-focus-within":[e,s,c,t,"static/chunks/pages/hooks/use-focus-within-3979b0940d05c9d1.js"],"/hooks/use-force-update":[e,s,c,t,"static/chunks/pages/hooks/use-force-update-ef3c48e3ede39310.js"],"/hooks/use-fullscreen":[e,s,c,t,"static/chunks/pages/hooks/use-fullscreen-19e1e3c668ab278d.js"],"/hooks/use-hash":[e,s,c,t,"static/chunks/pages/hooks/use-hash-21e52ed7fc0ffcaa.js"],"/hooks/use-headroom":[e,s,c,t,"static/chunks/pages/hooks/use-headroom-e672cc7034c43a7a.js"],"/hooks/use-hotkeys":[e,s,c,t,"static/chunks/pages/hooks/use-hotkeys-98142066e0baa92e.js"],"/hooks/use-hover":[e,s,c,t,"static/chunks/pages/hooks/use-hover-a9cfdd97b934d7ea.js"],"/hooks/use-id":[e,s,c,t,"static/chunks/pages/hooks/use-id-d078042d1940aa5f.js"],"/hooks/use-idle":[e,s,c,t,"static/chunks/pages/hooks/use-idle-f8d86322e4edb12b.js"],"/hooks/use-in-viewport":[e,s,c,t,"static/chunks/pages/hooks/use-in-viewport-063ded9e04aeeb0a.js"],"/hooks/use-input-state":[e,s,c,t,"static/chunks/pages/hooks/use-input-state-2e9c004ac9c7bdd2.js"],"/hooks/use-intersection":[e,s,c,t,"static/chunks/pages/hooks/use-intersection-3a0cb1cf5f673d04.js"],"/hooks/use-interval":[e,s,c,t,"static/chunks/pages/hooks/use-interval-bde4e70a017b0b92.js"],"/hooks/use-is-first-render":[e,s,c,t,"static/chunks/pages/hooks/use-is-first-render-d9886a0ee2aead07.js"],"/hooks/use-isomorphic-effect":[e,s,c,t,"static/chunks/pages/hooks/use-isomorphic-effect-b40df0620cdd1f36.js"],"/hooks/use-list-state":[e,s,c,t,"static/chunks/pages/hooks/use-list-state-c3ddb1bb583f9a84.js"],"/hooks/use-local-storage":[e,s,c,t,"static/chunks/pages/hooks/use-local-storage-7d78df44acdfb133.js"],"/hooks/use-logger":[e,s,c,t,"static/chunks/pages/hooks/use-logger-1212db923be64687.js"],"/hooks/use-map":[e,s,c,t,"static/chunks/pages/hooks/use-map-f321ea036f0551d5.js"],"/hooks/use-media-query":[e,s,c,t,"static/chunks/pages/hooks/use-media-query-3e707ac78705a890.js"],"/hooks/use-merged-ref":[e,s,c,t,"static/chunks/pages/hooks/use-merged-ref-e27af8970a7de905.js"],"/hooks/use-mounted":[e,s,c,t,"static/chunks/pages/hooks/use-mounted-cd564ce782436e25.js"],"/hooks/use-mouse":[e,s,c,t,"static/chunks/pages/hooks/use-mouse-206ef53a6dfb0118.js"],"/hooks/use-move":[e,s,c,t,"static/chunks/pages/hooks/use-move-197fd3ba66cf5a64.js"],"/hooks/use-mutation-observer":[e,s,c,t,"static/chunks/pages/hooks/use-mutation-observer-9ef3a64eb008ede8.js"],"/hooks/use-network":[e,s,c,t,"static/chunks/pages/hooks/use-network-dbdd07bcbb8bd888.js"],"/hooks/use-orientation":[e,s,c,t,"static/chunks/pages/hooks/use-orientation-96bd965065016026.js"],"/hooks/use-os":[e,s,c,t,"static/chunks/pages/hooks/use-os-83e8463d0863dd99.js"],"/hooks/use-page-leave":[e,s,c,t,"static/chunks/pages/hooks/use-page-leave-903940657c24a842.js"],"/hooks/use-pagination":[e,s,c,t,y,"static/chunks/pages/hooks/use-pagination-2a2954905c114f2b.js"],"/hooks/use-previous":[e,s,c,t,"static/chunks/pages/hooks/use-previous-0144dea96975594b.js"],"/hooks/use-queue":[e,s,c,t,"static/chunks/pages/hooks/use-queue-2f6910e7d053cc5c.js"],"/hooks/use-reduced-motion":[e,s,c,t,"static/chunks/pages/hooks/use-reduced-motion-ddb6803a15fe5a1f.js"],"/hooks/use-resize-observer":[e,s,c,t,"static/chunks/pages/hooks/use-resize-observer-6e271a63ca2a113e.js"],"/hooks/use-scroll-into-view":[e,s,c,t,"static/chunks/pages/hooks/use-scroll-into-view-be578346c8e7e9a5.js"],"/hooks/use-set":[e,s,c,t,"static/chunks/pages/hooks/use-set-1e98e97dc0bfdd5f.js"],"/hooks/use-set-state":[e,s,c,t,"static/chunks/pages/hooks/use-set-state-844b29242247d46e.js"],"/hooks/use-shallow-effect":[e,s,c,t,"static/chunks/pages/hooks/use-shallow-effect-b7c8581b17f6e7bc.js"],"/hooks/use-state-history":[e,s,c,t,"static/chunks/pages/hooks/use-state-history-e1a55e6c4b3140d2.js"],"/hooks/use-text-selection":[e,s,c,t,"static/chunks/pages/hooks/use-text-selection-2890b601fc9af1c3.js"],"/hooks/use-throttled-callback":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-callback-90e550759ee81736.js"],"/hooks/use-throttled-state":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-state-d7e0dd2415defd7d.js"],"/hooks/use-throttled-value":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-value-e280da5fdae32fad.js"],"/hooks/use-timeout":[e,s,c,t,"static/chunks/pages/hooks/use-timeout-d179d6ed11962a03.js"],"/hooks/use-toggle":[e,s,c,t,"static/chunks/pages/hooks/use-toggle-af63a725fa876b7e.js"],"/hooks/use-uncontrolled":[e,s,c,t,"static/chunks/pages/hooks/use-uncontrolled-215db08718cfdc4d.js"],"/hooks/use-validated-state":[e,s,c,t,"static/chunks/pages/hooks/use-validated-state-229172c19f6b706b.js"],"/hooks/use-viewport-size":[e,s,c,t,"static/chunks/pages/hooks/use-viewport-size-138c068215ac87c8.js"],"/hooks/use-window-event":[e,s,c,t,"static/chunks/pages/hooks/use-window-event-c681e1e1ddea839e.js"],"/hooks/use-window-scroll":[e,s,c,t,"static/chunks/pages/hooks/use-window-scroll-a554de6ba44c2595.js"],"/others/carousel":["static/chunks/pages/others/carousel-eb74f9b7c9ae1531.js"],"/others/code-highlight":["static/chunks/pages/others/code-highlight-6d174f46988db106.js"],"/others/dropzone":["static/chunks/pages/others/dropzone-631ae8ff0c176f3e.js"],"/others/modals":["static/chunks/pages/others/modals-cc2d05791f79a270.js"],"/others/notifications":["static/chunks/pages/others/notifications-7bfa61e17429abde.js"],"/others/nprogress":["static/chunks/pages/others/nprogress-f3da9995b1d8cf29.js"],"/others/spotlight":["static/chunks/pages/others/spotlight-4f6db25aff3c961c.js"],"/others/tiptap":["static/chunks/pages/others/tiptap-d577a4e2f1df177d.js"],"/overview":[e,s,c,t,U,"static/chunks/pages/overview-4dc462e52890b436.js"],"/styles/color-functions":[e,s,c,t,"static/chunks/pages/styles/color-functions-8ca4a8159b3ef5e5.js"],"/styles/css-files-list":[e,s,c,t,"static/chunks/pages/styles/css-files-list-0fb69f35e431c594.js"],"/styles/css-modules":[e,s,c,t,"static/chunks/pages/styles/css-modules-c6539d6827e76caa.js"],"/styles/css-variables":[e,s,c,t,"static/css/b49f69e19f867ec9.css","static/chunks/pages/styles/css-variables-ababb513e3203375.js"],"/styles/css-variables-list":[e,s,c,t,"static/chunks/pages/styles/css-variables-list-bac383ec5c785136.js"],"/styles/data-attributes":[e,s,c,t,"static/chunks/pages/styles/data-attributes-da495ee9ab0c0a3c.js"],"/styles/emotion":[e,"static/chunks/94982-aa5e4bb8bef90323.js",s,c,t,"static/chunks/pages/styles/emotion-56369c5a64a0dc8f.js"],"/styles/global-styles":[e,s,c,t,"static/chunks/pages/styles/global-styles-3be5f2e9382bfd6e.js"],"/styles/mantine-styles":[e,s,c,t,"static/chunks/pages/styles/mantine-styles-06ee7a43d54014d1.js"],"/styles/postcss-preset":[e,s,c,t,"static/chunks/pages/styles/postcss-preset-d9a708c1d6236322.js"],"/styles/rem":[e,s,c,t,"static/chunks/pages/styles/rem-0fbcd61032045fbb.js"],"/styles/responsive":[e,s,c,t,"static/chunks/pages/styles/responsive-3aa212ba90aa2e47.js"],"/styles/rtl":[e,s,c,t,"static/chunks/pages/styles/rtl-2a91ab9450218ce9.js"],"/styles/sass":[e,s,c,t,"static/chunks/pages/styles/sass-6b519e1467baf007.js"],"/styles/style":[e,s,c,t,"static/chunks/pages/styles/style-728ce369dd1d6547.js"],"/styles/style-props":[e,s,c,t,"static/chunks/pages/styles/style-props-0275fbcd6d5af5cc.js"],"/styles/styles-api":[e,s,c,t,"static/chunks/pages/styles/styles-api-5d70c5369de1b099.js"],"/styles/styles-overview":[e,s,c,t,"static/chunks/pages/styles/styles-overview-41246265d929784d.js"],"/styles/styles-performance":[e,s,c,t,"static/chunks/pages/styles/styles-performance-fa284ede9d4ae939.js"],"/styles/unstyled":[e,s,c,t,"static/chunks/pages/styles/unstyled-0b91fed15b251603.js"],"/styles/vanilla-extract":[e,s,c,t,"static/chunks/pages/styles/vanilla-extract-b5f5307c219d8a52.js"],"/styles/variants-sizes":[e,s,c,t,"static/chunks/pages/styles/variants-sizes-d61e945fc0ce4cf9.js"],"/submit-template":[e,s,c,t,"static/chunks/pages/submit-template-64cc2ec4e71fe555.js"],"/templates-usage":[e,s,c,t,"static/chunks/pages/templates-usage-f3f22fc613280a19.js"],"/theming/color-schemes":[e,s,c,t,"static/chunks/pages/theming/color-schemes-494c32e4e8d26396.js"],"/theming/colors":[e,s,c,t,U,"static/chunks/pages/theming/colors-490ce8c01567f51e.js"],"/theming/default-props":[e,s,c,t,"static/chunks/pages/theming/default-props-7afdbb6569a906db.js"],"/theming/default-theme":[e,s,c,t,"static/chunks/pages/theming/default-theme-790479def9a93f59.js"],"/theming/mantine-provider":[e,s,c,t,"static/chunks/pages/theming/mantine-provider-5a28ccf9d311354f.js"],"/theming/theme-object":[e,s,c,t,"static/chunks/pages/theming/theme-object-1b5776a30d844d69.js"],"/theming/typography":[e,s,c,t,"static/chunks/pages/theming/typography-6ab03af9599ef40c.js"],"/x/carousel":[e,j,s,c,t,B,"static/chunks/pages/x/carousel-1c0485257d8b1d33.js"],"/x/code-highlight":[e,s,c,t,"static/chunks/pages/x/code-highlight-839715d3a0d0edf7.js"],"/x/dropzone":[e,"static/chunks/40798-034a69d6d6d17a49.js",s,c,t,"static/chunks/pages/x/dropzone-88e985febe206416.js"],"/x/modals":[e,s,c,t,"static/chunks/pages/x/modals-d3d227b42eab2342.js"],"/x/notifications":[e,s,c,t,"static/chunks/pages/x/notifications-de7e38afcc53977a.js"],"/x/nprogress":[e,s,c,t,"static/chunks/pages/x/nprogress-2782e2125a8f26f6.js"],"/x/spotlight":[e,s,c,t,"static/chunks/pages/x/spotlight-88b10a69d404a4df.js"],"/x/tiptap":[g,l,f,e,b,_,"static/chunks/62618-64fbbea3a71ef35e.js",s,c,t,m,"static/chunks/pages/x/tiptap-bdabc5772ea15593.js"],sortedPages:["/","/404","/_app","/_error","/about","/app-shell","/changelog/7-0-0","/changelog/7-1-0","/changelog/7-10-0","/changelog/7-2-0","/changelog/7-3-0","/changelog/7-4-0","/changelog/7-5-0","/changelog/7-6-0","/changelog/7-7-0","/changelog/7-8-0","/changelog/7-9-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/radar-chart","/charts/scatter-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/floating-indicator","/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/tree","/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/uncontrolled","/form/use-field","/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-callback","/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-fetch","/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-is-first-render","/hooks/use-isomorphic-effect","/hooks/use-list-state","/hooks/use-local-storage","/hooks/use-logger","/hooks/use-map","/hooks/use-media-query","/hooks/use-merged-ref","/hooks/use-mounted","/hooks/use-mouse","/hooks/use-move","/hooks/use-mutation-observer","/hooks/use-network","/hooks/use-orientation","/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","/hooks/use-set-state","/hooks/use-shallow-effect","/hooks/use-state-history","/hooks/use-text-selection","/hooks/use-throttled-callback","/hooks/use-throttled-state","/hooks/use-throttled-value","/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/emotion","/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/66748-725affde329bb373.js","static/chunks/61177-755f551e12967c5d.js","static/css/2bc299183ebfb8fb.css","static/chunks/11340-561ed520b05a5dc1.js","static/chunks/405-316e1006ce89fb62.js","static/chunks/11204-f8ee63a4acb9a641.js","static/chunks/16717-f93e339811ef9b9f.js","static/chunks/61324-bd7b904cb8a8396c.js","static/chunks/9462-2678ea25af5a102d.js","static/chunks/18738-fedb26ea189ec2bb.js","static/chunks/50603-51b67801a55925d1.js","static/chunks/59966-f953d8f419121bb2.js","static/chunks/47889-4781b1b0c85c427a.js","static/chunks/43454-26a88ccf32030d95.js","static/chunks/b155a556-d8b1a5e0e54cd6fa.js","static/chunks/5e51008f-0b4a23617bf99572.js","static/chunks/b779bb5e-b0322769a36b57fc.js","static/chunks/29985-f72e04a4c2f61df6.js","static/chunks/26601-33e8287835f81f06.js","static/chunks/76124-e3f82969e5055c6e.js","static/chunks/46159-84998a3262b57463.js","static/chunks/77413-5c39e4f930c686f0.js","static/chunks/36503-0859d759374e80bb.js","static/chunks/74736-830f3cac4efb5d18.js","static/chunks/36386-a91444513063e519.js","static/chunks/94323-2a1ed3d2da651173.js","static/chunks/7854-86f188aed4966c27.js","static/chunks/91062-dc78c4703c579b6b.js","static/chunks/82605-01cfc1d75acdc33c.js","static/chunks/7763-7f9c50f4ec5d1d08.js","static/chunks/29466-8d6d4f019f50e357.js","static/chunks/57902-963a959c12bd6c63.js","static/chunks/62662-b073cb0ceb20f14f.js","static/chunks/37355-d2676dfcb2a1e2bd.js","static/chunks/41277-440f9eefbecc26b8.js","static/chunks/3309-8453f90f43cd6002.js","static/css/d2e82f58d1b5e6b3.css","static/chunks/64485-6aceedad7b757811.js","static/css/74f4115ba6605d28.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,h,n,d,k,p,g,l,f,b,j,m,y,v,x,w,z,_,q,I,B,F,A,D,E,L,M,N,S,T,U){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[g,l,f,b,j,_,"static/chunks/86179-a2fb11e2e0c9eb2c.js",s,a,o,r,h,m,y,q,I,"static/css/689f4ba1bc212255.css","static/chunks/pages/index-0e1a32551efb02f5.js"],"/404":[e,s,c,t,"static/chunks/pages/404-801f418b703fdd8f.js"],"/_error":["static/chunks/pages/_error-95d51db2fb6a2e23.js"],"/about":[e,s,c,t,"static/css/7c164d03fceab98f.css","static/chunks/pages/about-c2303e16dc6d35ad.js"],"/app-shell":["static/css/dc549a3d8b9a0209.css","static/chunks/pages/app-shell-8546ef3cb2e1232f.js"],"/changelog/7-0-0":[e,u,j,s,c,t,r,v,B,"static/chunks/pages/changelog/7-0-0-c49c3bd957cb713c.js"],"/changelog/7-1-0":[e,s,c,t,"static/chunks/pages/changelog/7-1-0-d106ff05f83d05a5.js"],"/changelog/7-10-0":[e,s,c,t,a,F,A,"static/chunks/pages/changelog/7-10-0-83f04f50fdfd2deb.js"],"/changelog/7-2-0":[e,u,s,c,t,a,x,"static/chunks/pages/changelog/7-2-0-358c3e428e92b271.js"],"/changelog/7-3-0":[e,s,c,t,a,D,"static/chunks/pages/changelog/7-3-0-6f345552449ff5f3.js"],"/changelog/7-4-0":[e,i,u,n,E,s,c,t,a,k,w,"static/chunks/pages/changelog/7-4-0-ca2c39929763c2fb.js"],"/changelog/7-5-0":[e,i,n,d,p,"static/chunks/79545-cfb3c56a2743405f.js",s,c,t,o,h,k,"static/chunks/pages/changelog/7-5-0-d5bccd965eaad022.js"],"/changelog/7-6-0":[g,l,f,e,i,n,d,p,b,L,"static/chunks/97054-61e963695112bcf1.js",s,c,t,r,m,v,"static/chunks/pages/changelog/7-6-0-2c4ef81f61021371.js"],"/changelog/7-7-0":[e,i,n,M,s,c,t,k,"static/chunks/pages/changelog/7-7-0-df8712a8011fdc92.js"],"/changelog/7-8-0":[e,s,c,t,a,"static/chunks/pages/changelog/7-8-0-5bc0551013c2c363.js"],"/changelog/7-9-0":[e,i,"static/chunks/79518-0a02230cdc91ebbb.js",s,c,t,"static/chunks/pages/changelog/7-9-0-d8a0b7f5bb5cccb2.js"],"/changelog/all-releases":[e,s,c,t,N,S,"static/chunks/pages/changelog/all-releases-ba9509eb98e67a8d.js"],"/changelog/previous-versions":[e,s,c,t,N,S,"static/chunks/pages/changelog/previous-versions-e4214f76d6356c6e.js"],"/charts/area-chart":[e,i,n,s,c,t,k,"static/chunks/pages/charts/area-chart-1c04c9835779b49b.js"],"/charts/bar-chart":[e,i,s,c,t,"static/chunks/pages/charts/bar-chart-f75e94b3013d0724.js"],"/charts/donut-chart":[e,i,d,p,s,c,t,"static/chunks/pages/charts/donut-chart-3a99669b266e69c4.js"],"/charts/getting-started":[e,s,c,t,"static/chunks/pages/charts/getting-started-daff1f25fb834dec.js"],"/charts/line-chart":[e,i,E,s,c,t,"static/chunks/pages/charts/line-chart-4546c03079d6b93a.js"],"/charts/pie-chart":[e,i,d,p,s,c,t,"static/chunks/pages/charts/pie-chart-b84e9fe8318ffa1a.js"],"/charts/radar-chart":[e,i,d,L,s,c,t,"static/chunks/pages/charts/radar-chart-9db56811eb02c3be.js"],"/charts/scatter-chart":[e,i,M,s,c,t,"static/chunks/pages/charts/scatter-chart-703a2237df29a23f.js"],"/charts/sparkline":[e,i,n,s,c,t,"static/chunks/pages/charts/sparkline-f3cce18517b06acd.js"],"/colors-generator":["static/chunks/15451-2b0a1c30bcfaa971.js","static/css/b22ed36d8530d17d.css","static/chunks/pages/colors-generator-9c14df3a08c44a83.js"],"/combobox":[r,"static/css/f928343dfc69fe64.css","static/chunks/pages/combobox-163acb0387c52861.js"],"/contribute":[e,s,c,t,"static/chunks/pages/contribute-9b9c2f5b8cb37e19.js"],"/core/accordion":[e,s,c,t,I,"static/chunks/pages/core/accordion-eb61e41d27f5ed8f.js"],"/core/action-icon":[e,s,c,t,"static/chunks/pages/core/action-icon-7af1fc71ab3aca2d.js"],"/core/affix":[e,s,c,t,"static/chunks/pages/core/affix-405b7bf2a6053fd1.js"],"/core/alert":[e,s,c,t,"static/chunks/pages/core/alert-5ab29de1ad139eef.js"],"/core/anchor":[e,s,c,t,"static/chunks/pages/core/anchor-f2b97baf241e94a1.js"],"/core/app-shell":[e,s,c,t,"static/chunks/pages/core/app-shell-5fff14c1bbeaea14.js"],"/core/aspect-ratio":[e,s,c,t,"static/chunks/pages/core/aspect-ratio-3e97f496c72d1cf9.js"],"/core/autocomplete":[e,s,c,t,r,"static/chunks/pages/core/autocomplete-5882d7636cbd7be4.js"],"/core/avatar":[e,s,c,t,"static/chunks/pages/core/avatar-1914e30f9543d72e.js"],"/core/background-image":[e,s,c,t,"static/chunks/pages/core/background-image-40889aae8aad6917.js"],"/core/badge":[e,s,c,t,"static/chunks/pages/core/badge-c8dce5894e7be942.js"],"/core/blockquote":[e,s,c,t,"static/chunks/pages/core/blockquote-3c34d3f0d9e47694.js"],"/core/box":[e,s,c,t,"static/chunks/pages/core/box-cc4612f4ab2ad236.js"],"/core/breadcrumbs":[e,s,c,t,"static/chunks/pages/core/breadcrumbs-91dab877212b7ea9.js"],"/core/burger":[e,s,c,t,"static/chunks/pages/core/burger-82b86317559a8f47.js"],"/core/button":[e,s,c,t,"static/chunks/pages/core/button-babc4b84effef648.js"],"/core/card":[e,s,c,t,"static/chunks/pages/core/card-af85cc3a2ad5ded3.js"],"/core/center":[e,s,c,t,"static/chunks/pages/core/center-ec5cd73a9634b056.js"],"/core/checkbox":[e,s,c,t,"static/chunks/pages/core/checkbox-e304f0f26e5f7381.js"],"/core/chip":[e,s,c,t,"static/chunks/pages/core/chip-dec5402186c2db1a.js"],"/core/close-button":[e,s,c,t,"static/chunks/pages/core/close-button-536ed95286ebee9f.js"],"/core/code":[e,s,c,t,"static/chunks/pages/core/code-f96ff96b5de1482d.js"],"/core/collapse":[e,s,c,t,"static/chunks/pages/core/collapse-96cca72995599ba7.js"],"/core/color-input":[e,s,c,t,"static/chunks/pages/core/color-input-49ebbb92b12a49b3.js"],"/core/color-picker":[e,s,c,t,"static/chunks/pages/core/color-picker-a3e4316343c39179.js"],"/core/color-swatch":[e,s,c,t,"static/chunks/pages/core/color-swatch-b3c80ac6ff7bca08.js"],"/core/combobox":[e,s,c,t,r,"static/chunks/pages/core/combobox-b3784e955e43b08b.js"],"/core/container":[e,s,c,t,"static/chunks/pages/core/container-3180514e655550a4.js"],"/core/copy-button":[e,s,c,t,"static/chunks/pages/core/copy-button-00da05690c890626.js"],"/core/dialog":[e,s,c,t,"static/chunks/pages/core/dialog-d4f8bec622c187a6.js"],"/core/divider":[e,s,c,t,"static/chunks/pages/core/divider-d8fece98b3d374c2.js"],"/core/drawer":[e,s,c,t,a,D,"static/chunks/pages/core/drawer-6b458e52af38b49d.js"],"/core/fieldset":[e,s,c,t,"static/chunks/pages/core/fieldset-111991762032a6df.js"],"/core/file-button":[e,s,c,t,"static/chunks/pages/core/file-button-98eb58cbb9f30aba.js"],"/core/file-input":[e,s,c,t,"static/chunks/pages/core/file-input-8652dd0a3f473372.js"],"/core/flex":[e,s,c,t,"static/chunks/pages/core/flex-c3eac5a2ec60cbe4.js"],"/core/floating-indicator":[e,s,c,t,"static/chunks/pages/core/floating-indicator-825b70dc89e45d54.js"],"/core/focus-trap":[e,s,c,t,"static/chunks/pages/core/focus-trap-9cd02eed98ba3510.js"],"/core/grid":[e,s,c,t,"static/chunks/pages/core/grid-d0e7386a077fe7f2.js"],"/core/group":[e,s,c,t,"static/chunks/pages/core/group-6bc9884caa2fb84e.js"],"/core/highlight":[e,s,c,t,"static/chunks/pages/core/highlight-023a355f22761bc9.js"],"/core/hover-card":[e,s,c,t,"static/chunks/pages/core/hover-card-6c9c79ddbb690a59.js"],"/core/image":[e,s,c,t,"static/chunks/pages/core/image-5712fe9ab35fe431.js"],"/core/indicator":[e,s,c,t,"static/chunks/pages/core/indicator-0aff38197b650df9.js"],"/core/input":[e,"static/chunks/67915-5d3cf12ccca34636.js",s,c,t,"static/chunks/pages/core/input-1e66aaa49bc28335.js"],"/core/json-input":[e,s,c,t,"static/chunks/pages/core/json-input-b2642823ac063bd4.js"],"/core/kbd":[e,s,c,t,"static/chunks/pages/core/kbd-248ccd62118ff161.js"],"/core/list":[e,s,c,t,"static/chunks/pages/core/list-a9ad0ada9b4e0cf0.js"],"/core/loader":[e,s,c,t,a,x,"static/chunks/pages/core/loader-473905c6ba4e75b2.js"],"/core/loading-overlay":[e,s,c,t,a,x,"static/chunks/pages/core/loading-overlay-14cbfc2ac055bd4e.js"],"/core/mark":[e,s,c,t,"static/chunks/pages/core/mark-e32ff4aaeaa9a58d.js"],"/core/menu":[e,s,c,t,"static/chunks/pages/core/menu-fd9494714efec5c6.js"],"/core/modal":[e,s,c,t,a,T,"static/chunks/pages/core/modal-1badd2d61e1c505c.js"],"/core/multi-select":[e,s,c,t,r,q,"static/chunks/pages/core/multi-select-ffd6dcfe68e3662b.js"],"/core/native-select":[e,s,c,t,"static/chunks/pages/core/native-select-e1fd1ca76dcfd6b4.js"],"/core/nav-link":[e,s,c,t,"static/chunks/pages/core/nav-link-52d83234703a76a0.js"],"/core/notification":[e,s,c,t,"static/chunks/pages/core/notification-a5ae4f2f98c7c62d.js"],"/core/number-formatter":[e,u,s,c,t,"static/chunks/pages/core/number-formatter-b9bfce4030a60b95.js"],"/core/number-input":[e,u,s,c,t,"static/chunks/pages/core/number-input-0d5846d81bab9625.js"],"/core/overlay":[e,s,c,t,"static/chunks/pages/core/overlay-cb325c3a8c37d15d.js"],"/core/pagination":[e,s,c,t,y,"static/chunks/pages/core/pagination-364fa94e7ced3fb6.js"],"/core/paper":[e,s,c,t,"static/chunks/pages/core/paper-d6d7e481657db4fc.js"],"/core/password-input":[e,s,c,t,"static/chunks/pages/core/password-input-21843b181dfe342b.js"],"/core/pill":[e,s,c,t,"static/chunks/pages/core/pill-b6a3aeff8923d879.js"],"/core/pills-input":[e,s,c,t,r,"static/chunks/pages/core/pills-input-778af71a5c9966e8.js"],"/core/pin-input":[e,s,c,t,"static/chunks/pages/core/pin-input-a3d253c9cf323099.js"],"/core/popover":[e,s,c,t,o,r,h,"static/chunks/pages/core/popover-12de268a8c21fb6f.js"],"/core/portal":[e,s,c,t,"static/chunks/pages/core/portal-1363dd519609aebe.js"],"/core/progress":[e,s,c,t,"static/chunks/pages/core/progress-132482258dd96f80.js"],"/core/radio":[e,s,c,t,F,"static/chunks/pages/core/radio-e445ffc09012534f.js"],"/core/rating":[e,s,c,t,"static/chunks/pages/core/rating-d43b799647fd861f.js"],"/core/ring-progress":[e,s,c,t,"static/chunks/pages/core/ring-progress-1bad35967494b165.js"],"/core/scroll-area":[e,s,c,t,"static/chunks/pages/core/scroll-area-2df61ddda7d87d54.js"],"/core/segmented-control":[e,s,c,t,"static/chunks/pages/core/segmented-control-5a142e2e0d48295e.js"],"/core/select":[e,s,c,t,r,"static/chunks/pages/core/select-26704bace73aff99.js"],"/core/simple-grid":[e,s,c,t,"static/chunks/pages/core/simple-grid-e03e9b70a2887447.js"],"/core/skeleton":[e,s,c,t,"static/chunks/pages/core/skeleton-a936c34b4365ad9b.js"],"/core/slider":[e,s,c,t,"static/chunks/pages/core/slider-511dfb0d81d1ac6e.js"],"/core/space":[e,s,c,t,"static/chunks/pages/core/space-50ef51bc36fd1af0.js"],"/core/spoiler":[e,s,c,t,"static/chunks/pages/core/spoiler-2b20ed4c1a4f138d.js"],"/core/stack":[e,s,c,t,"static/chunks/pages/core/stack-e39b9605b73e6334.js"],"/core/stepper":[e,s,c,t,"static/chunks/pages/core/stepper-9aff875814b266ae.js"],"/core/switch":[e,s,c,t,"static/chunks/pages/core/switch-b8fae4d60f3a2ce8.js"],"/core/table":[e,s,c,t,"static/chunks/pages/core/table-7e6090ae919dc8c0.js"],"/core/tabs":[e,s,c,t,"static/chunks/pages/core/tabs-b4d76e20a8bef4b5.js"],"/core/tags-input":[e,s,c,t,r,v,"static/chunks/pages/core/tags-input-bfbbdb5ccdcea854.js"],"/core/text":[e,s,c,t,"static/chunks/pages/core/text-fc66aac59c9d43c6.js"],"/core/text-input":[e,s,c,t,"static/chunks/pages/core/text-input-72edb458de5e76ee.js"],"/core/textarea":[e,s,c,t,"static/chunks/pages/core/textarea-70a12b152a6833f3.js"],"/core/theme-icon":[e,s,c,t,"static/chunks/pages/core/theme-icon-ac131878b9c91469.js"],"/core/timeline":[e,s,c,t,"static/chunks/pages/core/timeline-70bb28044c8a2ffa.js"],"/core/title":[e,s,c,t,"static/chunks/pages/core/title-594d04fc591aa2ae.js"],"/core/tooltip":[e,s,c,t,"static/chunks/pages/core/tooltip-3ffd31af74b3f890.js"],"/core/transition":[e,s,c,t,"static/chunks/pages/core/transition-5674725e583a7451.js"],"/core/tree":[e,s,c,t,A,"static/chunks/pages/core/tree-9410073c23dde8cd.js"],"/core/typography-styles-provider":[e,s,c,t,"static/chunks/pages/core/typography-styles-provider-991785235d47bac4.js"],"/core/unstyled-button":[e,s,c,t,"static/chunks/pages/core/unstyled-button-74f2c84f98b28047.js"],"/core/visually-hidden":[e,s,c,t,"static/chunks/pages/core/visually-hidden-ffe148fc33cb6140.js"],"/dates/calendar":[e,s,c,t,o,"static/chunks/pages/dates/calendar-fd72aac43958daeb.js"],"/dates/date-input":[e,s,c,t,o,"static/chunks/pages/dates/date-input-00f63184b72400bb.js"],"/dates/date-picker":[e,s,c,t,o,z,"static/chunks/pages/dates/date-picker-563b0de370ecd59f.js"],"/dates/date-picker-input":[e,s,c,t,o,h,"static/chunks/pages/dates/date-picker-input-4f07b3067a329bd2.js"],"/dates/date-time-picker":[e,s,c,t,o,"static/chunks/pages/dates/date-time-picker-10162f7367b65c7d.js"],"/dates/dates-provider":[e,s,c,t,o,h,"static/chunks/pages/dates/dates-provider-02c509ee207f73aa.js"],"/dates/getting-started":[e,s,c,t,o,h,"static/chunks/pages/dates/getting-started-f4d36aa9e2676b07.js"],"/dates/month-picker":[e,s,c,t,o,z,"static/chunks/pages/dates/month-picker-28e8ee5efcae0357.js"],"/dates/month-picker-input":[e,s,c,t,o,"static/chunks/pages/dates/month-picker-input-5fb0fcbf3a47aee6.js"],"/dates/time-input":[e,s,c,t,"static/chunks/pages/dates/time-input-40a913a5b2e0b4b8.js"],"/dates/year-picker":[e,s,c,t,o,z,"static/chunks/pages/dates/year-picker-a8ae1518f35b28f9.js"],"/dates/year-picker-input":[e,s,c,t,o,"static/chunks/pages/dates/year-picker-input-39a900cb82e218d3.js"],"/form/actions":[e,s,c,t,"static/chunks/pages/form/actions-aa38e76fc147991e.js"],"/form/create-form-context":[e,s,c,t,"static/chunks/pages/form/create-form-context-7140909fbc3f9831.js"],"/form/errors":[e,s,c,t,"static/chunks/pages/form/errors-746f76565d294cec.js"],"/form/get-input-props":[e,u,s,c,t,a,w,"static/chunks/pages/form/get-input-props-fd8fa77f29a47828.js"],"/form/nested":[e,s,c,t,a,"static/chunks/pages/form/nested-5b8b726487aedfcb.js"],"/form/recipes":["static/chunks/e1533f8b-7153877f366db892.js",e,"static/chunks/8511-b05a219dca3bece8.js",s,c,t,a,"static/chunks/pages/form/recipes-46caf224b41d2898.js"],"/form/schema-validation":[e,s,c,t,"static/chunks/pages/form/schema-validation-3b344e31ca7b87c4.js"],"/form/status":[e,s,c,t,a,"static/chunks/pages/form/status-86011d150796eaa2.js"],"/form/uncontrolled":[e,s,c,t,a,"static/chunks/pages/form/uncontrolled-933dd7beaf07aa28.js"],"/form/use-field":[e,s,c,t,"static/chunks/pages/form/use-field-0ae2fbc51e35b345.js"],"/form/use-form":[e,s,c,t,a,"static/chunks/pages/form/use-form-69a249d2629e54b6.js"],"/form/validation":[e,u,s,c,t,a,"static/chunks/pages/form/validation-47ac62158af40544.js"],"/form/validators":[e,u,s,c,t,a,"static/chunks/pages/form/validators-8cd1ea749b5e5322.js"],"/form/values":[e,u,s,c,t,a,w,"static/chunks/pages/form/values-1503f0ed105d6423.js"],"/getting-started":[e,s,c,t,"static/css/ce241340c0eeed15.css","static/chunks/pages/getting-started-91f4668bb6c31a02.js"],"/guides/6x-to-7x":[e,s,c,t,"static/chunks/pages/guides/6x-to-7x-d00e21fdad68cae9.js"],"/guides/functions-reference":[e,s,c,t,"static/chunks/pages/guides/functions-reference-a01ff09834e7a430.js"],"/guides/gatsby":[e,s,c,t,"static/chunks/pages/guides/gatsby-bcf5bdd3f6fcecb3.js"],"/guides/icons":[e,s,c,t,"static/chunks/pages/guides/icons-11f4e715f4433df8.js"],"/guides/javascript":[e,s,c,t,"static/chunks/pages/guides/javascript-439389dc78da3ace.js"],"/guides/jest":[e,s,c,t,"static/chunks/pages/guides/jest-18e1e6e6b5fbb25d.js"],"/guides/next":[e,s,c,t,"static/chunks/pages/guides/next-42adb0503dcd5c6a.js"],"/guides/polymorphic":[e,s,c,t,"static/chunks/pages/guides/polymorphic-09adc4fd0e06180b.js"],"/guides/redwood":[e,s,c,t,"static/chunks/pages/guides/redwood-e67f05edc9e4bcc4.js"],"/guides/remix":[e,s,c,t,"static/chunks/pages/guides/remix-0b60b2d48c0ced76.js"],"/guides/storybook":[e,s,c,t,"static/chunks/pages/guides/storybook-c9ed984535571945.js"],"/guides/typescript":[e,s,c,t,"static/chunks/pages/guides/typescript-81ef866e51f9fcb6.js"],"/guides/vite":[e,s,c,t,"static/chunks/pages/guides/vite-5f3ff15cc405bf27.js"],"/guides/vitest":[e,s,c,t,"static/chunks/pages/guides/vitest-e99ff163fad05f17.js"],"/hooks/use-click-outside":[e,s,c,t,"static/chunks/pages/hooks/use-click-outside-5c6dbe83f4b7fc11.js"],"/hooks/use-clipboard":[e,s,c,t,"static/chunks/pages/hooks/use-clipboard-4aeabb10d4e8e146.js"],"/hooks/use-color-scheme":[e,s,c,t,"static/chunks/pages/hooks/use-color-scheme-c683018a1213242e.js"],"/hooks/use-counter":[e,s,c,t,"static/chunks/pages/hooks/use-counter-4b9fc8dd8f135f88.js"],"/hooks/use-debounced-callback":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-callback-4ac3871f0a5653a5.js"],"/hooks/use-debounced-state":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-state-38887c94e3ddeb11.js"],"/hooks/use-debounced-value":[e,s,c,t,"static/chunks/pages/hooks/use-debounced-value-46578fb2028d657c.js"],"/hooks/use-did-update":[e,s,c,t,"static/chunks/pages/hooks/use-did-update-94312ecc04744c93.js"],"/hooks/use-disclosure":[e,s,c,t,"static/chunks/pages/hooks/use-disclosure-b9404e4de1440386.js"],"/hooks/use-document-title":[e,s,c,t,"static/chunks/pages/hooks/use-document-title-4c8bf8dcb3b8aeac.js"],"/hooks/use-document-visibility":[e,s,c,t,"static/chunks/pages/hooks/use-document-visibility-3c75dbb7778367d3.js"],"/hooks/use-element-size":[e,s,c,t,"static/chunks/pages/hooks/use-element-size-13d9a4d76a44fbd3.js"],"/hooks/use-event-listener":[e,s,c,t,"static/chunks/pages/hooks/use-event-listener-19a810ee7a311677.js"],"/hooks/use-eye-dropper":[e,s,c,t,"static/chunks/pages/hooks/use-eye-dropper-7ad715983689cae7.js"],"/hooks/use-favicon":[e,s,c,t,"static/chunks/pages/hooks/use-favicon-d0e57ada4f0afaf2.js"],"/hooks/use-fetch":[e,s,c,t,"static/chunks/pages/hooks/use-fetch-9e1f6efb21469af4.js"],"/hooks/use-focus-return":[e,s,c,t,a,T,"static/chunks/pages/hooks/use-focus-return-15462b45a43c6c9c.js"],"/hooks/use-focus-trap":[e,s,c,t,"static/chunks/pages/hooks/use-focus-trap-eeef8e033d4c04cd.js"],"/hooks/use-focus-within":[e,s,c,t,"static/chunks/pages/hooks/use-focus-within-3979b0940d05c9d1.js"],"/hooks/use-force-update":[e,s,c,t,"static/chunks/pages/hooks/use-force-update-ef3c48e3ede39310.js"],"/hooks/use-fullscreen":[e,s,c,t,"static/chunks/pages/hooks/use-fullscreen-19e1e3c668ab278d.js"],"/hooks/use-hash":[e,s,c,t,"static/chunks/pages/hooks/use-hash-21e52ed7fc0ffcaa.js"],"/hooks/use-headroom":[e,s,c,t,"static/chunks/pages/hooks/use-headroom-e672cc7034c43a7a.js"],"/hooks/use-hotkeys":[e,s,c,t,"static/chunks/pages/hooks/use-hotkeys-98142066e0baa92e.js"],"/hooks/use-hover":[e,s,c,t,"static/chunks/pages/hooks/use-hover-b2d985cf79aa2754.js"],"/hooks/use-id":[e,s,c,t,"static/chunks/pages/hooks/use-id-d078042d1940aa5f.js"],"/hooks/use-idle":[e,s,c,t,"static/chunks/pages/hooks/use-idle-f8d86322e4edb12b.js"],"/hooks/use-in-viewport":[e,s,c,t,"static/chunks/pages/hooks/use-in-viewport-063ded9e04aeeb0a.js"],"/hooks/use-input-state":[e,s,c,t,"static/chunks/pages/hooks/use-input-state-2e9c004ac9c7bdd2.js"],"/hooks/use-intersection":[e,s,c,t,"static/chunks/pages/hooks/use-intersection-3a0cb1cf5f673d04.js"],"/hooks/use-interval":[e,s,c,t,"static/chunks/pages/hooks/use-interval-bde4e70a017b0b92.js"],"/hooks/use-is-first-render":[e,s,c,t,"static/chunks/pages/hooks/use-is-first-render-d9886a0ee2aead07.js"],"/hooks/use-isomorphic-effect":[e,s,c,t,"static/chunks/pages/hooks/use-isomorphic-effect-b40df0620cdd1f36.js"],"/hooks/use-list-state":[e,s,c,t,"static/chunks/pages/hooks/use-list-state-c3ddb1bb583f9a84.js"],"/hooks/use-local-storage":[e,s,c,t,"static/chunks/pages/hooks/use-local-storage-7d78df44acdfb133.js"],"/hooks/use-logger":[e,s,c,t,"static/chunks/pages/hooks/use-logger-1212db923be64687.js"],"/hooks/use-map":[e,s,c,t,"static/chunks/pages/hooks/use-map-f321ea036f0551d5.js"],"/hooks/use-media-query":[e,s,c,t,"static/chunks/pages/hooks/use-media-query-3e707ac78705a890.js"],"/hooks/use-merged-ref":[e,s,c,t,"static/chunks/pages/hooks/use-merged-ref-e27af8970a7de905.js"],"/hooks/use-mounted":[e,s,c,t,"static/chunks/pages/hooks/use-mounted-cd564ce782436e25.js"],"/hooks/use-mouse":[e,s,c,t,"static/chunks/pages/hooks/use-mouse-206ef53a6dfb0118.js"],"/hooks/use-move":[e,s,c,t,"static/chunks/pages/hooks/use-move-197fd3ba66cf5a64.js"],"/hooks/use-mutation-observer":[e,s,c,t,"static/chunks/pages/hooks/use-mutation-observer-9ef3a64eb008ede8.js"],"/hooks/use-network":[e,s,c,t,"static/chunks/pages/hooks/use-network-dbdd07bcbb8bd888.js"],"/hooks/use-orientation":[e,s,c,t,"static/chunks/pages/hooks/use-orientation-96bd965065016026.js"],"/hooks/use-os":[e,s,c,t,"static/chunks/pages/hooks/use-os-83e8463d0863dd99.js"],"/hooks/use-page-leave":[e,s,c,t,"static/chunks/pages/hooks/use-page-leave-903940657c24a842.js"],"/hooks/use-pagination":[e,s,c,t,y,"static/chunks/pages/hooks/use-pagination-2a2954905c114f2b.js"],"/hooks/use-previous":[e,s,c,t,"static/chunks/pages/hooks/use-previous-5aaf31cdff99911a.js"],"/hooks/use-queue":[e,s,c,t,"static/chunks/pages/hooks/use-queue-2f6910e7d053cc5c.js"],"/hooks/use-reduced-motion":[e,s,c,t,"static/chunks/pages/hooks/use-reduced-motion-ddb6803a15fe5a1f.js"],"/hooks/use-resize-observer":[e,s,c,t,"static/chunks/pages/hooks/use-resize-observer-6e271a63ca2a113e.js"],"/hooks/use-scroll-into-view":[e,s,c,t,"static/chunks/pages/hooks/use-scroll-into-view-be578346c8e7e9a5.js"],"/hooks/use-set":[e,s,c,t,"static/chunks/pages/hooks/use-set-1e98e97dc0bfdd5f.js"],"/hooks/use-set-state":[e,s,c,t,"static/chunks/pages/hooks/use-set-state-844b29242247d46e.js"],"/hooks/use-shallow-effect":[e,s,c,t,"static/chunks/pages/hooks/use-shallow-effect-b7c8581b17f6e7bc.js"],"/hooks/use-state-history":[e,s,c,t,"static/chunks/pages/hooks/use-state-history-e1a55e6c4b3140d2.js"],"/hooks/use-text-selection":[e,s,c,t,"static/chunks/pages/hooks/use-text-selection-2890b601fc9af1c3.js"],"/hooks/use-throttled-callback":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-callback-90e550759ee81736.js"],"/hooks/use-throttled-state":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-state-d7e0dd2415defd7d.js"],"/hooks/use-throttled-value":[e,s,c,t,"static/chunks/pages/hooks/use-throttled-value-e280da5fdae32fad.js"],"/hooks/use-timeout":[e,s,c,t,"static/chunks/pages/hooks/use-timeout-d179d6ed11962a03.js"],"/hooks/use-toggle":[e,s,c,t,"static/chunks/pages/hooks/use-toggle-af63a725fa876b7e.js"],"/hooks/use-uncontrolled":[e,s,c,t,"static/chunks/pages/hooks/use-uncontrolled-215db08718cfdc4d.js"],"/hooks/use-validated-state":[e,s,c,t,"static/chunks/pages/hooks/use-validated-state-229172c19f6b706b.js"],"/hooks/use-viewport-size":[e,s,c,t,"static/chunks/pages/hooks/use-viewport-size-138c068215ac87c8.js"],"/hooks/use-window-event":[e,s,c,t,"static/chunks/pages/hooks/use-window-event-c681e1e1ddea839e.js"],"/hooks/use-window-scroll":[e,s,c,t,"static/chunks/pages/hooks/use-window-scroll-a554de6ba44c2595.js"],"/others/carousel":["static/chunks/pages/others/carousel-eb74f9b7c9ae1531.js"],"/others/code-highlight":["static/chunks/pages/others/code-highlight-6d174f46988db106.js"],"/others/dropzone":["static/chunks/pages/others/dropzone-631ae8ff0c176f3e.js"],"/others/modals":["static/chunks/pages/others/modals-cc2d05791f79a270.js"],"/others/notifications":["static/chunks/pages/others/notifications-7bfa61e17429abde.js"],"/others/nprogress":["static/chunks/pages/others/nprogress-f3da9995b1d8cf29.js"],"/others/spotlight":["static/chunks/pages/others/spotlight-4f6db25aff3c961c.js"],"/others/tiptap":["static/chunks/pages/others/tiptap-d577a4e2f1df177d.js"],"/overview":[e,s,c,t,U,"static/chunks/pages/overview-4dc462e52890b436.js"],"/styles/color-functions":[e,s,c,t,"static/chunks/pages/styles/color-functions-8ca4a8159b3ef5e5.js"],"/styles/css-files-list":[e,s,c,t,"static/chunks/pages/styles/css-files-list-19bbb65e07d00084.js"],"/styles/css-modules":[e,s,c,t,"static/chunks/pages/styles/css-modules-c6539d6827e76caa.js"],"/styles/css-variables":[e,s,c,t,"static/css/b49f69e19f867ec9.css","static/chunks/pages/styles/css-variables-ababb513e3203375.js"],"/styles/css-variables-list":[e,s,c,t,"static/chunks/pages/styles/css-variables-list-bac383ec5c785136.js"],"/styles/data-attributes":[e,s,c,t,"static/chunks/pages/styles/data-attributes-da495ee9ab0c0a3c.js"],"/styles/emotion":[e,"static/chunks/94982-aa5e4bb8bef90323.js",s,c,t,"static/chunks/pages/styles/emotion-56369c5a64a0dc8f.js"],"/styles/global-styles":[e,s,c,t,"static/chunks/pages/styles/global-styles-3be5f2e9382bfd6e.js"],"/styles/mantine-styles":[e,s,c,t,"static/chunks/pages/styles/mantine-styles-06ee7a43d54014d1.js"],"/styles/postcss-preset":[e,s,c,t,"static/chunks/pages/styles/postcss-preset-d9a708c1d6236322.js"],"/styles/rem":[e,s,c,t,"static/chunks/pages/styles/rem-0fbcd61032045fbb.js"],"/styles/responsive":[e,s,c,t,"static/chunks/pages/styles/responsive-3aa212ba90aa2e47.js"],"/styles/rtl":[e,s,c,t,"static/chunks/pages/styles/rtl-2a91ab9450218ce9.js"],"/styles/sass":[e,s,c,t,"static/chunks/pages/styles/sass-6b519e1467baf007.js"],"/styles/style":[e,s,c,t,"static/chunks/pages/styles/style-728ce369dd1d6547.js"],"/styles/style-props":[e,s,c,t,"static/chunks/pages/styles/style-props-0275fbcd6d5af5cc.js"],"/styles/styles-api":[e,s,c,t,"static/chunks/pages/styles/styles-api-5d70c5369de1b099.js"],"/styles/styles-overview":[e,s,c,t,"static/chunks/pages/styles/styles-overview-41246265d929784d.js"],"/styles/styles-performance":[e,s,c,t,"static/chunks/pages/styles/styles-performance-fa284ede9d4ae939.js"],"/styles/unstyled":[e,s,c,t,"static/chunks/pages/styles/unstyled-0b91fed15b251603.js"],"/styles/vanilla-extract":[e,s,c,t,"static/chunks/pages/styles/vanilla-extract-b5f5307c219d8a52.js"],"/styles/variants-sizes":[e,s,c,t,"static/chunks/pages/styles/variants-sizes-d61e945fc0ce4cf9.js"],"/submit-template":[e,s,c,t,"static/chunks/pages/submit-template-64cc2ec4e71fe555.js"],"/templates-usage":[e,s,c,t,"static/chunks/pages/templates-usage-f3f22fc613280a19.js"],"/theming/color-schemes":[e,s,c,t,"static/chunks/pages/theming/color-schemes-494c32e4e8d26396.js"],"/theming/colors":[e,s,c,t,U,"static/chunks/pages/theming/colors-490ce8c01567f51e.js"],"/theming/default-props":[e,s,c,t,"static/chunks/pages/theming/default-props-7afdbb6569a906db.js"],"/theming/default-theme":[e,s,c,t,"static/chunks/pages/theming/default-theme-790479def9a93f59.js"],"/theming/mantine-provider":[e,s,c,t,"static/chunks/pages/theming/mantine-provider-5a28ccf9d311354f.js"],"/theming/theme-object":[e,s,c,t,"static/chunks/pages/theming/theme-object-1b5776a30d844d69.js"],"/theming/typography":[e,s,c,t,"static/chunks/pages/theming/typography-6ab03af9599ef40c.js"],"/x/carousel":[e,j,s,c,t,B,"static/chunks/pages/x/carousel-1c0485257d8b1d33.js"],"/x/code-highlight":[e,s,c,t,"static/chunks/pages/x/code-highlight-839715d3a0d0edf7.js"],"/x/dropzone":[e,"static/chunks/40798-034a69d6d6d17a49.js",s,c,t,"static/chunks/pages/x/dropzone-88e985febe206416.js"],"/x/modals":[e,s,c,t,"static/chunks/pages/x/modals-d3d227b42eab2342.js"],"/x/notifications":[e,s,c,t,"static/chunks/pages/x/notifications-de7e38afcc53977a.js"],"/x/nprogress":[e,s,c,t,"static/chunks/pages/x/nprogress-2782e2125a8f26f6.js"],"/x/spotlight":[e,s,c,t,"static/chunks/pages/x/spotlight-88b10a69d404a4df.js"],"/x/tiptap":[g,l,f,e,b,_,"static/chunks/62618-64fbbea3a71ef35e.js",s,c,t,m,"static/chunks/pages/x/tiptap-bdabc5772ea15593.js"],sortedPages:["/","/404","/_app","/_error","/about","/app-shell","/changelog/7-0-0","/changelog/7-1-0","/changelog/7-10-0","/changelog/7-2-0","/changelog/7-3-0","/changelog/7-4-0","/changelog/7-5-0","/changelog/7-6-0","/changelog/7-7-0","/changelog/7-8-0","/changelog/7-9-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/radar-chart","/charts/scatter-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/floating-indicator","/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/tree","/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/uncontrolled","/form/use-field","/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-callback","/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-fetch","/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-is-first-render","/hooks/use-isomorphic-effect","/hooks/use-list-state","/hooks/use-local-storage","/hooks/use-logger","/hooks/use-map","/hooks/use-media-query","/hooks/use-merged-ref","/hooks/use-mounted","/hooks/use-mouse","/hooks/use-move","/hooks/use-mutation-observer","/hooks/use-network","/hooks/use-orientation","/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","/hooks/use-set-state","/hooks/use-shallow-effect","/hooks/use-state-history","/hooks/use-text-selection","/hooks/use-throttled-callback","/hooks/use-throttled-state","/hooks/use-throttled-value","/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/emotion","/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/66748-725affde329bb373.js","static/chunks/61177-755f551e12967c5d.js","static/css/2bc299183ebfb8fb.css","static/chunks/11340-561ed520b05a5dc1.js","static/chunks/405-316e1006ce89fb62.js","static/chunks/11204-f8ee63a4acb9a641.js","static/chunks/16717-f93e339811ef9b9f.js","static/chunks/61324-6ab94e773572bf39.js","static/chunks/9462-2678ea25af5a102d.js","static/chunks/18738-fedb26ea189ec2bb.js","static/chunks/50603-51b67801a55925d1.js","static/chunks/59966-f953d8f419121bb2.js","static/chunks/47889-4781b1b0c85c427a.js","static/chunks/43454-26a88ccf32030d95.js","static/chunks/b155a556-d8b1a5e0e54cd6fa.js","static/chunks/5e51008f-0b4a23617bf99572.js","static/chunks/b779bb5e-b0322769a36b57fc.js","static/chunks/29985-f72e04a4c2f61df6.js","static/chunks/26601-33e8287835f81f06.js","static/chunks/76124-e3f82969e5055c6e.js","static/chunks/46159-84998a3262b57463.js","static/chunks/77413-5c39e4f930c686f0.js","static/chunks/36503-59cadd6a6299eee5.js","static/chunks/74736-830f3cac4efb5d18.js","static/chunks/36386-a91444513063e519.js","static/chunks/94323-2a1ed3d2da651173.js","static/chunks/7854-86f188aed4966c27.js","static/chunks/91062-dc78c4703c579b6b.js","static/chunks/82605-01cfc1d75acdc33c.js","static/chunks/7763-7f9c50f4ec5d1d08.js","static/chunks/29466-8d6d4f019f50e357.js","static/chunks/57902-22bb39a1f61193c4.js","static/chunks/62662-b073cb0ceb20f14f.js","static/chunks/37355-d2676dfcb2a1e2bd.js","static/chunks/41277-440f9eefbecc26b8.js","static/chunks/3309-58055b548bcb84fb.js","static/css/d2e82f58d1b5e6b3.css","static/chunks/64485-99c662226c8c4dd1.js","static/css/74f4115ba6605d28.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/0MRRW8kpHckxqSyJvSOT5/_ssgManifest.js b/_next/static/s_zwUFMxIcbex0313I_bs/_ssgManifest.js similarity index 100% rename from _next/static/0MRRW8kpHckxqSyJvSOT5/_ssgManifest.js rename to _next/static/s_zwUFMxIcbex0313I_bs/_ssgManifest.js diff --git a/about/index.html b/about/index.html index 836f8899b9e..4d4c92e7103 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.

@@ -73,4 +73,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 69206e93074..d6687d69ff3 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 2d9fe4f68ea..1304a22c246 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:

@@ -957,4 +957,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 14a1dff2329..851775e249b 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-10-0/index.html b/changelog/7-10-0/index.html index e52173aa487..90984d9d860 100644 --- a/changelog/7-10-0/index.html +++ b/changelog/7-10-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.10.0

    Release date

    May 23rd, 2024

    Source code

    Release on GitHub

    Tree 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.10.0

    Release date

    May 23rd, 2024

    Source code

    Release on GitHub

    Tree component

    New Tree component:

    • src
    • node_modules
    • package.json
    • tsconfig.json
    import { IconFolder, IconFolderOpen } from '@tabler/icons-react';
 import { Group, RenderTreeNodePayload, Tree } from '@mantine/core';
@@ -338,4 +338,4 @@
 
 function Demo() {
   return <Box bd="1px solid red.5" />;
-}

    Previous

    Rich text editor

    Next

    Version v7.9.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.9.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 4fa52ec5060..66837fe66ff 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 2eb29928d14..1b408da7fbe 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 {
@@ -277,4 +277,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 ba219f9754d..072759f85f1 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, @@ -645,4 +645,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 1b4b9c2955e..56bebd79bad 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
    Version v7.6.0
    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

    Version v7.6.0

    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/7-6-0/index.html b/changelog/7-6-0/index.html index 781b708620c..0617b8a78a2 100644 --- a/changelog/7-6-0/index.html +++ b/changelog/7-6-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.6.0

    Release date

    February 27th, 2024

    Source code

    Release on GitHub

    Container queries support

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

    Version v7.6.0

    Release date

    February 27th, 2024

    Source code

    Release on GitHub

    Container queries support

    You can now use container queries with Mantine components. rem and em functions from postcss-preset-mantine are available in container queries staring from postcss-preset-mantine@1.13.0.

    @@ -411,4 +411,4 @@
  • Select, MultiSelect and TagsInput now support onClear prop, the function is called when clear button is clicked
  • MultiSelect and TagsInput now support onRemove prop, the function is called with removed item value when one of the items is deselected
  • Redwood template has been updated to the latest redwood version with Vite
    • -

    Previous

    Version v7.7.0

    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

    Version v7.7.0

    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 diff --git a/changelog/7-7-0/index.html b/changelog/7-7-0/index.html index 10eb83b897e..d3122473680 100644 --- a/changelog/7-7-0/index.html +++ b/changelog/7-7-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.7.0

    Release date

    March 26th, 2024

    Source code

    Release on GitHub

    Virtual colors

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

    Version v7.7.0

    Release date

    March 26th, 2024

    Source code

    Release on GitHub

    Virtual colors

    Virtual color is a special color which values should be different for light and dark color schemes. To define a virtual color, use virtualColor function which accepts an object with the following properties as a single argument:

    @@ -288,4 +288,4 @@
  • Transition component now supports 4 new transitions: fade-up, fade-down, fade-left, fade-right
  • Default Modal transition was changed to fade-down. This change resolves issues with SegmentedControl indicator positioning when used inside modals.
  • You can now reference headings font sizes and line heights in fz and lh style props with h1, h2, h3, h4, h5, h6 values
    • -

    Previous

    Version v7.8.0

    Next

    Version v7.6.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.8.0

    Next

    Version v7.6.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-8-0/index.html b/changelog/7-8-0/index.html index 099ad114384..390a0283517 100644 --- a/changelog/7-8-0/index.html +++ b/changelog/7-8-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.8.0

    Release date

    April 12th, 2024

    Source code

    Release on GitHub

    Auto convert px to rem in .css files

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

    Version v7.8.0

    Release date

    April 12th, 2024

    Source code

    Release on GitHub

    Auto convert px to rem in .css files

    Start from version 1.14.4 postcss-preset-mantine supports autoRem option that can be used to automatically convert all px values to rem units in .css files.

    @@ -446,4 +446,4 @@
    • NumberInput now supports withKeyboardEvents={false} to disable up/down arrow keys handling
    • Popover shift middleware now has default padding of 5px to offset dropdown near the edge of the viewport
      • -

    Previous

    Version v7.9.0

    Next

    Version v7.7.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.9.0

    Next

    Version v7.7.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-9-0/index.html b/changelog/7-9-0/index.html index 818509ebef1..9fa7aa7aeca 100644 --- a/changelog/7-9-0/index.html +++ b/changelog/7-9-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.9.0

    Release date

    May 2nd, 2024

    Source code

    Release on GitHub

    @mantine/emotion package

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

    Version v7.9.0

    Release date

    May 2nd, 2024

    Source code

    Release on GitHub

    @mantine/emotion package

    New @mantine/emotion package is now available to simplify migration from 6.x to 7.x. It includes createStyles function and additional functionality for sx and styles props for all components similar to what was available @@ -218,4 +218,4 @@

    • Advanced templates now include GitHub workflows to run tests on CI
    • AspectRatio component has been migrated to aspect-ratio CSS property
      • -

    Previous

    Version v7.10.0

    Next

    Version v7.8.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.10.0

    Next

    Version v7.8.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 ca13c41cde0..b96ccf33504 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.10.0
    ChangelogGitHub release

    May 23, 2024

    Version 7.10.0 does not have associated patch releases yet.

    7.9.0
    ChangelogGitHub release

    May 2, 2024

    7.9.X patches:

    7.8.0
    ChangelogGitHub release

    April 12, 2024

    7.8.X patches:

    7.7.0
    ChangelogGitHub release

    March 26, 2024

    7.7.X patches:

    7.6.0
    ChangelogGitHub release

    February 27, 2024

    7.6.X patches:

    7.5.0
    ChangelogGitHub release

    January 26, 2024

    7.5.X patches:

    7.4.0
    ChangelogGitHub release

    January 3, 2024

    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.10.0
    ChangelogGitHub release

    May 23, 2024

    7.10.X patches:

    7.9.0
    ChangelogGitHub release

    May 2, 2024

    7.9.X patches:

    7.8.0
    ChangelogGitHub release

    April 12, 2024

    7.8.X patches:

    7.7.0
    ChangelogGitHub release

    March 26, 2024

    7.7.X patches:

    7.6.0
    ChangelogGitHub release

    February 27, 2024

    7.6.X patches:

    7.5.0
    ChangelogGitHub release

    January 26, 2024

    7.5.X patches:

    7.4.0
    ChangelogGitHub release

    January 3, 2024

    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 2611e234025..d5659e6b725 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.10.0
    ChangelogGitHub release

    May 23, 2024

    Version 7.10.0 does not have associated patch releases yet.

    7.9.0
    ChangelogGitHub release

    May 2, 2024

    7.9.X patches:

    7.8.0
    ChangelogGitHub release

    April 12, 2024

    7.8.X patches:

    7.7.0
    ChangelogGitHub release

    March 26, 2024

    7.7.X patches:

    7.6.0
    ChangelogGitHub release

    February 27, 2024

    7.6.X patches:

    7.5.0
    ChangelogGitHub release

    January 26, 2024

    7.5.X patches:

    7.4.0
    ChangelogGitHub release

    January 3, 2024

    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.10.0
    ChangelogGitHub release

    May 23, 2024

    7.10.X patches:

    7.9.0
    ChangelogGitHub release

    May 2, 2024

    7.9.X patches:

    7.8.0
    ChangelogGitHub release

    April 12, 2024

    7.8.X patches:

    7.7.0
    ChangelogGitHub release

    March 26, 2024

    7.7.X patches:

    7.6.0
    ChangelogGitHub release

    February 27, 2024

    7.6.X patches:

    7.5.0
    ChangelogGitHub release

    January 26, 2024

    7.5.X patches:

    7.4.0
    ChangelogGitHub release

    January 3, 2024

    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 cd8b0a0da6a..1aac54521fb 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.

    @@ -704,4 +704,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 d7410bf9b1f..1d9a4ab6229 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.

    @@ -599,4 +599,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 e0f08eeb3d3..a13181f763e 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';
@@ -137,4 +137,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 fe689839945..b800fb4eeaa 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 83cc5e7f1dc..0f8fe485881 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';
 
@@ -554,4 +554,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 6599b1c1380..ec70fbcb37e 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';
@@ -123,4 +123,4 @@
       <PieChart data={data} strokeColor="var(--card-bg)" />
     </div>
   );
-}

    Previous

    DonutChart

    Next

    RadarChart

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    RadarChart

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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/radar-chart/index.html b/charts/radar-chart/index.html index 275c5cd094a..9f165bba4b7 100644 --- a/charts/radar-chart/index.html +++ b/charts/radar-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

    RadarChart

    Radar 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

    RadarChart

    Radar chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    RadarChart is based on recharts RadarChart component:

    import { RadarChart } from '@mantine/charts';
 import { data } from './data';
@@ -102,4 +102,4 @@
       ]}
     />
   );
-}

    Previous

    PieChart

    Next

    ScatterChart

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    ScatterChart

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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/scatter-chart/index.html b/charts/scatter-chart/index.html index ca19f8a0f1f..1f3f560105c 100644 --- a/charts/scatter-chart/index.html +++ b/charts/scatter-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

    ScatterChart

    Radar 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

    ScatterChart

    Radar chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    import { ScatterChart } from '@mantine/charts';
 import { data } from './data';
 
@@ -310,4 +310,4 @@
       ]}
     />
   );
-}

    Previous

    RadarChart

    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

    RadarChart

    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 4d91e6f0561..d9ea72697c8 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';
@@ -83,4 +83,4 @@
       />
     </Stack>
   );
-}

    Previous

    ScatterChart

    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

    ScatterChart

    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 09a1795098b..ade2298d545 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 @@
       {/* Your app here */}
     </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 ae3eca3c07a..0820858d2c5 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 fd9b41c8bf9..569aa8bfabb 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 91c38d04bc2..171597a4d7e 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 e1b4a510e34..339c9cf5ad7 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';
 
@@ -372,4 +372,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 6bd40cf95a7..f4ecc792a94 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 b0184b0d503..4259fe973e1 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

    Tree

    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

    Tree

    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 7e728e26300..aac008450a5 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() {
@@ -95,4 +95,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 dfba278e619..95d28482f70 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 634df69c7dd..6f01c41376a 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 a84d538ff9a..073c3d93569 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.

    @@ -465,4 +465,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 81e8676385d..09b16167911 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 daa0a6d8a53..b745685c8e5 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 ed7886ff177..25b3f2e49ee 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 b2a7e8bd4d3..cebe190d593 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 f459f5ac255..5d72413f1ff 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 8bbf81f1e4a..86a9bbcace4 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 7ccff438a4a..6537b70e64c 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 70984182de1..45cb34c88cb 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() {
@@ -411,4 +411,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 903144741a0..7a04672fa80 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 a9944c3cc35..f8b1a9aaeb0 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 9bc901f0eb6..397deece77a 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() {
@@ -448,4 +448,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 f70e2039253..78b9d9404f7 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 8ff130bc06d..0828ddcf464 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 98785f9955c..00130875a0e 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';
 
@@ -45,4 +45,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 c200cd92dc3..b607bc256a4 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 6fe4535d07d..544898ed662 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';
 
@@ -246,4 +246,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 8e44451e94d..335869fe4d0 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 e80995710fc..c8a642d0348 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() {
@@ -48,4 +48,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 78fd9d1b590..440eafe7d06 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 c4a091046a3..84339aff3a1 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 c30f345924c..80b1e816cae 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 1dbcc83101b..900f839400f 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 836cf16081d..af6dbf9e54a 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 57e6b80a0c9..13a0792bd26 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';
 
@@ -344,4 +344,4 @@
       onClose={() => {}}
     />
   );
-}

    Previous

    Dialog

    Next

    FloatingIndicator

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    FloatingIndicator

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 436e3f8716d..542ee156cb9 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, TextInput } 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 2e9f78a162e..73ef96d277f 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 a7d1efb9422..2ff8b3bfb38 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 775b9e3e3bb..5b9615565df 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/floating-indicator/index.html b/core/floating-indicator/index.html index cf504a33645..74e82a00322 100644 --- a/core/floating-indicator/index.html +++ b/core/floating-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

    FloatingIndicator

    Display a floating indicator over a group of elements

    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

    FloatingIndicator

    Display a floating indicator over a group of elements

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    FloatingIndicator is designed to highlight active element in a group. It can be used to create custom segmented controls, tabs and other similar components.

    FloatingIndicator renders an element over the target element. To calculate the position it is @@ -166,4 +166,4 @@ </div> </div> ); -}

    Previous

    Drawer

    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

    Drawer

    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/focus-trap/index.html b/core/focus-trap/index.html index 30a125b494d..f2cf78b1f62 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';
@@ -84,4 +84,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 37544b87628..1a1599f14fc 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 083edf30197..79926681f89 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 35f6a772964..fdb106f77e3 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 83287640483..b509fd536d1 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

    FloatingIndicator

    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

    FloatingIndicator

    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 b8bc5eae357..85c1f92d710 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 3dc303bdae3..7f36f7f0c64 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 a0b41604b63..6cb5fec5e4c 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 2fb30fb3057..3a224b212da 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 ad74e6ac4fa..1ea297ac446 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 f63a94fd01f..4efda6a829f 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 ef0a2434cdb..06215b0d7bc 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 7fbed3f9a19..80a58d5642a 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 fc80d1a690d..371c42ae6c4 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 4fa0114a1c8..a34c32a41c1 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 9bad4b44ccc..ae7e290b942 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';
 
@@ -449,4 +449,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 35a7a46c0c7..6ab150843cf 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.

    @@ -638,4 +638,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 17fec94e675..3eeeaf5c9b0 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 fd1afd5ce24..d131e3a2b12 100644 --- a/core/nav-link/index.html +++ b/core/nav-link/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    NavLink

    Navigation link

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

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

    NavLink

    Navigation link

    Import

    Polymorphic

    Polymorphic component

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    With icon
    With right section
    Disabled
    3
    With descriptionAdditional information
    Active subtle
    Active light
    Active filled
    import { Badge, NavLink } from '@mantine/core';
 import { IconHome2, IconGauge, IconChevronRight, IconActivity, IconCircleOff } from '@tabler/icons-react';
 
@@ -177,4 +177,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 bfa7cc91f0d..72c3d601ecd 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 82148a1f880..8076e73a45d 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 30d71695114..f390816e3f6 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 476a260a162..6bc6cf41454 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 54ed773680c..82934e35401 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-4un52frdq

    id: 1, name: mantine-iorrxmik8

    id: 2, name: mantine-zv9wd2rmk

    id: 3, name: mantine-gclmdwvoq

    id: 4, name: mantine-2252h7y2l

    import { useState } from 'react';
+
    id: 0, name: mantine-uv8ezvhvh
    id: 1, name: mantine-xfser9hv1
    id: 2, name: mantine-q04go4v4r
    id: 3, name: mantine-zdvvesaf4
    id: 4, name: mantine-jol4pv7yw
    import { useState } from 'react';
 import { randomId } from '@mantine/hooks';
 import { Pagination, Text } from '@mantine/core';
 
@@ -233,4 +233,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 cb93ba00a92..4c3865fe876 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 027b979f4ef..f16ce71c9da 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 b957b4e8ad9..752baed8bed 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 a8225cf0179..833167ce1ff 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.

    @@ -153,4 +153,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 b4488f5eeb8..da8369cfa6b 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 fde4d234018..9ff90f2c733 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() {
@@ -384,4 +384,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 f0000f63c51..16f82dfe7d4 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 1f8c4628698..dd951643764 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 ee97e0c5efb..48ed4dc39e3 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() {
@@ -291,4 +291,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 aefd7746b14..5db9826b980 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 ddd87f0c56e..8fda5899b9a 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 5745daae030..5abad02ef01 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 2e2e2f1bd9c..7099d9ff054 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() {
@@ -249,4 +249,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 e2d79e9818b..80d2c04e3f6 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.

    @@ -654,4 +654,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 3ebeb9b0787..f4f08e2e37b 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.

    @@ -95,4 +95,4 @@ If you need to support older browsers, use Grid (flexbox based) component instead.

    When type="container" is set, SimpleGrid uses container queries. Since February 2023, container queries are supported in all modern browsers. If you need to support older browsers, -do not use container queries option.

    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 +do not use container queries option.

    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 9d72ad06f8c..44a07db5830 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 65989361e49..5a45080326c 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 f6d0685d01f..834706221db 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 e9da8d2ea03..df67d4afc8c 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.

    @@ -43,4 +43,4 @@ showLabel="Show" /> ); -}

    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 6cfda0297f9..6314d6fd701 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';
@@ -23,4 +23,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 237f3d63de6..807518e8a2c 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';
 
@@ -410,4 +410,4 @@
       <Stepper.Step aria-label="Create an account" />
     </Stepper>
   );
-}

    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 +}

    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 1965ad34ff9..83b510651bf 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 992f048bfad..7ab7eecc56b 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' },
@@ -272,4 +272,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 016bf73fd07..ae7d3a14c58 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

    Tree

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    Tree

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 80865a59c4d..729cbb9489e 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.

    @@ -576,4 +576,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 09a23689d5d..d5d0f3db63d 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 b1a771c5b24..189a17c13d6 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 4a2b0dad3d4..c573f5b89cd 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 d5b1b220362..0ea5d1b5f94 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 d5eb7a6c45c..2bbd063db99 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';
 
@@ -128,4 +128,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 f17930da29c..7dd6daab76f 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 34b3e1b1ef3..51b733d184e 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 14fae4d14f9..10688a6cf25 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
    fade-up
    fade-down
    fade-left
    fade-right
    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/tree/index.html b/core/tree/index.html index 0e742178135..f39823a5ebf 100644 --- a/core/tree/index.html +++ b/core/tree/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    Tree

    Display a Tree structure

    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

    Tree

    Display a Tree structure

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Tree component is used to display hierarchical data. Tree component has minimal styling by default, you can customize styles with Styles API.

    • src
    • node_modules
    • package.json
    • tsconfig.json
    import { Tree } from '@mantine/core';
@@ -260,4 +260,4 @@
       renderNode={(payload) => <Leaf {...payload} />}
     />
   );
-}

    Previous

    Tabs

    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 +}

    Previous

    Tabs

    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/typography-styles-provider/index.html b/core/typography-styles-provider/index.html index 01c0989252e..0746c53c173 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';
@@ -105,4 +105,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 abc9f70483b..b734a4ff349 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 4d079afaf34..a0942d46384 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-react';
@@ -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 90315216b63..010887026e0 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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    1
    2
    import { Indicator } from '@mantine/core';
+
    MoTuWeThFrSaSu
    27
    28
    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
    30
    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 4a0b3bb3c16..cf72feded2a 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 f97a15dc6c2..80f9277bd1d 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 c6cb8610942..6b2e9d37ef9 100644 --- a/dates/date-picker/index.html +++ b/dates/date-picker/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePicker

    Inline date, multiple dates and dates range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    -
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    DatePicker
    Inline date, multiple dates and dates range picker
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/dates
    Usage
    
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -16,7 +16,7 @@
 
    Set allowDeselect to allow user to deselect current selected date by clicking on it.
 allowDeselect is disregarded when type prop is range or multiple. When date is
 deselected onChange is called with null.
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -25,7 +25,7 @@
 }
    
 
    Multiple dates
    
 
    Set type="multiple" to allow user to pick multiple dates:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -34,7 +34,7 @@
 }
    
 
    Dates range
    
 
    Set type="range" to allow user to pick dates range:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -45,7 +45,7 @@
 
    By default, it is not allowed to select single date as range – when user clicks the same date second time it is deselected.
 To change this behavior set allowSingleDateInRange prop. allowSingleDateInRange is ignored when
 type prop is not range.
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -71,7 +71,7 @@
 
    Set date, and onDateChange props to make currently displayed month, year and decade controlled.
 By doing so, you can customize date picking experience, for example, when user selects first date in range,
 you can add one month to the current date value:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -98,7 +98,7 @@
 }
    
 
    Default level
    
 
    Set defaultLevel prop to configure initial level that will be displayed:
    
-
    2020 – 2029
    import { Group } from '@mantine/core';
+
    2020 – 2029
    import { Group } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -111,7 +111,7 @@
 }
    
 
    Hide outside dates
    
 
    Set hideOutsideDates prop to remove all dates that do not belong to the current month:
    
-
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker hideOutsideDates />;
@@ -120,7 +120,7 @@
 
    Set firstDayOfWeek prop to configure first day of week. The prop accepts number from 0 to 6,
 where 0 is Sunday and 6 is Saturday. Default value is 1 – Monday. You can also configure this option
 for all components with DatesProvider.
    
-
    SuMoTuWeThFrSa
    SaSuMoTuWeThFr
    import { Group } from '@mantine/core';
+
    SuMoTuWeThFrSa
    SaSuMoTuWeThFr
    import { Group } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -133,7 +133,7 @@
 }
    
 
    Hide weekdays
    
 
    Set hideWeekdays prop to hide weekdays names:
    
-
    import { DatePicker } from '@mantine/dates';
+
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker hideWeekdays />;
@@ -142,7 +142,7 @@
 
    Use weekendDays prop to configure weekend days. The prop accepts an array of numbers from 0 to 6,
 where 0 is Sunday and 6 is Saturday. Default value is [0, 6] – Saturday and Sunday. You can also configure this option
 for all components with DatesProvider.
    
-
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker weekendDays={[1, 2]} />;
@@ -150,7 +150,7 @@
 
    Render day function
    
 
    You can customize day rendering with renderDay prop. For example, it can be used to add
 Indicator to certain days.
    
-
    MoTuWeThFrSaSu
    import { Indicator } from '@mantine/core';
+
    MoTuWeThFrSaSu
    import { Indicator } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 
 const dayRenderer: DatePickerProps['renderDay'] = (date) => {
@@ -252,7 +252,7 @@
 }
    
 
    Number of columns
    
 
    Set numberOfColumns prop to define number of pickers that will be rendered side by side:
    
-
    MoTuWeThFrSaSu
    MoTuWeThFrSaSu
    Demo is not available on small screens. Make your screen larger to see the demo.
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    MoTuWeThFrSaSu
    Demo is not available on small screens. Make your screen larger to see the demo.
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -262,7 +262,7 @@
   );
 }
    
 
    Max level
    
-
    MoTuWeThFrSaSu
    May 2024
    MoTuWeThFrSaSu
    import { Group } from '@mantine/core';
+
    MoTuWeThFrSaSu
    June 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 adfd3451241..4db79ce9bc7 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 0223b858a42..5fd1bd991cd 100644 --- a/dates/dates-provider/index.html +++ b/dates/dates-provider/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatesProvider

    Settings provider for @mantine/dates components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

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

    DatesProvider

    Settings provider for @mantine/dates components

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

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

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

    Previous

    Getting started

    Next

    Calendar

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    Getting started

    Next

    Calendar

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/getting-started/index.html b/dates/getting-started/index.html index b0fe75a1004..2493d5135f3 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 (
@@ -79,4 +79,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 d19f2a850c1..2e2d25e19d4 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 4fd4632b4b2..4f88d6d5374 100644 --- a/dates/month-picker/index.html +++ b/dates/month-picker/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPicker

    Inline month, multiple months and months range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/dates/time-input/index.html b/dates/time-input/index.html index 99100f08ebb..2f7018b1897 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 ec1c55f4841..d9d25c8cc38 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 2aefe6f1ea8..0fd2b202a67 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 72654ee22ec..035b81ea7e4 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.

    @@ -91,4 +91,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 505aee261f8..2adfb08a53d 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';
@@ -106,4 +106,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 79b7b39a369..10dcea062a4 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';
 
@@ -115,4 +115,4 @@
 
 const form = useForm({ mode: 'uncontrolled' });
 
-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 967c3231089..59e6b405155 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:

    @@ -308,4 +308,4 @@ key={form.key('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 6d1cbc23d26..5297a52ff8d 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';
@@ -226,4 +226,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 aabf2976677..6b82924d0c0 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 } from '@mantine/core';
@@ -94,7 +94,7 @@
   );
 }

    List items reordering

    -
    import { Group, TextInput, Button, Center } from '@mantine/core';
+
    import { Group, TextInput, Button, Center } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { randomId } from '@mantine/hooks';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
@@ -281,4 +281,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 d018029b441..9753cfb100f 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
      • @@ -387,26 +387,22 @@ 
      yarn add valibot mantine-form-valibot-resolver

      Basic fields validation:

      import { valibotResolver } from 'mantine-form-valibot-resolver';
-import {
-  email,
-  minLength,
-  minValue,
-  number,
-  object,
-  string,
-} from 'valibot';
+import * as v from 'valibot';
 import { useForm } from '@mantine/form';
 
-const schema = object({
-  name: string([minLength(2, 'Name should have at least 2 letters')]),
-  email: string([email('Invalid email')]),
-  age: number([
-    minValue(18, 'You must be at least 18 to create an account'),
-  ]),
+const schema = v.object({
+  name: v.pipe(
+    v.string(),
+    v.minLength(2, 'Name should have at least 2 letters')
+  ),
+  email: v.pipe(v.string(), v.email('Invalid email')),
+  age: v.pipe(
+    v.number(),
+    v.minValue(18, 'You must be at least 18 to create an account')
+  ),
 });
 
 const form = useForm({
-  mode: 'uncontrolled',
   initialValues: {
     name: '',
     email: '',
@@ -422,21 +418,21 @@
 //  email: 'Invalid email',
 //  age: 'You must be at least 18 to create an account'
 // }
      -

      Nested fields validation

      +

      Nested fields validation:

      import { valibotResolver } from 'mantine-form-valibot-resolver';
-import { minLength, object, string } from 'valibot';
+import * as v from 'valibot';
 import { useForm } from '@mantine/form';
 
-const nestedSchema = object({
-  nested: object({
-    field: string([
-      minLength(2, 'Field should have at least 2 letters'),
-    ]),
+const nestedSchema = v.object({
+  nested: v.object({
+    field: v.pipe(
+      v.string(),
+      v.minLength(2, 'Field should have at least 2 letters')
+    ),
   }),
 });
 
 const form = useForm({
-  mode: 'uncontrolled',
   initialValues: {
     nested: {
       field: '',
@@ -452,21 +448,21 @@
 // }

      List fields validation:

      import { valibotResolver } from 'mantine-form-valibot-resolver';
-import { array, minLength, object, string } from 'valibot';
+import * as v from 'valibot';
 import { useForm } from '@mantine/form';
 
-const listSchema = object({
-  list: array(
-    object({
-      name: string([
-        minLength(2, 'Name should have at least 2 letters'),
-      ]),
+const listSchema = v.object({
+  list: v.array(
+    v.object({
+      name: v.pipe(
+        v.string(),
+        v.minLength(2, 'Name should have at least 2 letters')
+      ),
     })
   ),
 });
 
 const form = useForm({
-  mode: 'uncontrolled',
   initialValues: {
     list: [{ name: '' }],
   },
@@ -477,4 +473,22 @@
 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 +// }
    +

    With TypeScript:

    +

    You can use the InferInput type from the valibot library to get the type of the form data.

    +
    import { valibotResolver } from 'mantine-form-valibot-resolver';
+import * as v from 'valibot';
+import { useForm } from '@mantine/form';
+
+export const userSchema = v.object({
+  email: v.pipe(v.string(), v.email()),
+});
+
+type FormData = v.InferInput<typeof userSchema>;
+
+const form = useForm<FormData>({
+  initialValues: {
+    email: '',
+  },
+  validate: valibotResolver(userSchema),
+});

    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 9f5c3c3e66b..3d401032d33 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
      • @@ -101,4 +101,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/uncontrolled/index.html b/form/uncontrolled/index.html index 1ef6ce51d29..1d99694bf9e 100644 --- a/form/uncontrolled/index.html +++ b/form/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

    Uncontrolled mode

    use-form uncontrolled mode to improve performance

    Docs

    Edit this page

    Package

    @mantine/form

    Controlled mode

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

    Uncontrolled mode

    use-form uncontrolled mode to improve performance

    Docs

    Edit this page

    Package

    @mantine/form

    Controlled mode

    Controlled mode is the default mode of the form. In this mode, the form data is stored in React state and all components are rerendered when form data changes. Controlled mode is not recommended for large forms.

    @@ -278,4 +278,4 @@ key={form.key('text')} /> ); -}

    Previous

    use-field

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

    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/use-field/index.html b/form/use-field/index.html index a354686a63f..14f7cd000ff 100644 --- a/form/use-field/index.html +++ b/form/use-field/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-field

    use-field hook – manage single field state

    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

    use-field

    use-field hook – manage single field state

    Docs

    Edit this page

    Package

    @mantine/form

    Usage

    use-field hook is a simpler alternative to use-form, it can be used to manage state of a single input without the need to create a form:

    import { Button, TextInput } from '@mantine/core';
@@ -266,4 +266,4 @@
       <Button onClick={field.validate}>Validate</Button>
     </>
   );
-}

    Previous

    use-form

    Next

    Uncontrolled mode

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    Uncontrolled mode

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 7990d1679b1..51d6f98d389 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

    @@ -273,4 +273,4 @@ <OccupationInput form={form} /> </> ); -}

    Previous

    use-shallow-effect

    Next

    use-field

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    use-field

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 b74e956d0d5..b451ec29bf0 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';
@@ -602,4 +602,4 @@
       </Group>
     </form>
   );
-}

    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 +}

    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 9c96cc20d93..ba25383e144 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';
@@ -278,4 +278,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 ac8a7e6b3b7..ac4821cc104 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';
 
@@ -532,4 +532,4 @@
       jobs: [],
     },
   });
-}

    Previous

    Uncontrolled mode

    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

    Uncontrolled mode

    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 8d1b300d5be..764d4f165ce 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. @@ -23,7 +23,7 @@

    Community templates are created and maintained by the community. These templates usually include additional features and third-party integrations. You are welcome to share your template with the community by following this guide.

    -

    Your template here

    Create a template with your stack and share it with the community

    		Submit template

    next-app-tss-template

    Next.js template with app router and tss (emotion based) setup

    		Use template

    next-pages-tss-template

    Next.js template with pages router and tss (emotion based) setup

    		Use template

    t3-template

    Next.js app router T3 stack template

    		Use template

    next-tailwind-template

    Next.js app router + Mantine + Tailwind template

    		Use template

    next-bun-template

    Next.js app router + Mantine + Bun template

    		Use template

    nx-vite-monorepo-template

    NX monorepo template with: Vite, GraphQL / Apollo, Typescript, Storybook / CSS Modules

    		Use template

    vike-mantine-template

    Vite ssr template with Vike

    		Use template

    dashboard-template

    Vite + Redux + i18next + auth + Mantine dashboard template

    		Use template

    supabase-template

    Vite + Supabase + Mantine template

    		Use template
    +

    Your template here

    Create a template with your stack and share it with the community

    		Submit template

    next-app-tss-template

    Next.js template with app router and tss (emotion based) setup

    		Use template

    next-pages-tss-template

    Next.js template with pages router and tss (emotion based) setup

    		Use template

    t3-template

    Next.js app router T3 stack template

    		Use template

    next-tailwind-template

    Next.js app router + Mantine + Tailwind template

    		Use template

    next-bun-template

    Next.js app router + Mantine + Bun template

    		Use template

    nx-vite-monorepo-template

    NX monorepo template with: Vite, GraphQL / Apollo, Typescript, Storybook / CSS Modules

    		Use template

    vike-mantine-template

    Vite ssr template with Vike

    		Use template

    dashboard-template

    Vite + Redux + i18next + auth + Mantine dashboard template

    		Use template

    supabase-template

    Vite + Supabase + Mantine template

    		Use template

    waku-template

    Vite + Waku + Mantine template

    		Use template

    Framework guide

    Follow one of the guides below to get started with Mantine and your preferred framework. Note that usually it is better to start a new project with a template. Use guides if you want @@ -168,4 +168,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 144838da2db..65721feefbd 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.

    @@ -325,4 +325,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 f8cc9047324..85bbb768d9a 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 3a3d69a8110..cc1576ef44c 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 @@ -77,4 +77,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 d2081d27e6d..d03047ee9c4 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 9b9b49cf3f8..f7ecdb8c076 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 3967b8ee0e8..6729ac1671b 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.

    @@ -86,4 +86,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 1ac0623a2f5..a8f8600ed39 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 7d0f911d33e..102a3da478e 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 4bfaff8ff0f..d6a4c9b7bdb 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 @@ -61,4 +61,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 384bd38fd14..4e6bb6515d0 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:

    @@ -70,4 +70,4 @@ return <Outlet />; }

    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 5dc021f95ee..21e46339e37 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 5de96ef6013..79e11991057 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 8812efef411..db3a99a6148 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 2f6a68fe2a3..3c0a9fecdc1 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.

    @@ -101,4 +101,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 46458802a49..c8964d0047c 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';
@@ -103,4 +103,4 @@
   handler: () => void,
   events?: string[] | null,
   nodes?: HTMLElement[]
-): React.MutableRefObject<T>;

    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 +): React.MutableRefObject<T>;

    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 0eb769a18b0..75a8575741b 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 d7ae6e9ddd4..731eb136d2a 100644 --- a/hooks/use-color-scheme/index.html +++ b/hooks/use-color-scheme/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-color-scheme

    Detects user system color scheme with window.matchMedia API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

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

    use-color-scheme

    Detects user system color scheme with window.matchMedia API

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-color-scheme hook returns system color scheme value i.e. either dark or light:

    Your system color scheme is light
    import { Badge } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
@@ -28,4 +28,4 @@
   options?: {
     getInitialValueInEffect: boolean;
   }
-): 'dark' | 'light';

    Previous

    use-click-outside

    Next

    use-element-size

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): 'dark' | 'light';

    Previous

    use-click-outside

    Next

    use-element-size

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

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

    use-counter

    Increments/decrements state within given boundaries

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

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

    use-counter

    Increments/decrements state within given boundaries

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Count: 0

    import { Group, Button, Text } from '@mantine/core';
 import { useCounter } from '@mantine/hooks';
 
@@ -38,4 +38,4 @@
     set: (value: number) => void;
     reset: () => void;
   },
-];

    Previous

    use-window-scroll

    Next

    use-debounced-callback

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-window-scroll

    Next

    use-debounced-callback

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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-callback/index.html b/hooks/use-debounced-callback/index.html index 7a30e254e9b..51c2098802c 100644 --- a/hooks/use-debounced-callback/index.html +++ b/hooks/use-debounced-callback/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-callback

    Debounces function calls

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

    Debounces function calls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useDebouncedCallback hook creates a debounced version of a callback function, delaying its execution until a specified time has elapsed since the last invocation.

    import { useState } from 'react';
@@ -61,4 +61,4 @@
 
    function useDebouncedCallback<T extends (...args: any[]) => any>(
   callback: T,
   delay: number
-): (...args: Parameters<T>) => void;
    Previous
    use-counter
    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 +): (...args: Parameters<T>) => void;

    Previous

    use-counter

    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 9ac56480382..088ae940e87 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-debounced-callback

    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-debounced-callback

    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 a81e8cdc346..0ccb5404cf4 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 9c0ae24d7d8..ee138dad8a1 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 38d74038394..a7fac4f0e62 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 e746499e663..6a63c968012 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 a85c6fd8e58..c154d68a6ac 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 648348c8b68..ede06b92072 100644 --- a/hooks/use-element-size/index.html +++ b/hooks/use-element-size/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-element-size

    Returns element width and height and observes changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

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

    use-element-size

    Returns element width and height and observes changes with ResizeObserver

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Resize textarea by dragging its right bottom corner

    Width: 0, height: 0

    import { useElementSize } from '@mantine/hooks';
 import { rem } from '@mantine/core';
 
@@ -30,4 +30,4 @@
 
 function useResizeObserver<T extends HTMLElement = any>(
   options?: ResizeObserverOptions
-): readonly [React.RefObject<T>, ObserverRect];

    Previous

    use-color-scheme

    Next

    use-event-listener

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): readonly [React.RefObject<T>, ObserverRect];

    Previous

    use-color-scheme

    Next

    use-event-listener

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

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

    use-event-listener

    Subscribes to events of a given element with a ref

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

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

    use-event-listener

    Subscribes to events of a given element with a ref

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-event-listener adds a given event listener to an element to which ref is assigned. Hook supports the same options as addEventListener method. After the component is unmounted, the listener is automatically removed.

    @@ -26,4 +26,4 @@ type: K, listener: (this: HTMLDivElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions -): MutableRefObject<T>;

    Previous

    use-element-size

    Next

    use-focus-return

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): MutableRefObject<T>;

    Previous

    use-element-size

    Next

    use-focus-return

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/hooks/use-eye-dropper/index.html b/hooks/use-eye-dropper/index.html index 37ccd62f325..71abcf76e8c 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 66dc9dbe023..fde14c85fa6 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-fetch

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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-fetch/index.html b/hooks/use-fetch/index.html index 7a95a2537b9..04486b25796 100644 --- a/hooks/use-fetch/index.html +++ b/hooks/use-fetch/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-fetch

    Fetch data with built-in loading and error states

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

    Fetch data with built-in loading and error states

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useFetch hook sends a GET request to the specified URL and returns the response data, loading state, error, refetch and abort functions.

    Fetching
    import { Box, Button, Code, Group, LoadingOverlay, Text } from '@mantine/core';
@@ -55,4 +55,4 @@
   error: Error | null;
   refetch: () => Promise<T> | undefined;
   abort: () => void;
-};

    Previous

    use-favicon

    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 +};

    Previous

    use-favicon

    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 ba521e63196..f2331351eb2 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:

    @@ -50,4 +50,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 cb6794c1e21..ce350f4bdb2 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';
@@ -84,4 +84,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 b7746f7ff84..d65da79b321 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 1eefa209c33..795957c928b 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-3hcr5zkvz

    import { Button, Text, Group } from '@mantine/core';
+
    mantine-2mhlylm9n
    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-is-first-render
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow 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-is-first-render

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 7b7b321c7ca..340858cee1c 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 c7c0ed9d2e6..3d91f3996fd 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';
@@ -35,4 +35,4 @@
 
    Definition
    
 
    function useHash(options: {
   getInitialValueInEffect?: boolean;
-}): readonly [string, (value: string) => void];
    Previous
    use-fetch
    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-fetch

    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 5a15e43f840..0a48060d855 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 @@ -54,4 +54,4 @@ onRelease?: () => void; } -function useHeadroom(input?: UseHeadroomInput): 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 +function useHeadroom(input?: UseHeadroomInput): 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 f8b66dc0a5e..b630aeae43e 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 773854d8182..17e1e53a138 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() {
@@ -17,6 +17,6 @@
 }

    Definition

    function useHover<T extends HTMLElement = HTMLDivElement>(): {
-  ref: React.MutableRefObject<T>;
+  ref: React.RefObject<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 b1883ffb974..cb80ac8f45a 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 bf3f03a41b7..4e123f8c23a 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 0d31e24386c..55c2351ef3f 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 60afd6d0b20..2b3fa733880 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';
@@ -59,4 +59,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 39f18fa86d7..bb485932090 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';
@@ -73,4 +73,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 00f8950a582..65934542e9d 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';
@@ -52,4 +52,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-is-first-render/index.html b/hooks/use-is-first-render/index.html index 904dc1ef579..e736979478a 100644 --- a/hooks/use-is-first-render/index.html +++ b/hooks/use-is-first-render/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-is-first-render

    Detects if the component is rendered for the first time

    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-is-first-render

    Detects if the component is rendered for the first time

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useIsFirstRender returns true if the component is being rendered for the first time, otherwise it returns false.

    Is first render: Yes

    import { useState } from 'react';
@@ -29,4 +29,4 @@
   );
 }

    Definition

    -
    function useIsFirstRender(): boolean;

    Previous

    use-force-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 useIsFirstRender(): boolean;

    Previous

    use-force-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-isomorphic-effect/index.html b/hooks/use-isomorphic-effect/index.html index 63a6eb6851c..0596cf08dd6 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-is-first-render

    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-is-first-render

    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 d23529c6eb9..ba740f73302 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:

    import { useListState } from '@mantine/hooks';
 
@@ -179,4 +179,4 @@
 
    Definition
    
 
    function useListState<T>(
   initialValue?: T[]
-): [T[], UseListStateHandlers<T>];
    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 +): [T[], UseListStateHandlers<T>];

    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 d70243cf974..48f04172925 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';
@@ -141,4 +141,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-map
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 575fba617b4..6d992b6585d 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-mounted

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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-map/index.html b/hooks/use-map/index.html index 247e036781b..7a5687041e4 100644 --- a/hooks/use-map/index.html +++ b/hooks/use-map/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-map

    Use Map as React 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-map

    Use Map as React state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useMap returns Map object that can be used as React state – set, clear and delete methods update state and trigger rerender.

    PageViews last month
    /hooks/use-media-query4124
    /hooks/use-clipboard8341
    /hooks/use-fetch9001
    import { IconPlus, IconTrash } from '@tabler/icons-react';
@@ -49,4 +49,4 @@
   );
 }

    Definition

    -
    function useMap<T, V>(initialState?: [T, V][]): Map<T, V>;

    Previous

    use-local-storage

    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 +
    function useMap<T, V>(initialState?: [T, V][]): Map<T, V>;

    Previous

    use-local-storage

    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-media-query/index.html b/hooks/use-media-query/index.html index 8bac3dc66ee..f9d7a008a9f 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 37fd05dfe6d..0af2ed1fdf6 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:

    @@ -82,4 +82,4 @@

    Definition

    function useMergedRef<T = any>(
   ...refs: React.ForwardedRef<T>[]
-): (node: T) => void;

    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 +): (node: T) => void;

    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-mounted/index.html b/hooks/use-mounted/index.html index a6f6e7fef92..bd11094e04f 100644 --- a/hooks/use-mounted/index.html +++ b/hooks/use-mounted/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-mounted

    Returns true if the component is mounted

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

    Returns true if the component is mounted

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useMounted hook returns true if component is mounted and false if it's not.

    import { useMounted } from '@mantine/hooks';
 
@@ -17,4 +17,4 @@
   );
 }

    Definition

    -
    function useMounted(): boolean;

    Previous

    use-logger

    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 useMounted(): boolean;

    Previous

    use-logger

    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-mouse/index.html b/hooks/use-mouse/index.html index 29270992ae8..8ea00c92a82 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';
 
@@ -56,4 +56,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 bc7ce992cb9..0dfde0e153e 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';
@@ -251,4 +251,4 @@
 ): {
   ref: React.RefObject<T>;
   active: boolean;
-};

    Previous

    use-mouse

    Next

    use-mutation-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 +};

    Previous

    use-mouse

    Next

    use-mutation-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-mutation-observer/index.html b/hooks/use-mutation-observer/index.html index 0ebefc2a7dc..732eaec54e7 100644 --- a/hooks/use-mutation-observer/index.html +++ b/hooks/use-mutation-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-mutation-observer

    Subscribe to changes being made to the DOM tree

    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-mutation-observer

    Subscribe to changes being made to the DOM tree

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-mutation-observer is a wrapper for the MutationObserver. It allows subscribing changes being made to the DOM tree.

    Last detected mutation: Not mutated yet

    import { useState } from 'react';
@@ -86,4 +86,4 @@
   callback: MutationCallback,
   options: MutationObserverInit,
   target?: HTMLElement | (() => HTMLElement) | null
-): RefObject<Element>;

    Previous

    use-move

    Next

    use-orientation

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): RefObject<Element>;

    Previous

    use-move

    Next

    use-orientation

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 e6308e84e30..5c8743f47f1 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-orientation/index.html b/hooks/use-orientation/index.html index 3b610be1587..20a271f6193 100644 --- a/hooks/use-orientation/index.html +++ b/hooks/use-orientation/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-orientation

    Detects device orientation and subscribe to its 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-orientation

    Detects device orientation and subscribe to its changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useOrientation returns an object with the current orientation of the device:

    Angle: 0

    Type: landscape-primary

    import { Code, Text } from '@mantine/core';
 import { useOrientation } from '@mantine/hooks';
@@ -26,4 +26,4 @@
 
    function useOrientation(): {
   angle: number;
   type: string;
-};
    Previous
    use-mutation-observer
    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-mutation-observer

    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-os/index.html b/hooks/use-os/index.html index 497f7600798..e760da3a52c 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 dc1fd814c93..12cb5a7f57d 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 5d99bda582e..d8b974d5d44 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:

    @@ -112,4 +112,4 @@ previous: () => void; first: () => void; last: () => void; -};

    Previous

    use-map

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

    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 65360745a63..af57c5c28ab 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 74c80ce4dd3..d0d3c88271b 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 @@ -89,4 +89,4 @@ add: (...items: T[]) => void; update: (fn: (state: T[]) => T[]) => void; cleanQueue: () => void; -};

    Previous

    use-previous

    Next

    use-set

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 3538b47308e..db849e8ed5e 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-orientation

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

    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 56493b73707..860a590dfa3 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, @@ -43,4 +43,4 @@ function useResizeObserver<T extends HTMLElement = any>( options?: ResizeObserverOptions -): readonly [React.RefObject<T>, ObserverRect];

    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 +): readonly [React.RefObject<T>, ObserverRect];

    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 0d0cb0d8a76..acdff29d366 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';
@@ -181,4 +181,4 @@
   offset,
   cancelable,
   isList,
-}?: ScrollIntoViewParams): ScrollIntoViewReturnType<Target, Parent>;

    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 +}?: ScrollIntoViewParams): ScrollIntoViewReturnType<Target, Parent>;

    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 53d0238fb73..8dd7c152270 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.

    import { useSetState } from '@mantine/hooks';
@@ -34,4 +34,4 @@
   (
     statePartial: Partial<T> | ((currentState: T) => Partial<T>)
   ) => void,
-];

    Previous

    use-set

    Next

    use-state-history

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    Next

    use-state-history

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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/index.html b/hooks/use-set/index.html index 3f5c637cd91..2f3a6cd2ec0 100644 --- a/hooks/use-set/index.html +++ b/hooks/use-set/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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

    Use Set as React 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-set

    Use Set as React state

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useSet return Set object that can be used as React state: add, clear and delete methods trigger state updates.

    Duplicate scopes are not allowed

    @mantine@mantine-tests@mantinex
    import { useState } from 'react';
@@ -43,4 +43,4 @@
   );
 }

    Definition

    -
    function useSet<T>(values?: T[]): Set<T>;

    Previous

    use-queue

    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 +
    function useSet<T>(values?: T[]): Set<T>;

    Previous

    use-queue

    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-shallow-effect/index.html b/hooks/use-shallow-effect/index.html index c37f08f7f2c..241a962533c 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';
@@ -32,4 +32,4 @@
 
    function useShallowEffect(
   cb: () => void,
   dependencies?: React.DependencyList
-): void;
    Previous
    use-mounted
    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-mounted

    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-state-history/index.html b/hooks/use-state-history/index.html index b77cde087ac..d56ea6346cd 100644 --- a/hooks/use-state-history/index.html +++ b/hooks/use-state-history/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-state-history

    Move back/forward in state history

    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-state-history

    Move back/forward in state history

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useStateHistory hook is used to create a state with history, it returns current value, handlers to go back/forward and a history object with all previous values and current index.

    Current value: 1

    {
@@ -45,4 +45,4 @@
 
 function useStateHistory<T>(
   initialValue: T
-): [T, UseStateHistoryHandlers<T>, StateHistory<T>];

    Previous

    use-set-state

    Next

    use-throttled-callback

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +): [T, UseStateHistoryHandlers<T>, StateHistory<T>];

    Previous

    use-set-state

    Next

    use-throttled-callback

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 0c5a72c26e1..8781adbe297 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-throttled-callback/index.html b/hooks/use-throttled-callback/index.html index cda3e3ca681..50c4cb763d1 100644 --- a/hooks/use-throttled-callback/index.html +++ b/hooks/use-throttled-callback/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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-throttled-callback

    Throttles function calls

    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-throttled-callback

    Throttles function calls

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useThrottledCallback accepts a function and a wait time in milliseconds. It returns a throttled version of the function that will only be called at most once every wait milliseconds.

    Throttled value: –

    import { Text, TextInput } from '@mantine/core';
@@ -28,4 +28,4 @@
 
    function useThrottledCallback<T extends (...args: any[]) => any>(
   callback: T,
   wait: number
-): (...args: Parameters<T>) => void;
    Previous
    use-state-history
    Next
    use-throttled-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 +): (...args: Parameters<T>) => void;

    Previous

    use-state-history

    Next

    use-throttled-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-throttled-state/index.html b/hooks/use-throttled-state/index.html index f5d639ec909..a1dc661feb3 100644 --- a/hooks/use-throttled-state/index.html +++ b/hooks/use-throttled-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-throttled-state

    Throttles state 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-throttled-state

    Throttles state changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useThrottledState works similar to useState but throttles the state updates. setThrottledState handler in the example below will be called at most once every 1000ms.

    Throttled value: –

    import { Text, TextInput } from '@mantine/core';
@@ -27,4 +27,4 @@
 
    function useThrottledState<T = any>(
   defaultValue: T,
   wait: number
-): readonly [T, (newValue: React.SetStateAction<T>) => void];
    Previous
    use-throttled-callback
    Next
    use-throttled-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: React.SetStateAction<T>) => void];

    Previous

    use-throttled-callback

    Next

    use-throttled-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-throttled-value/index.html b/hooks/use-throttled-value/index.html index 4980522e5b2..b2034bd4b25 100644 --- a/hooks/use-throttled-value/index.html +++ b/hooks/use-throttled-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-throttled-value

    Throttles 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-throttled-value

    Throttles value changes

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    useThrottledValue accepts a value and a wait time in milliseconds. It returns a throttled value that cannot change more than once every wait milliseconds.

    Throttled value: –

    import { Text, TextInput } from '@mantine/core';
@@ -22,4 +22,4 @@
   );
 }

    Definition

    -
    function useThrottledValue<T>(value: T, wait: number): T;

    Previous

    use-throttled-state

    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 +
    function useThrottledValue<T>(value: T, wait: number): T;

    Previous

    use-throttled-state

    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-timeout/index.html b/hooks/use-timeout/index.html index 48eb2770818..f2ba3fbcbf6 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';
@@ -50,4 +50,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 8162dfe46a0..6e157da9172 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';
@@ -46,4 +46,4 @@
 
    Definition
    
 
    function useToggle<T = boolean>(
   options?: readonly T[]
-): readonly [T, (value?: React.SetStateAction<T>) => void];
    Previous
    use-throttled-value
    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-throttled-value

    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 af58d38bb93..8a41c7a7a52 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';
 
@@ -65,4 +65,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 438367f19f0..0f777d0d9e5 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:

    import { useValidatedState } from '@mantine/hooks';
@@ -71,4 +71,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 6beb2510132..39683f2b097 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 9c4f56a6096..eade270a161 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 38456ae802e..992f76dd00f 100644 --- a/hooks/use-window-scroll/index.html +++ b/hooks/use-window-scroll/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-window-scroll

    Tracks window scroll position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

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

    use-window-scroll

    Tracks window scroll position

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    use-window-scroll returns current scroll position and a function to scroll smoothly to given position:

    Scroll position x: 0, y: 0

    import { useWindowScroll } from '@mantine/hooks';
 import { Button, Text, Group } from '@mantine/core';
@@ -25,4 +25,4 @@
 
    function useWindowScroll(): readonly [
   { x: number; y: number },
   (position: { x?: number; y?: number }) => void,
-];
    Previous
    use-window-event
    Next
    use-counter
    Welcome to Mantine, React components library that you always wished for

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +];

    Previous

    use-window-event

    Next

    use-counter

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/index.html b/index.html index 3fee901ae11..8da92492d38 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 d1a8865e50b..6d7d6f12ccb 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 9ec84c8965e..ae4fe078738 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 16a52e9213b..7bc3dd7b602 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 976dabd1145..23d573a2da1 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 90672fe5248..a099bb5f121 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 06f6df6b20a..f508f043a27 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 5a1f51c9278..cf2499d8291 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 465cc51de74..fd9aacf6867 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 8a8720c3d74..dd4a49290c4 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.

    @@ -276,4 +276,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 33862fd6e34..a4b52b916f6 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1,287 +1,287 @@ -https://mantine.dev2024-05-30T10:04:47.071Zdaily0.7 -https://mantine.dev/4042024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/about2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/app-shell2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/colors-generator2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/combobox2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/contribute2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/getting-started2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/overview2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/submit-template2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/templates-usage2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-0-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-1-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-10-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-2-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-4-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-3-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-5-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-6-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-7-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-8-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/7-9-02024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/all-releases2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/changelog/previous-versions2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/area-chart2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/bar-chart2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/donut-chart2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/getting-started2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/line-chart2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/pie-chart2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/radar-chart2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/scatter-chart2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/charts/sparkline2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/accordion2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/affix2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/action-icon2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/alert2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/anchor2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/app-shell2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/aspect-ratio2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/autocomplete2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/avatar2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/background-image2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/badge2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/blockquote2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/breadcrumbs2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/box2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/burger2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/button2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/card2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/center2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/checkbox2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/chip2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/close-button2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/code2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/collapse2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/color-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/color-picker2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/color-swatch2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/combobox2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/copy-button2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/container2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/dialog2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/divider2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/fieldset2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/drawer2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/file-button2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/file-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/flex2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/floating-indicator2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/focus-trap2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/grid2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/group2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/highlight2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/hover-card2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/image2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/indicator2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/json-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/loader2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/kbd2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/list2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/loading-overlay2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/mark2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/menu2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/modal2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/multi-select2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/native-select2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/notification2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/nav-link2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/number-formatter2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/number-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/overlay2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/pagination2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/paper2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/password-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/pill2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/pills-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/pin-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/popover2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/progress2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/portal2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/radio2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/rating2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/ring-progress2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/scroll-area2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/segmented-control2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/simple-grid2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/select2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/skeleton2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/slider2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/space2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/spoiler2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/stack2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/stepper2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/switch2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/table2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/tabs2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/tags-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/text2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/text-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/textarea2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/theme-icon2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/timeline2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/title2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/tooltip2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/transition2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/tree2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/typography-styles-provider2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/unstyled-button2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/core/visually-hidden2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/calendar2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/date-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/date-picker2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/date-time-picker2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/date-picker-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/dates-provider2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/getting-started2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/month-picker-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/month-picker2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/year-picker2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/time-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/dates/year-picker-input2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/actions2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/create-form-context2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/errors2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/get-input-props2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/recipes2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/nested2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/status2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/schema-validation2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/uncontrolled2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/use-field2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/use-form2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/validation2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/validators2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/form/values2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/functions-reference2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/6x-to-7x2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/gatsby2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/javascript2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/next2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/icons2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/jest2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/polymorphic2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/redwood2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/storybook2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/remix2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/vite2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/typescript2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/guides/vitest2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/others/carousel2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/others/code-highlight2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/others/dropzone2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/others/notifications2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/others/modals2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/others/nprogress2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/others/spotlight2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/others/tiptap2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-click-outside2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-clipboard2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-color-scheme2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-counter2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-debounced-callback2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-debounced-state2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-debounced-value2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-did-update2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-disclosure2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-document-title2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-document-visibility2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-element-size2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-event-listener2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-eye-dropper2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-favicon2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-fetch2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-focus-return2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-focus-trap2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-focus-within2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-fullscreen2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-force-update2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-hash2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-headroom2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-hotkeys2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-hover2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-id2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-idle2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-in-viewport2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-input-state2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-intersection2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-interval2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-isomorphic-effect2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-is-first-render2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-list-state2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-local-storage2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-logger2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-map2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-media-query2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-merged-ref2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-mounted2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-mouse2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-move2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-mutation-observer2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-network2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-orientation2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-os2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-page-leave2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-pagination2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-previous2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-queue2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-reduced-motion2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-set2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-resize-observer2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-scroll-into-view2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-shallow-effect2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-set-state2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-text-selection2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-state-history2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-throttled-callback2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-throttled-state2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-timeout2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-throttled-value2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-toggle2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-uncontrolled2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-validated-state2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-viewport-size2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-window-event2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/hooks/use-window-scroll2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/color-functions2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/css-files-list2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/css-variables2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/css-modules2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/css-variables-list2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/data-attributes2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/global-styles2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/emotion2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/mantine-styles2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/postcss-preset2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/rem2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/responsive2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/rtl2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/sass2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/style2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/style-props2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/styles-api2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/styles-performance2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/styles-overview2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/unstyled2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/vanilla-extract2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/styles/variants-sizes2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/theming/colors2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/theming/default-props2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/theming/color-schemes2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/theming/default-theme2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/theming/mantine-provider2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/theming/theme-object2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/theming/typography2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/x/carousel2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/x/dropzone2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/x/code-highlight2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/x/modals2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/x/notifications2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/x/nprogress2024-05-30T10:04:47.072Zdaily0.7 -https://mantine.dev/x/spotlight2024-05-30T10:04:47.073Zdaily0.7 -https://mantine.dev/x/tiptap2024-05-30T10:04:47.073Zdaily0.7 +https://mantine.dev2024-06-13T09:03:01.792Zdaily0.7 +https://mantine.dev/4042024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/about2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/app-shell2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/colors-generator2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/combobox2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/contribute2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/getting-started2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/overview2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/submit-template2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/templates-usage2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/area-chart2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/bar-chart2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/donut-chart2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/getting-started2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/line-chart2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/radar-chart2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/pie-chart2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/scatter-chart2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/charts/sparkline2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-0-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-1-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-10-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-2-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-3-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-4-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-5-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-6-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-7-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-8-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/7-9-02024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/all-releases2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/changelog/previous-versions2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/calendar2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/date-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/date-picker2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/date-picker-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/date-time-picker2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/dates-provider2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/getting-started2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/month-picker2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/month-picker-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/time-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/year-picker2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/dates/year-picker-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/actions2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/create-form-context2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/errors2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/get-input-props2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/nested2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/recipes2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/schema-validation2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/status2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/uncontrolled2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/use-field2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/use-form2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/validation2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/validators2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/accordion2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/form/values2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/action-icon2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/affix2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/alert2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/anchor2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/app-shell2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/aspect-ratio2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/autocomplete2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/avatar2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/background-image2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/badge2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/blockquote2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/box2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/breadcrumbs2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/burger2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/button2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/card2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/center2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/checkbox2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/chip2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/close-button2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/code2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/collapse2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/color-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/color-picker2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/color-swatch2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/combobox2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/container2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/copy-button2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/divider2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/dialog2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/drawer2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/fieldset2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/file-button2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/file-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/flex2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/floating-indicator2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/focus-trap2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/grid2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/group2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/highlight2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/hover-card2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/image2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/indicator2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/json-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/kbd2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/list2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/loader2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/loading-overlay2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/mark2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/menu2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/modal2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/multi-select2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/native-select2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/nav-link2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/notification2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/number-formatter2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/number-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/overlay2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/pagination2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/paper2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/password-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/pill2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/pills-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/pin-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/popover2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/portal2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/progress2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/radio2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/rating2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/ring-progress2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/scroll-area2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/segmented-control2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/select2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/simple-grid2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/skeleton2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/slider2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/space2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/stack2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/spoiler2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/stepper2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/switch2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/tabs2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/table2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/tags-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/text2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/text-input2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/textarea2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/theme-icon2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/timeline2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/transition2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/title2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/tooltip2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/tree2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/unstyled-button2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/visually-hidden2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/core/typography-styles-provider2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/6x-to-7x2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/functions-reference2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/gatsby2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/icons2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/javascript2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/polymorphic2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/jest2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/next2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/redwood2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/remix2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/typescript2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/storybook2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/vite2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/guides/vitest2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/others/carousel2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/others/code-highlight2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/others/dropzone2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/others/modals2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/others/notifications2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/others/nprogress2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/others/spotlight2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/others/tiptap2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-click-outside2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-clipboard2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-color-scheme2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-counter2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-debounced-callback2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-debounced-state2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-debounced-value2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-did-update2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-disclosure2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-document-title2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-document-visibility2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-element-size2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-event-listener2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-eye-dropper2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-favicon2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-fetch2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-focus-return2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-focus-within2024-06-13T09:03:01.795Zdaily0.7 +https://mantine.dev/hooks/use-focus-trap2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-fullscreen2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-force-update2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-hash2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-headroom2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-hotkeys2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-hover2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-id2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-idle2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-in-viewport2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-input-state2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-intersection2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-interval2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-is-first-render2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-isomorphic-effect2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-list-state2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-local-storage2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-logger2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-map2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-media-query2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-merged-ref2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-mounted2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-mouse2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-move2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-mutation-observer2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-network2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-orientation2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-os2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-page-leave2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-pagination2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-previous2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-queue2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-reduced-motion2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-resize-observer2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-scroll-into-view2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-set2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-set-state2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-shallow-effect2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-state-history2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-text-selection2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-throttled-callback2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-throttled-state2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-throttled-value2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-timeout2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-toggle2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-uncontrolled2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-validated-state2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-viewport-size2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-window-event2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/hooks/use-window-scroll2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/color-functions2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/css-files-list2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/css-modules2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/css-variables2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/data-attributes2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/css-variables-list2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/emotion2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/global-styles2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/mantine-styles2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/postcss-preset2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/rem2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/responsive2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/rtl2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/sass2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/style2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/style-props2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/styles-api2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/styles-overview2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/styles-performance2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/unstyled2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/vanilla-extract2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/styles/variants-sizes2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/theming/color-schemes2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/theming/colors2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/theming/default-props2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/theming/default-theme2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/theming/mantine-provider2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/theming/theme-object2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/theming/typography2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/x/carousel2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/x/code-highlight2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/x/dropzone2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/x/modals2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/x/notifications2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/x/nprogress2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/x/spotlight2024-06-13T09:03:01.796Zdaily0.7 +https://mantine.dev/x/tiptap2024-06-13T09:03:01.796Zdaily0.7 \ No newline at end of file diff --git a/styles/color-functions/index.html b/styles/color-functions/index.html index 3441f2eb59b..00cbd6acbef 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

    @@ -145,4 +145,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 96f8513e019..dec011c270f 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';
    Alert
    import '@mantine/core/styles/Alert.css';
    Affix
    import '@mantine/core/styles/Affix.css';
    AppShell
    import '@mantine/core/styles/AppShell.css';
    Anchor
    import '@mantine/core/styles/Anchor.css';
    AspectRatio
    import '@mantine/core/styles/AspectRatio.css';
    Avatar
    import '@mantine/core/styles/Avatar.css';
    Badge
    import '@mantine/core/styles/Badge.css';
    BackgroundImage
    import '@mantine/core/styles/BackgroundImage.css';
    Breadcrumbs
    import '@mantine/core/styles/Breadcrumbs.css';
    Burger
    import '@mantine/core/styles/Burger.css';
    Blockquote
    import '@mantine/core/styles/Blockquote.css';
    Button
    import '@mantine/core/styles/Button.css';
    Chip
    import '@mantine/core/styles/Chip.css';
    Card
    import '@mantine/core/styles/Card.css';
    Checkbox
    import '@mantine/core/styles/Checkbox.css';
    Center
    import '@mantine/core/styles/Center.css';
    ColorInput
    import '@mantine/core/styles/ColorInput.css';
    CloseButton
    import '@mantine/core/styles/CloseButton.css';
    Code
    import '@mantine/core/styles/Code.css';
    Container
    import '@mantine/core/styles/Container.css';
    ColorSwatch
    import '@mantine/core/styles/ColorSwatch.css';
    ColorPicker
    import '@mantine/core/styles/ColorPicker.css';
    Combobox
    import '@mantine/core/styles/Combobox.css';
    Divider
    import '@mantine/core/styles/Divider.css';
    Drawer
    import '@mantine/core/styles/Drawer.css';
    Dialog
    import '@mantine/core/styles/Dialog.css';
    Fieldset
    import '@mantine/core/styles/Fieldset.css';
    Flex
    import '@mantine/core/styles/Flex.css';
    FloatingIndicator
    import '@mantine/core/styles/FloatingIndicator.css';
    Grid
    import '@mantine/core/styles/Grid.css';
    Image
    import '@mantine/core/styles/Image.css';
    Group
    import '@mantine/core/styles/Group.css';
    InlineInput
    import '@mantine/core/styles/InlineInput.css';
    Indicator
    import '@mantine/core/styles/Indicator.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';
    Pagination
    import '@mantine/core/styles/Pagination.css';
    Overlay
    import '@mantine/core/styles/Overlay.css';
    PillsInput
    import '@mantine/core/styles/PillsInput.css';
    Pill
    import '@mantine/core/styles/Pill.css';
    PasswordInput
    import '@mantine/core/styles/PasswordInput.css';
    Paper
    import '@mantine/core/styles/Paper.css';
    PinInput
    import '@mantine/core/styles/PinInput.css';
    Popover
    import '@mantine/core/styles/Popover.css';
    Progress
    import '@mantine/core/styles/Progress.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.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';
    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';
    Stepper
    import '@mantine/core/styles/Stepper.css';
    Stack
    import '@mantine/core/styles/Stack.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';
    Timeline
    import '@mantine/core/styles/Timeline.css';
    Title
    import '@mantine/core/styles/Title.css';
    ThemeIcon
    import '@mantine/core/styles/ThemeIcon.css';
    Tree
    import '@mantine/core/styles/Tree.css';
    TypographyStylesProvider
    import '@mantine/core/styles/TypographyStylesProvider.css';
    VisuallyHidden
    import '@mantine/core/styles/VisuallyHidden.css';
    UnstyledButton
    import '@mantine/core/styles/UnstyledButton.css';
    Tooltip
    import '@mantine/core/styles/Tooltip.css';
    CheckboxCard
    import '@mantine/core/styles/CheckboxCard.css';
    CheckboxIndicator
    import '@mantine/core/styles/CheckboxIndicator.css';
    RadioCard
    import '@mantine/core/styles/RadioCard.css';
    RadioIndicator
    import '@mantine/core/styles/RadioIndicator.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';
    Alert
    import '@mantine/core/styles/Alert.css';
    Anchor
    import '@mantine/core/styles/Anchor.css';
    Affix
    import '@mantine/core/styles/Affix.css';
    AppShell
    import '@mantine/core/styles/AppShell.css';
    AspectRatio
    import '@mantine/core/styles/AspectRatio.css';
    Avatar
    import '@mantine/core/styles/Avatar.css';
    Badge
    import '@mantine/core/styles/Badge.css';
    Blockquote
    import '@mantine/core/styles/Blockquote.css';
    Breadcrumbs
    import '@mantine/core/styles/Breadcrumbs.css';
    BackgroundImage
    import '@mantine/core/styles/BackgroundImage.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';
    Code
    import '@mantine/core/styles/Code.css';
    ColorInput
    import '@mantine/core/styles/ColorInput.css';
    CloseButton
    import '@mantine/core/styles/CloseButton.css';
    ColorSwatch
    import '@mantine/core/styles/ColorSwatch.css';
    ColorPicker
    import '@mantine/core/styles/ColorPicker.css';
    Container
    import '@mantine/core/styles/Container.css';
    Combobox
    import '@mantine/core/styles/Combobox.css';
    Dialog
    import '@mantine/core/styles/Dialog.css';
    Fieldset
    import '@mantine/core/styles/Fieldset.css';
    Drawer
    import '@mantine/core/styles/Drawer.css';
    Divider
    import '@mantine/core/styles/Divider.css';
    Flex
    import '@mantine/core/styles/Flex.css';
    FloatingIndicator
    import '@mantine/core/styles/FloatingIndicator.css';
    Grid
    import '@mantine/core/styles/Grid.css';
    Group
    import '@mantine/core/styles/Group.css';
    Image
    import '@mantine/core/styles/Image.css';
    Indicator
    import '@mantine/core/styles/Indicator.css';
    Input
    import '@mantine/core/styles/Input.css';
    InlineInput
    import '@mantine/core/styles/InlineInput.css';
    Kbd
    import '@mantine/core/styles/Kbd.css';
    Loader
    import '@mantine/core/styles/Loader.css';
    Mark
    import '@mantine/core/styles/Mark.css';
    List
    import '@mantine/core/styles/List.css';
    LoadingOverlay
    import '@mantine/core/styles/LoadingOverlay.css';
    Modal
    import '@mantine/core/styles/Modal.css';
    Menu
    import '@mantine/core/styles/Menu.css';
    ModalBase
    import '@mantine/core/styles/ModalBase.css';
    NavLink
    import '@mantine/core/styles/NavLink.css';
    Notification
    import '@mantine/core/styles/Notification.css';
    Pagination
    import '@mantine/core/styles/Pagination.css';
    NumberInput
    import '@mantine/core/styles/NumberInput.css';
    Overlay
    import '@mantine/core/styles/Overlay.css';
    Paper
    import '@mantine/core/styles/Paper.css';
    PillsInput
    import '@mantine/core/styles/PillsInput.css';
    PasswordInput
    import '@mantine/core/styles/PasswordInput.css';
    Pill
    import '@mantine/core/styles/Pill.css';
    PinInput
    import '@mantine/core/styles/PinInput.css';
    Popover
    import '@mantine/core/styles/Popover.css';
    Progress
    import '@mantine/core/styles/Progress.css';
    Radio
    import '@mantine/core/styles/Radio.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.css';
    Rating
    import '@mantine/core/styles/Rating.css';
    ScrollArea
    import '@mantine/core/styles/ScrollArea.css';
    SimpleGrid
    import '@mantine/core/styles/SimpleGrid.css';
    Skeleton
    import '@mantine/core/styles/Skeleton.css';
    SegmentedControl
    import '@mantine/core/styles/SegmentedControl.css';
    Slider
    import '@mantine/core/styles/Slider.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.css';
    Stack
    import '@mantine/core/styles/Stack.css';
    Table
    import '@mantine/core/styles/Table.css';
    Stepper
    import '@mantine/core/styles/Stepper.css';
    Switch
    import '@mantine/core/styles/Switch.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';
    Tooltip
    import '@mantine/core/styles/Tooltip.css';
    Title
    import '@mantine/core/styles/Title.css';
    Tree
    import '@mantine/core/styles/Tree.css';
    TypographyStylesProvider
    import '@mantine/core/styles/TypographyStylesProvider.css';
    UnstyledButton
    import '@mantine/core/styles/UnstyledButton.css';
    VisuallyHidden
    import '@mantine/core/styles/VisuallyHidden.css';
    CheckboxCard
    import '@mantine/core/styles/CheckboxCard.css';
    CheckboxIndicator
    import '@mantine/core/styles/CheckboxIndicator.css';
    RadioCard
    import '@mantine/core/styles/RadioCard.css';
    RadioIndicator
    import '@mantine/core/styles/RadioIndicator.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 fc61ed3da8d..f2f9df97423 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 e8190a662c7..5cb2e8f7c28 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-color-schemelight dark
    --mantine-webkit-font-smoothingantialiased
    --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)

    Previous

    CSS variables

    Next

    rem, em and px units

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow 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-color-schemelight dark
    --mantine-webkit-font-smoothingantialiased
    --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)

    Previous

    CSS variables

    Next

    rem, em and px units

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 aff86d4aea9..195b55d5d77 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.

    @@ -448,4 +448,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 9958655e8df..6cfdae41b29 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/emotion/index.html b/styles/emotion/index.html index 66485a3a88e..4bb270598de 100644 --- a/styles/emotion/index.html +++ b/styles/emotion/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } 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 Emotion

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

    Usage with Emotion

    Prior to version 7.0 Mantine used Emotion as a styling solution. It was replaced with CSS modules in version 7.0, but you can still use Emotion with Mantine if you prefer it over CSS modules.

    @@ -780,4 +780,4 @@ [u.rtl]: { padding: 10 }, [u.smallerThan('md')]: { lineHeight: 20 }, }, -};

    Previous

    PostCSS preset

    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

    PostCSS preset

    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/global-styles/index.html b/styles/global-styles/index.html index 34d3bc8260c..f9516326823 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 44c4c3fd098..de7c30d86d4 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 587aacaed99..ddc2a5ebdf6 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.

    @@ -311,4 +311,4 @@ 
    .demo {
   @mixin clearfix;
   @mixin circle 100px;
-}

    Previous

    CSS modules

    Next

    Usage with Emotion

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on TwitterFollow on 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 ec70abfaef4..625ccb6cfd7 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. @@ -115,4 +115,4 @@ autoRem: true, }, }, -};

    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 a899077044b..01f80571f14 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);
@@ -266,4 +266,4 @@
   .element {
     width: 40rem;
   }
-}

    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 c40657282fd..b3517b2976a 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.

    @@ -81,4 +81,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 0f9dc4b574c..7ab7d35429e 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

    Usage with Emotion

    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

    Usage with Emotion

    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 5fc9d0471cc..3ec91874abb 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.

    @@ -124,4 +124,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 0ab009d3340..4d307bc592a 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 76b11f27af4..0867710b6e3 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 7209aaa9c22..2aa59d4bf54 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 368df5dc732..3701bdb68da 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 4fb7c970a75..6957c3f09ff 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 @@ -70,4 +70,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 158296fa2d8..3c99ac31a04 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 86defd94274..bd968db524b 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 8006b94917e..c7306733570 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 25e31aefb7c..1652729e4b2 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 093e08d6ce3..298d5a28eb4 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 822f9ffe252..b39b332af2e 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, @@ -442,4 +442,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 baf0f072d3d..f5a80033330 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 795e52c2026..cc30264765b 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 3cf26c8e85b..3c6baac39a8 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.

    @@ -241,4 +241,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 f343f92c3c3..96e32062664 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:
@@ -481,4 +481,4 @@
 
 export const theme = mergeMantineTheme(DEFAULT_THEME, themeOverride);

    Then your will be able to import it anywhere in your application:

    -
    import { theme } from './theme';

    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';

    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 be4c7118afe..6a14dca35c0 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 70aaaa44d28..3c67e77561d 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';
    @@ -488,4 +488,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 d6944e312c5..6ead723ddaa 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';
    @@ -413,4 +413,4 @@ . 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 cfc2551a00f..beecf28385e 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';
    @@ -325,4 +325,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 19f359a803c..091db280448 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:

    @@ -277,4 +277,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 e6be5a8febb..247308c7e3e 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 0e9ef61e90b..303f4a90bab 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 4513e0a30a6..4632947e0fa 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';
    @@ -381,4 +381,4 @@ </div> </> ); -}

    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 +}

    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 4e2b1385f05..0598c86838d 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:

    @@ -842,4 +842,4 @@ colorPickerPalette: 'Color palette', colorPickerSave: 'Save', colorPickerColorLabel: (color) => `Set text color ${color}`, -};

    Previous

    Modals manager

    Next

    Version v7.10.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.10.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