From 237e16f75171faae6d66b9ca93956d1b258cffb5 Mon Sep 17 00:00:00 2001 From: Vitaly Rtishchev Date: Wed, 23 Oct 2024 20:15:39 +0400 Subject: [PATCH] Updates --- 404.html | 4 +- 404/index.html | 4 +- ...11a93e1bd.js => 18738-e3fdf80fddfa2f79.js} | 2 +- ...59c320163.js => 61324-e85fd15080090d13.js} | 2 +- ...628818346.js => 76124-f2d71a58b8a4a91c.js} | 2 +- ...1fd1b9d559.js => _app-5d0501ee30e25798.js} | 2 +- ...s => date-time-picker-9773bb5f487b96ad.js} | 4 +- ...=> month-picker-input-708d369fcbcdea9f.js} | 2 +- ... => year-picker-input-8a2d23fedd16630b.js} | 2 +- .../pages/guides/next-42adb0503dcd5c6a.js | 1 - .../pages/guides/next-8f6faa0f438214b2.js | 1 + ....js => css-files-list-7a6c288d9484dc58.js} | 2 +- .../_buildManifest.js | 2 +- .../_ssgManifest.js | 0 about/index.html | 4 +- app-shell/index.html | 2 +- changelog/7-0-0/index.html | 4 +- changelog/7-1-0/index.html | 4 +- changelog/7-10-0/index.html | 4 +- changelog/7-11-0/index.html | 4 +- changelog/7-12-0/index.html | 4 +- changelog/7-13-0/index.html | 4 +- changelog/7-2-0/index.html | 4 +- changelog/7-3-0/index.html | 4 +- changelog/7-4-0/index.html | 4 +- changelog/7-5-0/index.html | 6 +- changelog/7-6-0/index.html | 4 +- changelog/7-7-0/index.html | 4 +- changelog/7-8-0/index.html | 4 +- changelog/7-9-0/index.html | 4 +- changelog/all-releases/index.html | 4 +- changelog/previous-versions/index.html | 4 +- charts/area-chart/index.html | 4 +- charts/bar-chart/index.html | 4 +- charts/bubble-chart/index.html | 4 +- charts/composite-chart/index.html | 4 +- charts/donut-chart/index.html | 4 +- charts/getting-started/index.html | 4 +- charts/line-chart/index.html | 4 +- charts/pie-chart/index.html | 4 +- charts/radar-chart/index.html | 4 +- charts/scatter-chart/index.html | 4 +- charts/sparkline/index.html | 4 +- colors-generator/index.html | 4 +- combobox/index.html | 2 +- contribute/index.html | 4 +- core/accordion/index.html | 4 +- core/action-icon/index.html | 4 +- core/affix/index.html | 4 +- core/alert/index.html | 4 +- core/anchor/index.html | 4 +- core/app-shell/index.html | 4 +- core/aspect-ratio/index.html | 4 +- core/autocomplete/index.html | 4 +- core/avatar/index.html | 4 +- core/background-image/index.html | 4 +- core/badge/index.html | 4 +- core/blockquote/index.html | 4 +- core/box/index.html | 4 +- core/breadcrumbs/index.html | 4 +- core/burger/index.html | 4 +- core/button/index.html | 4 +- core/card/index.html | 4 +- core/center/index.html | 4 +- core/checkbox/index.html | 4 +- core/chip/index.html | 4 +- core/close-button/index.html | 4 +- core/code/index.html | 4 +- core/collapse/index.html | 4 +- core/color-input/index.html | 4 +- core/color-picker/index.html | 4 +- core/color-swatch/index.html | 4 +- core/combobox/index.html | 4 +- core/container/index.html | 4 +- core/copy-button/index.html | 4 +- core/dialog/index.html | 4 +- core/divider/index.html | 4 +- core/drawer/index.html | 4 +- core/fieldset/index.html | 4 +- core/file-button/index.html | 4 +- core/file-input/index.html | 4 +- core/flex/index.html | 4 +- core/floating-indicator/index.html | 4 +- core/focus-trap/index.html | 4 +- core/grid/index.html | 4 +- core/group/index.html | 4 +- core/highlight/index.html | 4 +- core/hover-card/index.html | 4 +- core/image/index.html | 4 +- core/indicator/index.html | 4 +- core/input/index.html | 4 +- core/json-input/index.html | 4 +- core/kbd/index.html | 4 +- core/list/index.html | 4 +- core/loader/index.html | 4 +- core/loading-overlay/index.html | 4 +- core/mark/index.html | 4 +- core/menu/index.html | 4 +- core/modal/index.html | 4 +- core/multi-select/index.html | 4 +- core/native-select/index.html | 4 +- core/nav-link/index.html | 4 +- core/notification/index.html | 4 +- core/number-formatter/index.html | 4 +- core/number-input/index.html | 4 +- core/overlay/index.html | 4 +- core/pagination/index.html | 6 +- core/paper/index.html | 4 +- core/password-input/index.html | 4 +- core/pill/index.html | 4 +- core/pills-input/index.html | 4 +- core/pin-input/index.html | 4 +- core/popover/index.html | 4 +- core/portal/index.html | 4 +- core/progress/index.html | 4 +- core/radio/index.html | 4 +- core/rating/index.html | 4 +- core/ring-progress/index.html | 4 +- core/scroll-area/index.html | 4 +- core/segmented-control/index.html | 4 +- core/select/index.html | 4 +- core/semi-circle-progress/index.html | 4 +- core/simple-grid/index.html | 4 +- core/skeleton/index.html | 4 +- core/slider/index.html | 4 +- core/space/index.html | 4 +- core/spoiler/index.html | 4 +- core/stack/index.html | 4 +- core/stepper/index.html | 4 +- core/switch/index.html | 4 +- core/table/index.html | 4 +- core/tabs/index.html | 4 +- core/tags-input/index.html | 4 +- core/text-input/index.html | 4 +- core/text/index.html | 4 +- core/textarea/index.html | 4 +- core/theme-icon/index.html | 4 +- core/timeline/index.html | 4 +- core/title/index.html | 4 +- core/tooltip/index.html | 4 +- core/transition/index.html | 4 +- core/tree/index.html | 4 +- core/typography-styles-provider/index.html | 4 +- core/unstyled-button/index.html | 4 +- core/visually-hidden/index.html | 4 +- dates/calendar/index.html | 12 +- dates/date-input/index.html | 6 +- dates/date-picker-input/index.html | 6 +- dates/date-picker/index.html | 38 +- dates/date-time-picker/index.html | 6 +- dates/dates-provider/index.html | 4 +- dates/getting-started/index.html | 6 +- dates/month-picker-input/index.html | 6 +- dates/month-picker/index.html | 4 +- dates/time-input/index.html | 4 +- dates/year-picker-input/index.html | 6 +- dates/year-picker/index.html | 4 +- form/actions/index.html | 4 +- form/create-form-context/index.html | 4 +- form/errors/index.html | 4 +- form/get-input-props/index.html | 4 +- form/nested/index.html | 4 +- form/recipes/index.html | 6 +- form/schema-validation/index.html | 4 +- form/status/index.html | 4 +- form/uncontrolled/index.html | 4 +- form/use-field/index.html | 4 +- form/use-form/index.html | 4 +- form/validation/index.html | 4 +- form/validators/index.html | 4 +- form/values/index.html | 4 +- getting-started/index.html | 4 +- guides/6x-to-7x/index.html | 4 +- guides/functions-reference/index.html | 4 +- guides/gatsby/index.html | 4 +- guides/icons/index.html | 4 +- guides/javascript/index.html | 4 +- guides/jest/index.html | 4 +- guides/next/index.html | 25 +- guides/polymorphic/index.html | 4 +- guides/redwood/index.html | 4 +- guides/remix/index.html | 4 +- guides/storybook/index.html | 4 +- guides/typescript/index.html | 4 +- guides/vite/index.html | 4 +- guides/vitest/index.html | 4 +- hooks/use-click-outside/index.html | 4 +- hooks/use-clipboard/index.html | 4 +- hooks/use-color-scheme/index.html | 4 +- hooks/use-counter/index.html | 4 +- hooks/use-debounced-callback/index.html | 4 +- hooks/use-debounced-state/index.html | 4 +- hooks/use-debounced-value/index.html | 4 +- hooks/use-did-update/index.html | 4 +- hooks/use-disclosure/index.html | 4 +- hooks/use-document-title/index.html | 4 +- hooks/use-document-visibility/index.html | 4 +- hooks/use-element-size/index.html | 4 +- hooks/use-event-listener/index.html | 4 +- hooks/use-eye-dropper/index.html | 4 +- hooks/use-favicon/index.html | 4 +- hooks/use-fetch/index.html | 4 +- hooks/use-focus-return/index.html | 4 +- hooks/use-focus-trap/index.html | 4 +- hooks/use-focus-within/index.html | 4 +- hooks/use-force-update/index.html | 6 +- hooks/use-fullscreen/index.html | 4 +- hooks/use-hash/index.html | 4 +- hooks/use-headroom/index.html | 4 +- hooks/use-hotkeys/index.html | 4 +- hooks/use-hover/index.html | 4 +- hooks/use-id/index.html | 4 +- hooks/use-idle/index.html | 4 +- hooks/use-in-viewport/index.html | 4 +- hooks/use-input-state/index.html | 4 +- hooks/use-intersection/index.html | 4 +- hooks/use-interval/index.html | 4 +- hooks/use-is-first-render/index.html | 4 +- hooks/use-isomorphic-effect/index.html | 4 +- hooks/use-list-state/index.html | 4 +- hooks/use-local-storage/index.html | 4 +- hooks/use-logger/index.html | 4 +- hooks/use-map/index.html | 4 +- hooks/use-media-query/index.html | 4 +- hooks/use-merged-ref/index.html | 4 +- hooks/use-mounted/index.html | 4 +- hooks/use-mouse/index.html | 4 +- hooks/use-move/index.html | 4 +- hooks/use-mutation-observer/index.html | 4 +- hooks/use-network/index.html | 4 +- hooks/use-orientation/index.html | 4 +- hooks/use-os/index.html | 4 +- hooks/use-page-leave/index.html | 4 +- hooks/use-pagination/index.html | 4 +- hooks/use-previous/index.html | 4 +- hooks/use-queue/index.html | 4 +- hooks/use-reduced-motion/index.html | 4 +- hooks/use-resize-observer/index.html | 4 +- hooks/use-scroll-into-view/index.html | 4 +- hooks/use-set-state/index.html | 4 +- hooks/use-set/index.html | 4 +- hooks/use-shallow-effect/index.html | 4 +- hooks/use-state-history/index.html | 4 +- hooks/use-text-selection/index.html | 4 +- hooks/use-throttled-callback/index.html | 4 +- hooks/use-throttled-state/index.html | 4 +- hooks/use-throttled-value/index.html | 4 +- hooks/use-timeout/index.html | 4 +- hooks/use-toggle/index.html | 4 +- hooks/use-uncontrolled/index.html | 4 +- hooks/use-validated-state/index.html | 4 +- hooks/use-viewport-size/index.html | 4 +- hooks/use-window-event/index.html | 4 +- hooks/use-window-scroll/index.html | 4 +- index.html | 4 +- others/carousel/index.html | 2 +- others/code-highlight/index.html | 2 +- others/dropzone/index.html | 2 +- others/modals/index.html | 2 +- others/notifications/index.html | 2 +- others/nprogress/index.html | 2 +- others/spotlight/index.html | 2 +- others/tiptap/index.html | 2 +- overview/index.html | 4 +- sitemap.xml | 580 +++++++++--------- styles/color-functions/index.html | 4 +- styles/css-files-list/index.html | 4 +- styles/css-modules/index.html | 4 +- styles/css-variables-list/index.html | 4 +- styles/css-variables/index.html | 4 +- styles/data-attributes/index.html | 4 +- styles/emotion/index.html | 4 +- styles/global-styles/index.html | 4 +- styles/mantine-styles/index.html | 4 +- styles/postcss-preset/index.html | 4 +- styles/rem/index.html | 4 +- styles/responsive/index.html | 4 +- styles/rtl/index.html | 4 +- styles/sass/index.html | 4 +- styles/style-props/index.html | 4 +- styles/style/index.html | 4 +- styles/styles-api/index.html | 4 +- styles/styles-overview/index.html | 4 +- styles/styles-performance/index.html | 4 +- styles/unstyled/index.html | 4 +- styles/vanilla-extract/index.html | 4 +- styles/variants-sizes/index.html | 4 +- submit-template/index.html | 4 +- templates-usage/index.html | 4 +- theming/color-schemes/index.html | 4 +- theming/colors/index.html | 4 +- theming/default-props/index.html | 4 +- theming/default-theme/index.html | 4 +- theming/mantine-provider/index.html | 4 +- theming/theme-object/index.html | 4 +- theming/typography/index.html | 4 +- x/carousel/index.html | 4 +- x/code-highlight/index.html | 4 +- x/dropzone/index.html | 4 +- x/modals/index.html | 4 +- x/notifications/index.html | 4 +- x/nprogress/index.html | 4 +- x/spotlight/index.html | 4 +- x/tiptap/index.html | 4 +- 304 files changed, 910 insertions(+), 919 deletions(-) rename _next/static/chunks/{18738-18fb21c11a93e1bd.js => 18738-e3fdf80fddfa2f79.js} (52%) rename _next/static/chunks/{61324-4b6c10a59c320163.js => 61324-e85fd15080090d13.js} (67%) rename _next/static/chunks/{76124-d69825d628818346.js => 76124-f2d71a58b8a4a91c.js} (78%) rename _next/static/chunks/pages/{_app-064da61fd1b9d559.js => _app-5d0501ee30e25798.js} (85%) rename _next/static/chunks/pages/dates/{date-time-picker-d4847175249474ec.js => date-time-picker-9773bb5f487b96ad.js} (73%) rename _next/static/chunks/pages/dates/{month-picker-input-8ddcea75b3345e88.js => month-picker-input-708d369fcbcdea9f.js} (86%) rename _next/static/chunks/pages/dates/{year-picker-input-2bda76567cfcae0b.js => year-picker-input-8a2d23fedd16630b.js} (82%) delete mode 100644 _next/static/chunks/pages/guides/next-42adb0503dcd5c6a.js create mode 100644 _next/static/chunks/pages/guides/next-8f6faa0f438214b2.js rename _next/static/chunks/pages/styles/{css-files-list-c857e0178ecda28b.js => css-files-list-7a6c288d9484dc58.js} (85%) rename _next/static/{vJ5oG_rs2ZeLBCul9jcuK => d_34EqhCvHopvGy1yGXA8}/_buildManifest.js (97%) rename _next/static/{vJ5oG_rs2ZeLBCul9jcuK => d_34EqhCvHopvGy1yGXA8}/_ssgManifest.js (100%) diff --git a/404.html b/404.html index 60a33ba58d6..730c6b93112 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 XFollow 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 XFollow on 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 60a33ba58d6..730c6b93112 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 XFollow 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 XFollow on 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/18738-18fb21c11a93e1bd.js b/_next/static/chunks/18738-e3fdf80fddfa2f79.js similarity index 52% rename from _next/static/chunks/18738-18fb21c11a93e1bd.js rename to _next/static/chunks/18738-e3fdf80fddfa2f79.js index b18c1829867..75abcb03d87 100644 --- a/_next/static/chunks/18738-18fb21c11a93e1bd.js +++ b/_next/static/chunks/18738-e3fdf80fddfa2f79.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[18738],{9882:function(e,t,n){n.d(t,{M:function(){return a}});function a(e){let{maxLevel:t,minLevel:n,defaultLevel:a,level:r,onLevelChange:l,nextIcon:i,previousIcon:s,date:u,defaultDate:o,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:m,onYearSelect:p,onMonthSelect:g,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:D,onPreviousMonth:S,onNextYear:h,onPreviousYear:_,onNextDecade:k,onPreviousDecade:C,withCellSpacing:j,highlightToday:A,__updateDateOnYearSelect:P,__updateDateOnMonthSelect:b,firstDayOfWeek:x,weekdayFormat:w,weekendDays:I,getDayProps:T,excludeDate:z,renderDay:M,hideOutsideDates:N,hideWeekdays:B,getDayAriaLabel:$,monthLabelFormat:O,monthsListFormat:L,getMonthControlProps:E,yearLabelFormat:F,yearsListFormat:Y,getYearControlProps:J,decadeLabelFormat:R,allowSingleDateInRange:q,allowDeselect:H,minDate:W,maxDate:Z,locale:G,...K}=e;return{calendarProps:{maxLevel:t,minLevel:n,defaultLevel:a,level:r,onLevelChange:l,nextIcon:i,previousIcon:s,date:u,defaultDate:o,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:m,onYearSelect:p,onMonthSelect:g,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:D,onPreviousMonth:S,onNextYear:h,onPreviousYear:_,onNextDecade:k,onPreviousDecade:C,withCellSpacing:j,highlightToday:A,__updateDateOnYearSelect:P,__updateDateOnMonthSelect:b,firstDayOfWeek:x,weekdayFormat:w,weekendDays:I,getDayProps:T,excludeDate:z,renderDay:M,hideOutsideDates:N,hideWeekdays:B,getDayAriaLabel:$,monthLabelFormat:O,monthsListFormat:L,getMonthControlProps:E,yearLabelFormat:F,yearsListFormat:Y,getYearControlProps:J,decadeLabelFormat:R,allowSingleDateInRange:q,allowDeselect:H,minDate:W,maxDate:Z,locale:G},others:K}}},95488:function(e,t,n){n.d(t,{M:function(){return f}});var a=n(52322),r=n(82027),l=n(38483),i=n(51477),s=n(82083),u=n(46766);n(28879);var o=n(51235);n(2784);var c=n(11204);let d={type:"default",defaultLevel:"month",numberOfColumns:1},f=(0,r.d5)((e,t)=>{let n=(0,l.w)("DatePicker",d,e),{classNames:r,styles:f,vars:m,type:p,defaultValue:g,value:y,onChange:v,__staticSelector:D,getDayProps:S,allowSingleDateInRange:h,allowDeselect:_,onMouseLeave:k,numberOfColumns:C,hideOutsideDates:j,__onDayMouseEnter:A,__onDayClick:P,__timezoneApplied:b,...x}=n,{onDateChange:w,onRootMouseLeave:I,onHoveredDateChange:T,getControlProps:z}=(0,s.D)({type:p,level:"day",allowDeselect:_,allowSingleDateInRange:h,value:y,defaultValue:g,onChange:v,onMouseLeave:k,applyTimezone:!b}),{resolvedClassNames:M,resolvedStyles:N}=(0,i.h)({classNames:r,styles:f,props:n}),B=(0,u.e)();return(0,a.jsx)(c.f,{ref:t,minLevel:"month",classNames:M,styles:N,__staticSelector:D||"DatePicker",onMouseLeave:I,numberOfColumns:C,hideOutsideDates:j??1!==C,__onDayMouseEnter:(e,t)=>{T(t),A?.(e,t)},__onDayClick:(e,t)=>{w(t),P?.(e,t)},getDayProps:e=>({...z(e),...S?.(e)}),...x,date:(0,o.w)("add",x.date,B.getTimezone(),b),__timezoneApplied:!0})});f.classes=c.f.classes,f.displayName="@mantine/dates/DatePicker"},18738:function(e,t,n){n.d(t,{a:function(){return g}});var a=n(52322),r=n(82027),l=n(38483),i=n(51477);n(28879),n(2784);var s=n(46766),u=n(93893),o=n(51235),c=n(26005),d=n(9882),f=n(95488),m=n(71686);let p={type:"default",valueFormat:"MMMM D, YYYY",closeOnChange:!0,sortDates:!0,dropdownType:"popover"},g=(0,r.d5)((e,t)=>{let n=(0,l.w)("DatePickerInput",p,e),{type:r,value:g,defaultValue:y,onChange:v,valueFormat:D,labelSeparator:S,locale:h,classNames:_,styles:k,unstyled:C,closeOnChange:j,size:A,variant:P,dropdownType:b,sortDates:x,minDate:w,maxDate:I,vars:T,defaultDate:z,valueFormatter:M,...N}=n,{resolvedClassNames:B,resolvedStyles:$}=(0,i.h)({classNames:_,styles:k,props:n}),{calendarProps:O,others:L}=(0,d.M)(N),{_value:E,setValue:F,formattedValue:Y,dropdownHandlers:J,dropdownOpened:R,onClear:q,shouldClear:H}=(0,c.u)({type:r,value:g,defaultValue:y,onChange:v,locale:h,format:D,labelSeparator:S,closeOnChange:j,sortDates:x,valueFormatter:M}),W=Array.isArray(E)?E[0]||z:E||z,Z=(0,s.e)();return(0,a.jsx)(m.i,{formattedValue:Y,dropdownOpened:R,dropdownHandlers:J,classNames:B,styles:$,unstyled:C,ref:t,onClear:q,shouldClear:H,value:E,size:A,variant:P,dropdownType:b,...L,type:r,__staticSelector:"DatePickerInput",children:(0,a.jsx)(f.M,{...O,size:A,variant:P,type:r,value:E,defaultDate:W||(0,u.S)({maxDate:I,minDate:w,timezone:Z.getTimezone()}),onChange:F,locale:h,classNames:B,styles:$,unstyled:C,__staticSelector:"DatePickerInput",__stopPropagation:"popover"===b,minDate:w,maxDate:I,date:(0,o.w)("add",O.date,Z.getTimezone()),__timezoneApplied:!0})})});g.classes={...m.i.classes,...f.M.classes},g.displayName="@mantine/dates/DatePickerInput"},20228:function(e,t,n){n.d(t,{n:function(){return i}});var a=n(52322);n(28879);var r=n(51235),l=n(46766);function i({value:e,type:t,name:n,form:i}){return(0,a.jsx)("input",{type:"hidden",value:function(e,t){let n=(0,l.e)(),a=e=>(0,r.w)("remove",e,n.getTimezone()).toISOString();if("range"===t&&Array.isArray(e)){let[t,n]=e;return t?n?`${a(t)} \u2013 ${a(n)}`:`${a(t)} \u2013`:""}return"multiple"===t&&Array.isArray(e)?e.map(e=>e&&a(e)).filter(Boolean).join(", "):!Array.isArray(e)&&e?a(e):""}(e,t),name:n,form:i})}i.displayName="@mantine/dates/HiddenDatesInput"},71686:function(e,t,n){n.d(t,{i:function(){return p}});var a=n(52322),r=n(40489),l=n(82027),i=n(7140),s=n(2670),u=n(78222),o=n(6941),c=n(50205),d=n(20228),f={input:"m_6fa5e2aa"};let m={},p=(0,l.d5)((e,t)=>{let{inputProps:n,wrapperProps:l,placeholder:p,classNames:g,styles:y,unstyled:v,popoverProps:D,modalProps:S,dropdownType:h,children:_,formattedValue:k,dropdownHandlers:C,dropdownOpened:j,onClick:A,clearable:P,onClear:b,clearButtonProps:x,rightSection:w,shouldClear:I,readOnly:T,disabled:z,value:M,name:N,form:B,type:$,...O}=(0,i.k)("PickerInputBase",m,e),L=w||(P&&I&&!T&&!z?(0,a.jsx)(s.P,{variant:"transparent",onClick:b,unstyled:v,size:n.size||"sm",...x}):null),E=()=>{"range"===$&&Array.isArray(M)&&M[0]&&!M[1]&&b(),C.close()};return(0,a.jsxs)(a.Fragment,{children:["modal"===h&&!T&&(0,a.jsx)(u.u,{opened:j,onClose:E,withCloseButton:!1,size:"auto","data-dates-modal":!0,unstyled:v,...S,children:_}),(0,a.jsx)(o.I.Wrapper,{...l,children:(0,a.jsxs)(c.J,{position:"bottom-start",opened:j,trapFocus:!0,returnFocus:!0,unstyled:v,...D,disabled:D?.disabled||"modal"===h||T,onClose:()=>{D?.onClose?.(),E()},children:[(0,a.jsx)(c.J.Target,{children:(0,a.jsx)(o.I,{"data-dates-input":!0,"data-read-only":T||void 0,disabled:z,component:"button",type:"button",multiline:!0,onClick:e=>{A?.(e),C.toggle()},rightSection:L,...n,ref:t,classNames:{...g,input:(0,r.Z)(f.input,g?.input)},...O,children:k||(0,a.jsx)(o.I.Placeholder,{error:n.error,unstyled:v,className:g?.placeholder,style:y?.placeholder,children:p})})}),(0,a.jsx)(c.J.Dropdown,{"data-dates-dropdown":!0,children:_})]})}),(0,a.jsx)(d.n,{value:M,name:N,form:B,type:$})]})});p.classes=f,p.displayName="@mantine/dates/PickerInputBase"},26005:function(e,t,n){n.d(t,{u:function(){return s}});var a=n(3900),r=n(46766),l=n(28879),i=n(93141);function s({type:e,value:t,defaultValue:n,onChange:s,locale:u,format:o,closeOnChange:c,sortDates:d,labelSeparator:f,valueFormatter:m}){let p=(0,r.e)(),[g,y]=(0,a.q)(!1),[v,D]=(0,i.l)({type:e,value:t,defaultValue:n,onChange:s}),S=function({formatter:e,...t}){return(e||function({type:e,date:t,locale:n,format:a,labelSeparator:r}){let i=e=>l(e).locale(n).format(a);if("default"===e)return null===t?"":i(t);if("multiple"===e)return t.map(i).join(", ");if("range"===e&&Array.isArray(t)){if(t[0]&&t[1])return`${i(t[0])} ${r} ${i(t[1])}`;if(t[0])return`${i(t[0])} ${r} `}return""})(t)}({type:e,date:v,locale:p.getLocale(u),format:o,labelSeparator:p.getLabelSeparator(f),formatter:m}),h=t=>{c&&("default"===e&&y.close(),"range"===e&&t[0]&&t[1]&&y.close()),d&&"multiple"===e?D([...t].sort((e,t)=>e.getTime()-t.getTime())):D(t)},_="range"===e?!!v[0]:"multiple"===e?v.length>0:null!==v;return{_value:v,setValue:h,onClear:()=>h("range"===e?[null,null]:"multiple"===e?[]:null),shouldClear:_,formattedValue:S,dropdownOpened:g,dropdownHandlers:y}}},82083:function(e,t,n){n.d(t,{D:function(){return s}});var a=n(28879),r=n(2784),l=n(93141);function i(e,t){let n=[...t].sort((e,t)=>e.getTime()-t.getTime());return a(n[0]).startOf("day").subtract(1,"ms").isBefore(e)&&a(n[1]).endOf("day").add(1,"ms").isAfter(e)}function s({type:e,level:t,value:n,defaultValue:s,onChange:u,allowSingleDateInRange:o,allowDeselect:c,onMouseLeave:d,applyTimezone:f=!0}){let[m,p]=(0,l.l)({type:e,value:n,defaultValue:s,onChange:u,applyTimezone:f}),[g,y]=(0,r.useState)("range"===e&&m[0]&&!m[1]?m[0]:null),[v,D]=(0,r.useState)(null),S=e=>g instanceof Date&&v instanceof Date?i(e,[v,g]):m[0]instanceof Date&&m[1]instanceof Date&&i(e,m),h="range"===e?e=>{d?.(e),D(null)}:d,_=e=>m[0]instanceof Date&&!!a(e).isSame(m[0],t)&&!(v&&a(v).isBefore(m[0])),k=e=>m[1]instanceof Date?a(e).isSame(m[1],t):m[0]instanceof Date&&!!v&&a(v).isBefore(m[0])&&a(e).isSame(m[0],t),C="range"===e&&g?D:()=>{};return(0,r.useEffect)(()=>{if("range"!==e)return;let t=null==m[0]&&null==m[1],n=null!=m[0]&&null!=m[1];(t||n)&&(y(null),D(null))},[m]),{onDateChange:n=>{if("range"===e){if(g instanceof Date&&!m[1]){if(a(n).isSame(g,t)&&!o){y(null),D(null),p([null,null]);return}let e=[n,g];e.sort((e,t)=>e.getTime()-t.getTime()),p(e),D(null),y(null);return}if(m[0]&&!m[1]&&a(n).isSame(m[0],t)&&!o){y(null),D(null),p([null,null]);return}p([n,null]),D(null),y(n);return}if("multiple"===e){m.some(e=>a(e).isSame(n,t))?p(m.filter(e=>!a(e).isSame(n,t))):p([...m,n]);return}m&&c&&a(n).isSame(m,t)?p(null):p(n)},onRootMouseLeave:h,onHoveredDateChange:C,getControlProps:n=>{if("range"===e)return{selected:m.some(e=>e&&a(e).isSame(n,t)),inRange:S(n),firstInRange:_(n),lastInRange:k(n),"data-autofocus":!!m[0]&&a(m[0]).isSame(n,t)||void 0};if("multiple"===e)return{selected:m.some(e=>e&&a(e).isSame(n,t)),"data-autofocus":!!m[0]&&a(m[0]).isSame(n,t)||void 0};let r=a(m).isSame(n,t);return{selected:r,"data-autofocus":r||void 0}},_value:m,setValue:p}}},93893:function(e,t,n){n.d(t,{S:function(){return l}});var a=n(28879),r=n(51235);function l({minDate:e,maxDate:t,timezone:n}){let l=(0,r.w)("add",new Date,n);return e||t?e&&a(l).isBefore(e)?e:t&&a(l).isAfter(t)?t:l:l}},3900:function(e,t,n){n.d(t,{q:function(){return r}});var a=n(2784);function r(e=!1,t){let{onOpen:n,onClose:r}=t||{},[l,i]=(0,a.useState)(e),s=(0,a.useCallback)(()=>{i(e=>e||(n?.(),!0))},[n]),u=(0,a.useCallback)(()=>{i(e=>e?(r?.(),!1):e)},[r]),o=(0,a.useCallback)(()=>{l?u():s()},[u,s,l]);return[l,{open:s,close:u,toggle:o}]}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[18738],{9882:function(e,t,n){n.d(t,{M:function(){return a}});function a(e){let{maxLevel:t,minLevel:n,defaultLevel:a,level:r,onLevelChange:l,nextIcon:i,previousIcon:s,date:u,defaultDate:o,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:m,onYearSelect:p,onMonthSelect:g,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:D,onPreviousMonth:h,onNextYear:S,onPreviousYear:_,onNextDecade:k,onPreviousDecade:C,withCellSpacing:j,highlightToday:A,__updateDateOnYearSelect:P,__updateDateOnMonthSelect:b,firstDayOfWeek:x,weekdayFormat:w,weekendDays:I,getDayProps:T,excludeDate:z,renderDay:M,hideOutsideDates:N,hideWeekdays:B,getDayAriaLabel:$,monthLabelFormat:O,monthsListFormat:L,getMonthControlProps:E,yearLabelFormat:F,yearsListFormat:Y,getYearControlProps:J,decadeLabelFormat:R,allowSingleDateInRange:q,allowDeselect:H,minDate:W,maxDate:Z,locale:G,...K}=e;return{calendarProps:{maxLevel:t,minLevel:n,defaultLevel:a,level:r,onLevelChange:l,nextIcon:i,previousIcon:s,date:u,defaultDate:o,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:m,onYearSelect:p,onMonthSelect:g,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:D,onPreviousMonth:h,onNextYear:S,onPreviousYear:_,onNextDecade:k,onPreviousDecade:C,withCellSpacing:j,highlightToday:A,__updateDateOnYearSelect:P,__updateDateOnMonthSelect:b,firstDayOfWeek:x,weekdayFormat:w,weekendDays:I,getDayProps:T,excludeDate:z,renderDay:M,hideOutsideDates:N,hideWeekdays:B,getDayAriaLabel:$,monthLabelFormat:O,monthsListFormat:L,getMonthControlProps:E,yearLabelFormat:F,yearsListFormat:Y,getYearControlProps:J,decadeLabelFormat:R,allowSingleDateInRange:q,allowDeselect:H,minDate:W,maxDate:Z,locale:G},others:K}}},95488:function(e,t,n){n.d(t,{M:function(){return f}});var a=n(52322),r=n(82027),l=n(38483),i=n(51477),s=n(82083),u=n(46766);n(28879);var o=n(51235);n(2784);var c=n(11204);let d={type:"default",defaultLevel:"month",numberOfColumns:1},f=(0,r.d5)((e,t)=>{let n=(0,l.w)("DatePicker",d,e),{classNames:r,styles:f,vars:m,type:p,defaultValue:g,value:y,onChange:v,__staticSelector:D,getDayProps:h,allowSingleDateInRange:S,allowDeselect:_,onMouseLeave:k,numberOfColumns:C,hideOutsideDates:j,__onDayMouseEnter:A,__onDayClick:P,__timezoneApplied:b,...x}=n,{onDateChange:w,onRootMouseLeave:I,onHoveredDateChange:T,getControlProps:z}=(0,s.D)({type:p,level:"day",allowDeselect:_,allowSingleDateInRange:S,value:y,defaultValue:g,onChange:v,onMouseLeave:k,applyTimezone:!b}),{resolvedClassNames:M,resolvedStyles:N}=(0,i.h)({classNames:r,styles:f,props:n}),B=(0,u.e)();return(0,a.jsx)(c.f,{ref:t,minLevel:"month",classNames:M,styles:N,__staticSelector:D||"DatePicker",onMouseLeave:I,numberOfColumns:C,hideOutsideDates:j??1!==C,__onDayMouseEnter:(e,t)=>{T(t),A?.(e,t)},__onDayClick:(e,t)=>{w(t),P?.(e,t)},getDayProps:e=>({...z(e),...h?.(e)}),...x,date:(0,o.w)("add",x.date,B.getTimezone(),b),__timezoneApplied:!0})});f.classes=c.f.classes,f.displayName="@mantine/dates/DatePicker"},18738:function(e,t,n){n.d(t,{a:function(){return g}});var a=n(52322),r=n(82027),l=n(38483),i=n(51477);n(28879),n(2784);var s=n(46766),u=n(93893),o=n(51235),c=n(26005),d=n(9882),f=n(95488),m=n(71686);let p={type:"default",valueFormat:"MMMM D, YYYY",closeOnChange:!0,sortDates:!0,dropdownType:"popover"},g=(0,r.d5)((e,t)=>{let n=(0,l.w)("DatePickerInput",p,e),{type:r,value:g,defaultValue:y,onChange:v,valueFormat:D,labelSeparator:h,locale:S,classNames:_,styles:k,unstyled:C,closeOnChange:j,size:A,variant:P,dropdownType:b,sortDates:x,minDate:w,maxDate:I,vars:T,defaultDate:z,valueFormatter:M,...N}=n,{resolvedClassNames:B,resolvedStyles:$}=(0,i.h)({classNames:_,styles:k,props:n}),{calendarProps:O,others:L}=(0,d.M)(N),{_value:E,setValue:F,formattedValue:Y,dropdownHandlers:J,dropdownOpened:R,onClear:q,shouldClear:H}=(0,c.u)({type:r,value:g,defaultValue:y,onChange:v,locale:S,format:D,labelSeparator:h,closeOnChange:j,sortDates:x,valueFormatter:M}),W=Array.isArray(E)?E[0]||z:E||z,Z=(0,s.e)();return(0,a.jsx)(m.i,{formattedValue:Y,dropdownOpened:R,dropdownHandlers:J,classNames:B,styles:$,unstyled:C,ref:t,onClear:q,shouldClear:H,value:E,size:A,variant:P,dropdownType:b,...L,type:r,__staticSelector:"DatePickerInput",children:(0,a.jsx)(f.M,{...O,size:A,variant:P,type:r,value:E,defaultDate:W||(0,u.S)({maxDate:I,minDate:w,timezone:Z.getTimezone()}),onChange:F,locale:S,classNames:B,styles:$,unstyled:C,__staticSelector:"DatePickerInput",__stopPropagation:"popover"===b,minDate:w,maxDate:I,date:(0,o.w)("add",O.date,Z.getTimezone()),__timezoneApplied:!0})})});g.classes={...m.i.classes,...f.M.classes},g.displayName="@mantine/dates/DatePickerInput"},20228:function(e,t,n){n.d(t,{n:function(){return i}});var a=n(52322);n(28879);var r=n(51235),l=n(46766);function i({value:e,type:t,name:n,form:i}){return(0,a.jsx)("input",{type:"hidden",value:function(e,t){let n=(0,l.e)(),a=e=>(0,r.w)("remove",e,n.getTimezone()).toISOString();if("range"===t&&Array.isArray(e)){let[t,n]=e;return t?n?`${a(t)} \u2013 ${a(n)}`:`${a(t)} \u2013`:""}return"multiple"===t&&Array.isArray(e)?e.map(e=>e&&a(e)).filter(Boolean).join(", "):!Array.isArray(e)&&e?a(e):""}(e,t),name:n,form:i})}i.displayName="@mantine/dates/HiddenDatesInput"},71686:function(e,t,n){n.d(t,{i:function(){return p}});var a=n(52322),r=n(40489),l=n(82027),i=n(7140),s=n(2670),u=n(78222),o=n(6941),c=n(50205),d=n(20228),f={input:"m_6fa5e2aa"};let m={},p=(0,l.d5)((e,t)=>{let{inputProps:n,wrapperProps:l,placeholder:p,classNames:g,styles:y,unstyled:v,popoverProps:D,modalProps:h,dropdownType:S,children:_,formattedValue:k,dropdownHandlers:C,dropdownOpened:j,onClick:A,clearable:P,onClear:b,clearButtonProps:x,rightSection:w,shouldClear:I,readOnly:T,disabled:z,value:M,name:N,form:B,type:$,...O}=(0,i.k)("PickerInputBase",m,e),L=w||(P&&I&&!T&&!z?(0,a.jsx)(s.P,{variant:"transparent",onClick:b,unstyled:v,size:n.size||"sm",...x}):null),E=()=>{"range"===$&&Array.isArray(M)&&M[0]&&!M[1]&&b(),C.close()};return(0,a.jsxs)(a.Fragment,{children:["modal"===S&&!T&&(0,a.jsx)(u.u,{opened:j,onClose:E,withCloseButton:!1,size:"auto","data-dates-modal":!0,unstyled:v,...h,children:_}),(0,a.jsx)(o.I.Wrapper,{...l,children:(0,a.jsxs)(c.J,{position:"bottom-start",opened:j,trapFocus:!0,returnFocus:!0,unstyled:v,...D,disabled:D?.disabled||"modal"===S||T,onChange:e=>{e||(D?.onClose?.(),E())},children:[(0,a.jsx)(c.J.Target,{children:(0,a.jsx)(o.I,{"data-dates-input":!0,"data-read-only":T||void 0,disabled:z,component:"button",type:"button",multiline:!0,onClick:e=>{A?.(e),C.toggle()},rightSection:L,...n,ref:t,classNames:{...g,input:(0,r.Z)(f.input,g?.input)},...O,children:k||(0,a.jsx)(o.I.Placeholder,{error:n.error,unstyled:v,className:g?.placeholder,style:y?.placeholder,children:p})})}),(0,a.jsx)(c.J.Dropdown,{"data-dates-dropdown":!0,children:_})]})}),(0,a.jsx)(d.n,{value:M,name:N,form:B,type:$})]})});p.classes=f,p.displayName="@mantine/dates/PickerInputBase"},26005:function(e,t,n){n.d(t,{u:function(){return s}});var a=n(3900),r=n(46766),l=n(28879),i=n(93141);function s({type:e,value:t,defaultValue:n,onChange:s,locale:u,format:o,closeOnChange:c,sortDates:d,labelSeparator:f,valueFormatter:m}){let p=(0,r.e)(),[g,y]=(0,a.q)(!1),[v,D]=(0,i.l)({type:e,value:t,defaultValue:n,onChange:s}),h=function({formatter:e,...t}){return(e||function({type:e,date:t,locale:n,format:a,labelSeparator:r}){let i=e=>l(e).locale(n).format(a);if("default"===e)return null===t?"":i(t);if("multiple"===e)return t.map(i).join(", ");if("range"===e&&Array.isArray(t)){if(t[0]&&t[1])return`${i(t[0])} ${r} ${i(t[1])}`;if(t[0])return`${i(t[0])} ${r} `}return""})(t)}({type:e,date:v,locale:p.getLocale(u),format:o,labelSeparator:p.getLabelSeparator(f),formatter:m}),S=t=>{c&&("default"===e&&y.close(),"range"===e&&t[0]&&t[1]&&y.close()),d&&"multiple"===e?D([...t].sort((e,t)=>e.getTime()-t.getTime())):D(t)},_="range"===e?!!v[0]:"multiple"===e?v.length>0:null!==v;return{_value:v,setValue:S,onClear:()=>S("range"===e?[null,null]:"multiple"===e?[]:null),shouldClear:_,formattedValue:h,dropdownOpened:g,dropdownHandlers:y}}},82083:function(e,t,n){n.d(t,{D:function(){return s}});var a=n(28879),r=n(2784),l=n(93141);function i(e,t){let n=[...t].sort((e,t)=>e.getTime()-t.getTime());return a(n[0]).startOf("day").subtract(1,"ms").isBefore(e)&&a(n[1]).endOf("day").add(1,"ms").isAfter(e)}function s({type:e,level:t,value:n,defaultValue:s,onChange:u,allowSingleDateInRange:o,allowDeselect:c,onMouseLeave:d,applyTimezone:f=!0}){let[m,p]=(0,l.l)({type:e,value:n,defaultValue:s,onChange:u,applyTimezone:f}),[g,y]=(0,r.useState)("range"===e&&m[0]&&!m[1]?m[0]:null),[v,D]=(0,r.useState)(null),h=e=>g instanceof Date&&v instanceof Date?i(e,[v,g]):m[0]instanceof Date&&m[1]instanceof Date&&i(e,m),S="range"===e?e=>{d?.(e),D(null)}:d,_=e=>m[0]instanceof Date&&!!a(e).isSame(m[0],t)&&!(v&&a(v).isBefore(m[0])),k=e=>m[1]instanceof Date?a(e).isSame(m[1],t):m[0]instanceof Date&&!!v&&a(v).isBefore(m[0])&&a(e).isSame(m[0],t),C="range"===e&&g?D:()=>{};return(0,r.useEffect)(()=>{if("range"!==e)return;let t=null==m[0]&&null==m[1],n=null!=m[0]&&null!=m[1];(t||n)&&(y(null),D(null))},[m]),{onDateChange:n=>{if("range"===e){if(g instanceof Date&&!m[1]){if(a(n).isSame(g,t)&&!o){y(null),D(null),p([null,null]);return}let e=[n,g];e.sort((e,t)=>e.getTime()-t.getTime()),p(e),D(null),y(null);return}if(m[0]&&!m[1]&&a(n).isSame(m[0],t)&&!o){y(null),D(null),p([null,null]);return}p([n,null]),D(null),y(n);return}if("multiple"===e){m.some(e=>a(e).isSame(n,t))?p(m.filter(e=>!a(e).isSame(n,t))):p([...m,n]);return}m&&c&&a(n).isSame(m,t)?p(null):p(n)},onRootMouseLeave:S,onHoveredDateChange:C,getControlProps:n=>{if("range"===e)return{selected:m.some(e=>e&&a(e).isSame(n,t)),inRange:h(n),firstInRange:_(n),lastInRange:k(n),"data-autofocus":!!m[0]&&a(m[0]).isSame(n,t)||void 0};if("multiple"===e)return{selected:m.some(e=>e&&a(e).isSame(n,t)),"data-autofocus":!!m[0]&&a(m[0]).isSame(n,t)||void 0};let r=a(m).isSame(n,t);return{selected:r,"data-autofocus":r||void 0}},_value:m,setValue:p}}},93893:function(e,t,n){n.d(t,{S:function(){return l}});var a=n(28879),r=n(51235);function l({minDate:e,maxDate:t,timezone:n}){let l=(0,r.w)("add",new Date,n);return e||t?e&&a(l).isBefore(e)?e:t&&a(l).isAfter(t)?t:l:l}},3900:function(e,t,n){n.d(t,{q:function(){return r}});var a=n(2784);function r(e=!1,t){let{onOpen:n,onClose:r}=t||{},[l,i]=(0,a.useState)(e),s=(0,a.useCallback)(()=>{i(e=>e||(n?.(),!0))},[n]),u=(0,a.useCallback)(()=>{i(e=>e?(r?.(),!1):e)},[r]),o=(0,a.useCallback)(()=>{l?u():s()},[u,s,l]);return[l,{open:s,close:u,toggle:o}]}}}]); \ No newline at end of file diff --git a/_next/static/chunks/61324-4b6c10a59c320163.js b/_next/static/chunks/61324-e85fd15080090d13.js similarity index 67% rename from _next/static/chunks/61324-4b6c10a59c320163.js rename to _next/static/chunks/61324-e85fd15080090d13.js index c883eacd1ff..664f02e074c 100644 --- a/_next/static/chunks/61324-4b6c10a59c320163.js +++ b/_next/static/chunks/61324-e85fd15080090d13.js @@ -1 +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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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 +"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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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.d5)((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}),A=()=>{m?.(),k.closeDropdown()};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,onChange:e=>!e&&A(),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/76124-d69825d628818346.js b/_next/static/chunks/76124-f2d71a58b8a4a91c.js similarity index 78% rename from _next/static/chunks/76124-d69825d628818346.js rename to _next/static/chunks/76124-f2d71a58b8a4a91c.js index 2be6fa60ce9..556273c82a2 100644 --- a/_next/static/chunks/76124-d69825d628818346.js +++ b/_next/static/chunks/76124-f2d71a58b8a4a91c.js @@ -1 +1 @@ -"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[76124],{26802:function(t,e,n){n.d(e,{M:function(){return m}});var l=n(52322);n(2784);var o=n(38483),a=n(46690),i=n(12063),r=n(28559),s=n(82027),h=n(98446),d=n(65744),c=n(40580),x=n(91482),p=n(54541),j=n(32100),u=n(68755),b=n(9437);function k({spacing:t,verticalSpacing:e,cols:n,selector:o}){let a=(0,u.rZ)(),i=void 0===e?t:e,r=(0,c.L)({"--sg-spacing-x":(0,x.bG)((0,j.v)(t)),"--sg-spacing-y":(0,x.bG)((0,j.v)(i)),"--sg-cols":j.v(n)?.toString()}),s=(0,h.X)(a.breakpoints).reduce((e,l)=>(e[l]||(e[l]={}),"object"==typeof t&&void 0!==t[l]&&(e[l]["--sg-spacing-x"]=(0,x.bG)(t[l])),"object"==typeof i&&void 0!==i[l]&&(e[l]["--sg-spacing-y"]=(0,x.bG)(i[l])),"object"==typeof n&&void 0!==n[l]&&(e[l]["--sg-cols"]=n[l]),e),{}),d=(0,p.I)((0,h.X)(s),a.breakpoints).filter(t=>(0,h.X)(s[t.value]).length>0).map(t=>({query:`(min-width: ${a.breakpoints[t.value]})`,styles:s[t.value]}));return(0,l.jsx)(b.f,{styles:r,media:d,selector:o})}function M(t){return"object"==typeof t&&null!==t?(0,h.X)(t):[]}function v({spacing:t,verticalSpacing:e,cols:n,selector:o}){let a=void 0===e?t:e,i=(0,c.L)({"--sg-spacing-x":(0,x.bG)((0,j.v)(t)),"--sg-spacing-y":(0,x.bG)((0,j.v)(a)),"--sg-cols":j.v(n)?.toString()}),r=function({spacing:t,verticalSpacing:e,cols:n}){return Array.from(new Set([...M(t),...M(e),...M(n)])).sort((t,e)=>(0,d.px)(t)-(0,d.px)(e))}({spacing:t,verticalSpacing:e,cols:n}),s=r.reduce((e,l)=>(e[l]||(e[l]={}),"object"==typeof t&&void 0!==t[l]&&(e[l]["--sg-spacing-x"]=(0,x.bG)(t[l])),"object"==typeof a&&void 0!==a[l]&&(e[l]["--sg-spacing-y"]=(0,x.bG)(a[l])),"object"==typeof n&&void 0!==n[l]&&(e[l]["--sg-cols"]=n[l]),e),{}),h=r.map(t=>({query:`simple-grid (min-width: ${t})`,styles:s[t]}));return(0,l.jsx)(b.f,{styles:i,container:h,selector:o})}var f={container:"m_925c2d2c",root:"m_2415a157"};let g={cols:1,spacing:"md",type:"media"},m=(0,s.d5)((t,e)=>{let n=(0,o.w)("SimpleGrid",g,t),{classNames:s,className:h,style:d,styles:c,unstyled:x,vars:p,cols:j,verticalSpacing:u,spacing:b,type:M,...m}=n,C=(0,a.y)({name:"SimpleGrid",classes:f,props:n,className:h,style:d,classNames:s,styles:c,unstyled:x,vars:p}),L=(0,i.m)();return"container"===M?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(v,{...n,selector:`.${L}`}),(0,l.jsx)("div",{...C("container"),children:(0,l.jsx)(r.x,{ref:e,...C("root",{className:L}),...m})})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(k,{...n,selector:`.${L}`}),(0,l.jsx)(r.x,{ref:e,...C("root",{className:L}),...m})]})});m.classes=f,m.displayName="@mantine/core/SimpleGrid"},27072:function(t,e,n){n.d(e,{l:function(){return d}});var l=n(52322);n(2784);var o=n(38483),a=n(46690),i=n(28559),r=n(82027),s={root:"m_d6493fad"};let h={},d=(0,r.d5)((t,e)=>{let n=(0,o.w)("TypographyStylesProvider",h,t),{classNames:r,className:d,style:c,styles:x,unstyled:p,...j}=n,u=(0,a.y)({name:"TypographyStylesProvider",classes:s,props:n,className:d,style:c,classNames:r,styles:x,unstyled:p});return(0,l.jsx)(i.x,{ref:e,...u("root"),...j})});d.classes=s,d.displayName="@mantine/core/TypographyStylesProvider"},32100:function(t,e,n){n.d(e,{v:function(){return l}});function l(t){return"object"==typeof t&&null!==t?"base"in t?t.base:void 0:t}},99070:function(t,e,n){n.d(e,{o:function(){return o}});var l=n(65744);function o(t,e){return t in e?(0,l.px)(e[t]):(0,l.px)(t)}},54541:function(t,e,n){n.d(e,{I:function(){return o}});var l=n(99070);function o(t,e){let n=t.map(t=>({value:t,px:(0,l.o)(t,e)}));return n.sort((t,e)=>t.px-e.px),n}},84821:function(t,e,n){n.d(e,{U:function(){return o}});var l=n(2784);function o(t){let[e,n]=(0,l.useState)(t);return[e,t=>{if(t){if("function"==typeof t)n(t);else if("object"==typeof t&&"nativeEvent"in t){let{currentTarget:e}=t;n("checkbox"===e.type?e.checked:e.value)}else n(t)}else n(t)}]}},50023:function(t,e,n){n.d(e,{Y:function(){return o},r:function(){return l}});let[l,o]=(0,n(89106).R)("RichTextEditor component was not found in tree")},76124:function(t,e,n){n.d(e,{L:function(){return t7}});var l=n(52322),o=n(2784),a=n(82027),i=n(38483),r=n(46690),s=n(28559);let h={linkControlLabel:"Link",colorPickerControlLabel:"Text color",highlightControlLabel:"Highlight text",colorControlLabel:t=>`Set text color ${t}`,boldControlLabel:"Bold",italicControlLabel:"Italic",underlineControlLabel:"Underline",strikeControlLabel:"Strikethrough",clearFormattingControlLabel:"Clear formatting",unlinkControlLabel:"Remove link",bulletListControlLabel:"Bullet list",orderedListControlLabel:"Ordered list",h1ControlLabel:"Heading 1",h2ControlLabel:"Heading 2",h3ControlLabel:"Heading 3",h4ControlLabel:"Heading 4",h5ControlLabel:"Heading 5",h6ControlLabel:"Heading 6",blockquoteControlLabel:"Blockquote",alignLeftControlLabel:"Align text: left",alignCenterControlLabel:"Align text: center",alignRightControlLabel:"Align text: right",alignJustifyControlLabel:"Align text: justify",codeControlLabel:"Code",codeBlockControlLabel:"Code block",subscriptControlLabel:"Subscript",superscriptControlLabel:"Superscript",unsetColorControlLabel:"Unset color",hrControlLabel:"Horizontal line",undoControlLabel:"Undo",redoControlLabel:"Redo",tasksControlLabel:"Task list",tasksSinkLabel:"Decrease task level",tasksLiftLabel:"Increase task level",linkEditorInputLabel:"Enter URL",linkEditorInputPlaceholder:"https://example.com/",linkEditorExternalLink:"Open link in a new tab",linkEditorInternalLink:"Open link in the same tab",linkEditorSave:"Save",colorPickerCancel:"Cancel",colorPickerClear:"Clear color",colorPickerColorPicker:"Color picker",colorPickerPalette:"Color palette",colorPickerSave:"Save",colorPickerColorLabel:t=>`Set text color ${t}`};var d=n(50023),c=n(13635),x=n(27072),p=n(14852);let j={},u=(0,a.d5)((t,e)=>{let{classNames:n,className:o,style:a,styles:r,vars:h,...p}=(0,i.w)("RichTextEditorContent",j,t),u=(0,d.Y)();return u.withTypographyStyles?(0,l.jsx)(x.l,{...u.getStyles("typographyStylesProvider",{className:o,style:a,styles:r,classNames:n}),unstyled:u.unstyled,ref:e,children:(0,l.jsx)(s.x,{component:c.kg,editor:u.editor,...u.getStyles("content",{classNames:n,styles:r}),...p})}):(0,l.jsx)(s.x,{component:c.kg,editor:u.editor,...u.getStyles("content",{classNames:n,styles:r,className:o,style:a}),...p})});function b(t){return(0,l.jsx)("svg",{...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round"})}function k(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M7 5h6a3.5 3.5 0 0 1 0 7h-6z"}),(0,l.jsx)("path",{d:"M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"})]})}function M(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M11 5l6 0"}),(0,l.jsx)("path",{d:"M7 19l6 0"}),(0,l.jsx)("path",{d:"M14 5l-4 14"})]})}function v(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M7 5v5a5 5 0 0 0 10 0v-5"}),(0,l.jsx)("path",{d:"M5 19h14"})]})}function f(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 12l14 0"}),(0,l.jsx)("path",{d:"M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5"})]})}function g(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M17 15l4 4m0 -4l-4 4"}),(0,l.jsx)("path",{d:"M7 6v-1h11v1"}),(0,l.jsx)("path",{d:"M7 19l4 0"}),(0,l.jsx)("path",{d:"M13 5l-4 14"})]})}function m(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M19 18v-8l-2 2"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function C(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function L(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M19 14a2 2 0 1 0 -2 -2"}),(0,l.jsx)("path",{d:"M17 16a2 2 0 1 0 2 -2"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function y(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M20 18v-8l-4 6h5"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function H(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M17 18h2a2 2 0 1 0 0 -4h-2v-4h4"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function S(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M19 14a2 2 0 1 0 0 4a2 2 0 0 0 0 -4z"}),(0,l.jsx)("path",{d:"M21 12a2 2 0 1 0 -4 0v4"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function w(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M9 6l11 0"}),(0,l.jsx)("path",{d:"M9 12l11 0"}),(0,l.jsx)("path",{d:"M9 18l11 0"}),(0,l.jsx)("path",{d:"M5 6l0 .01"}),(0,l.jsx)("path",{d:"M5 12l0 .01"}),(0,l.jsx)("path",{d:"M5 18l0 .01"})]})}function z(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M11 6h9"}),(0,l.jsx)("path",{d:"M11 12h9"}),(0,l.jsx)("path",{d:"M12 18h8"}),(0,l.jsx)("path",{d:"M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"}),(0,l.jsx)("path",{d:"M6 10v-6l-2 2"})]})}function E(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M17 22v-2"}),(0,l.jsx)("path",{d:"M9 15l6 -6"}),(0,l.jsx)("path",{d:"M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"}),(0,l.jsx)("path",{d:"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"}),(0,l.jsx)("path",{d:"M20 17h2"}),(0,l.jsx)("path",{d:"M2 7h2"}),(0,l.jsx)("path",{d:"M7 2v2"})]})}function A(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M6 15h15"}),(0,l.jsx)("path",{d:"M21 19h-15"}),(0,l.jsx)("path",{d:"M15 11h6"}),(0,l.jsx)("path",{d:"M21 7h-6"}),(0,l.jsx)("path",{d:"M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"}),(0,l.jsx)("path",{d:"M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"})]})}function P(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M4 6l16 0"}),(0,l.jsx)("path",{d:"M4 12l10 0"}),(0,l.jsx)("path",{d:"M4 18l14 0"})]})}function T(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M4 6l16 0"}),(0,l.jsx)("path",{d:"M10 12l10 0"}),(0,l.jsx)("path",{d:"M6 18l14 0"})]})}function R(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M4 6l16 0"}),(0,l.jsx)("path",{d:"M8 12l8 0"}),(0,l.jsx)("path",{d:"M6 18l12 0"})]})}function I(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M4 6l16 0"}),(0,l.jsx)("path",{d:"M4 12l16 0"}),(0,l.jsx)("path",{d:"M4 18l12 0"})]})}function _(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 7l8 10m-8 0l8 -10"}),(0,l.jsx)("path",{d:"M21 20h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2"})]})}function N(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 7l8 10m-8 0l8 -10"}),(0,l.jsx)("path",{d:"M21 11h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2"})]})}function G(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M7 8l-4 4l4 4"}),(0,l.jsx)("path",{d:"M17 8l4 4l-4 4"}),(0,l.jsx)("path",{d:"M14 4l-4 16"})]})}function B(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"}),(0,l.jsx)("path",{d:"M12.5 5.5l4 4"}),(0,l.jsx)("path",{d:"M4.5 13.5l4 4"}),(0,l.jsx)("path",{d:"M21 15v4h-8l4 -4z"})]})}function D(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 12h2"}),(0,l.jsx)("path",{d:"M17 12h2"}),(0,l.jsx)("path",{d:"M11 12h2"})]})}function U(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M20.042 16.045a9 9 0 0 0 -12.087 -12.087m-2.318 1.677a9 9 0 1 0 12.725 12.73"}),(0,l.jsx)("path",{d:"M3 3l18 18"})]})}function q(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M11 7l6 6"}),(0,l.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"})]})}function Z(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M18 6l-12 12"}),(0,l.jsx)("path",{d:"M6 6l12 12"})]})}function J(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("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"}),(0,l.jsx)("path",{d:"M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"}),(0,l.jsx)("path",{d:"M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"}),(0,l.jsx)("path",{d:"M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"})]})}function Y(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 12l5 5l10 -10"})]})}function F(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M9 15l6 -6"}),(0,l.jsx)("path",{d:"M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"}),(0,l.jsx)("path",{d:"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"})]})}function $(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"}),(0,l.jsx)("path",{d:"M11 13l9 -9"}),(0,l.jsx)("path",{d:"M15 4h5v5"})]})}function O(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M9 14l-4 -4l4 -4"}),(0,l.jsx)("path",{d:"M5 10h11a4 4 0 1 1 0 8h-1"})]})}function X(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M15 14l4 -4l-4 -4"}),(0,l.jsx)("path",{d:"M19 10h-11a4 4 0 1 0 0 8h1"})]})}function K(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M3.5 5.5l1.5 1.5l2.5 -2.5"}),(0,l.jsx)("path",{d:"M3.5 11.5l1.5 1.5l2.5 -2.5"}),(0,l.jsx)("path",{d:"M3.5 17.5l1.5 1.5l2.5 -2.5"}),(0,l.jsx)("path",{d:"M11 6l9 0"}),(0,l.jsx)("path",{d:"M11 12l9 0"}),(0,l.jsx)("path",{d:"M11 18l9 0"})]})}function V(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M20 6l-11 0"}),(0,l.jsx)("path",{d:"M20 12l-7 0"}),(0,l.jsx)("path",{d:"M20 18l-11 0"}),(0,l.jsx)("path",{d:"M4 8l4 4l-4 4"})]})}function W(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M20 6l-7 0"}),(0,l.jsx)("path",{d:"M20 12l-9 0"}),(0,l.jsx)("path",{d:"M20 18l-7 0"}),(0,l.jsx)("path",{d:"M8 8l-4 4l4 4"})]})}u.classes=p.Z,u.displayName="@mantine/tiptap/RichTextEditorContent";var Q=n(63409),tt=n(58898);let te={interactive:!0},tn=(0,a.d5)((t,e)=>{let{classNames:n,className:o,style:a,styles:r,vars:s,interactive:h,active:c,onMouseDown:x,disabled:p,...j}=(0,i.w)("RichTextEditorControl",te,t),u=(0,d.Y)();return(0,l.jsx)(Q.k,{...j,...u.getStyles("control",{className:o,style:a,classNames:n,styles:r}),disabled:p,"data-rich-text-editor-control":!0,tabIndex:h?0:-1,"data-interactive":h||void 0,"data-disabled":p||void 0,"data-active":c||void 0,"aria-pressed":c&&h||void 0,"aria-hidden":!h||void 0,ref:e,unstyled:u.unstyled,onMouseDown:t=>{t.preventDefault(),x?.(t)}})});tn.classes=p.Z,tn.displayName="@mantine/tiptap/RichTextEditorControl";let tl=(0,o.forwardRef)(({className:t,icon:e,...n},o)=>(0,l.jsx)(tn,{ref:o,...n,children:(0,l.jsx)(e,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}));function to({label:t,isActive:e,operation:n,icon:a,isDisabled:i}){let r=(0,o.forwardRef)((o,r)=>{let{editor:s,labels:h}=(0,d.Y)(),c=h[t];return(0,l.jsx)(tl,{...o,"aria-label":c,title:c,active:!!e?.name&&s?.isActive(e.name,e.attributes),ref:r,onClick:()=>s?.chain().focus()[n.name](n.attributes).run(),icon:o.icon||a,disabled:i?.(s)||!1})});return r.displayName=`@mantine/tiptap/${t}`,r}tl.displayName="@mantine/tiptap/RichTextEditorControlBase";let ta=to({label:"boldControlLabel",icon:t=>(0,l.jsx)(k,{...t}),isActive:{name:"bold"},operation:{name:"toggleBold"}}),ti=to({label:"italicControlLabel",icon:t=>(0,l.jsx)(M,{...t}),isActive:{name:"italic"},operation:{name:"toggleItalic"}}),tr=to({label:"underlineControlLabel",icon:t=>(0,l.jsx)(v,{...t}),isActive:{name:"underline"},operation:{name:"toggleUnderline"}}),ts=to({label:"strikeControlLabel",icon:t=>(0,l.jsx)(f,{...t}),isActive:{name:"strike"},operation:{name:"toggleStrike"}}),th=to({label:"clearFormattingControlLabel",icon:t=>(0,l.jsx)(g,{...t}),operation:{name:"unsetAllMarks"}}),td=to({label:"unlinkControlLabel",icon:t=>(0,l.jsx)(E,{...t}),operation:{name:"unsetLink"}}),tc=to({label:"bulletListControlLabel",icon:t=>(0,l.jsx)(w,{...t}),isActive:{name:"bulletList"},operation:{name:"toggleBulletList"}}),tx=to({label:"orderedListControlLabel",icon:t=>(0,l.jsx)(z,{...t}),isActive:{name:"orderedList"},operation:{name:"toggleOrderedList"}}),tp=to({label:"h1ControlLabel",icon:t=>(0,l.jsx)(m,{...t}),isActive:{name:"heading",attributes:{level:1}},operation:{name:"toggleHeading",attributes:{level:1}}}),tj=to({label:"h2ControlLabel",icon:t=>(0,l.jsx)(C,{...t}),isActive:{name:"heading",attributes:{level:2}},operation:{name:"toggleHeading",attributes:{level:2}}}),tu=to({label:"h3ControlLabel",icon:t=>(0,l.jsx)(L,{...t}),isActive:{name:"heading",attributes:{level:3}},operation:{name:"toggleHeading",attributes:{level:3}}}),tb=to({label:"h4ControlLabel",icon:t=>(0,l.jsx)(y,{...t}),isActive:{name:"heading",attributes:{level:4}},operation:{name:"toggleHeading",attributes:{level:4}}}),tk=to({label:"h5ControlLabel",icon:t=>(0,l.jsx)(H,{...t}),isActive:{name:"heading",attributes:{level:5}},operation:{name:"toggleHeading",attributes:{level:5}}}),tM=to({label:"h6ControlLabel",icon:t=>(0,l.jsx)(S,{...t}),isActive:{name:"heading",attributes:{level:6}},operation:{name:"toggleHeading",attributes:{level:6}}}),tv=to({label:"blockquoteControlLabel",icon:t=>(0,l.jsx)(A,{...t}),isActive:{name:"blockquote"},operation:{name:"toggleBlockquote"}}),tf=to({label:"alignLeftControlLabel",icon:t=>(0,l.jsx)(P,{...t}),operation:{name:"setTextAlign",attributes:"left"}}),tg=to({label:"alignRightControlLabel",icon:t=>(0,l.jsx)(T,{...t}),operation:{name:"setTextAlign",attributes:"right"}}),tm=to({label:"alignCenterControlLabel",icon:t=>(0,l.jsx)(R,{...t}),operation:{name:"setTextAlign",attributes:"center"}}),tC=to({label:"alignJustifyControlLabel",icon:t=>(0,l.jsx)(I,{...t}),operation:{name:"setTextAlign",attributes:"justify"}}),tL=to({label:"subscriptControlLabel",icon:t=>(0,l.jsx)(_,{...t}),isActive:{name:"subscript"},operation:{name:"toggleSubscript"}}),ty=to({label:"superscriptControlLabel",icon:t=>(0,l.jsx)(N,{...t}),isActive:{name:"superscript"},operation:{name:"toggleSuperscript"}}),tH=to({label:"codeControlLabel",icon:t=>(0,l.jsx)(G,{...t}),isActive:{name:"code"},operation:{name:"toggleCode"}}),tS=to({label:"codeBlockControlLabel",icon:t=>(0,l.jsx)(G,{...t}),isActive:{name:"codeBlock"},operation:{name:"toggleCodeBlock"}}),tw=to({label:"highlightControlLabel",icon:t=>(0,l.jsx)(B,{...t}),isActive:{name:"highlight"},operation:{name:"toggleHighlight"}}),tz=to({label:"hrControlLabel",icon:t=>(0,l.jsx)(D,{...t}),operation:{name:"setHorizontalRule"}}),tE=to({label:"unsetColorControlLabel",icon:t=>(0,l.jsx)(U,{...t}),operation:{name:"unsetColor"}}),tA=to({label:"undoControlLabel",icon:t=>(0,l.jsx)(O,{...t}),isDisabled:t=>!t?.can().undo(),operation:{name:"undo"}}),tP=to({label:"redoControlLabel",icon:t=>(0,l.jsx)(X,{...t}),isDisabled:t=>!t?.can().redo(),operation:{name:"redo"}}),tT=to({label:"tasksControlLabel",icon:t=>(0,l.jsx)(K,{...t}),isActive:{name:"taskList"},operation:{name:"toggleTaskList"}}),tR=to({label:"tasksSinkLabel",icon:t=>(0,l.jsx)(V,{...t}),operation:{name:"sinkListItem",attributes:"taskItem"},isDisabled:t=>!t?.can().sinkListItem("taskItem")}),tI=to({label:"tasksLiftLabel",icon:t=>(0,l.jsx)(W,{...t}),operation:{name:"liftListItem",attributes:"taskItem"},isDisabled:t=>!t?.can().liftListItem("taskItem")});var t_=n(51477),tN=n(50205),tG=n(74770),tB=n(893),tD=n(17115),tU=n(84821),tq=n(3900),tZ=n(65695);let tJ=t=>(0,l.jsx)(F,{...t}),tY={},tF=(0,a.d5)((t,e)=>{let n=(0,i.w)("RichTextEditorLinkControl",tY,t),{classNames:a,className:r,style:s,styles:h,vars:c,icon:x,popoverProps:p,disableTooltips:j,initialExternal:u,...b}=n,k=(0,d.Y)(),M={classNames:a,styles:h},[v,f]=(0,tU.U)(""),[g,m]=(0,o.useState)(u),[C,{open:L,close:y}]=(0,tq.q)(!1),H=()=>{L();let t=k.editor?.getAttributes("link");f(t?.href||""),m(t?.href?t?.target==="_blank":u)},S=()=>{y(),f(""),m(u)},w=()=>{S(),""===v?k.editor?.chain().focus().extendMarkRange("link").unsetLink().run():k.editor?.chain().focus().extendMarkRange("link").setLink({href:v,target:g?"_blank":null}).run()};(0,tZ.s)("edit-link",H,!1);let{resolvedClassNames:z,resolvedStyles:E}=(0,t_.h)({classNames:a,styles:h,props:n});return(0,l.jsxs)(tN.J,{trapFocus:!0,shadow:"md",withinPortal:!0,opened:C,onClose:S,offset:-44,zIndex:1e4,...p,children:[(0,l.jsx)(tN.J.Target,{children:(0,l.jsx)(tl,{icon:x||tJ,...b,"aria-label":k.labels.linkControlLabel,title:k.labels.linkControlLabel,onClick:H,active:k.editor?.isActive("link"),ref:e,classNames:z,styles:E,className:r,style:s})}),(0,l.jsx)(tN.J.Dropdown,{...k.getStyles("linkEditorDropdown",M),children:(0,l.jsxs)("div",{...k.getStyles("linkEditor",M),children:[(0,l.jsx)(tG.o,{placeholder:k.labels.linkEditorInputPlaceholder,"aria-label":k.labels.linkEditorInputLabel,type:"url",value:v,onChange:f,classNames:{input:k.getStyles("linkEditorInput",M).className},onKeyDown:t=>{"Enter"===t.key&&(t.preventDefault(),w())},rightSection:(0,l.jsx)(tB.u,{label:g?k.labels.linkEditorExternalLink:k.labels.linkEditorInternalLink,events:{hover:!0,focus:!0,touch:!0},withinPortal:!0,withArrow:!0,disabled:j,zIndex:1e4,children:(0,l.jsx)(Q.k,{onClick:()=>m(t=>!t),"data-active":g||void 0,...k.getStyles("linkEditorExternalControl",M),children:(0,l.jsx)($,{style:{width:(0,tt.h)(14),height:(0,tt.h)(14)}})})})}),(0,l.jsx)(tD.z,{variant:"default",onClick:w,...k.getStyles("linkEditorSave",M),children:k.labels.linkEditorSave})]})})]})});tF.classes=p.Z,tF.displayName="@mantine/tiptap/RichTextEditorLinkControl";var t$=n(27009),tO=n(26802),tX=n(37574),tK=n(93010),tV=n(54813);let tW={},tQ=(0,o.forwardRef)((t,e)=>{let{popoverProps:n,colors:a,colorPickerProps:r,...s}=(0,i.w)("RichTextEditorColorPickerControl",tW,t),{editor:h,labels:c,getStyles:x}=(0,d.Y)(),[p,{toggle:j,close:u}]=(0,tq.q)(!1),[b,k]=(0,o.useState)("palette"),M=h?.getAttributes("textStyle").color||"var(--mantine-color-text)",v=(t,e=!0)=>{(h?.chain()).focus().setColor(t).run(),e&&u()},f=a.map((t,e)=>(0,l.jsx)(t$.b,{component:"button",color:t,onClick:()=>v(t),size:26,radius:"xs",style:{cursor:"pointer"},title:c.colorPickerColorLabel(t),"aria-label":c.colorPickerColorLabel(t)},e));return(0,l.jsxs)(tN.J,{opened:p,withinPortal:!0,trapFocus:!0,onClose:u,...n,children:[(0,l.jsx)(tN.J.Target,{children:(0,l.jsx)(tn,{...s,"aria-label":c.colorPickerControlLabel,title:c.colorPickerControlLabel,ref:e,onClick:j,children:(0,l.jsx)(t$.b,{color:M,size:14})})}),(0,l.jsxs)(tN.J.Dropdown,{...x("linkEditorDropdown"),children:["palette"===b&&(0,l.jsx)(tO.M,{cols:7,spacing:2,children:f}),"colorPicker"===b&&(0,l.jsx)(tX.z,{defaultValue:M,onChange:t=>v(t,!1),...r}),(0,l.jsx)(tB.u.Group,{closeDelay:200,children:(0,l.jsxs)(tK.Z,{justify:"flex-end",gap:"xs",mt:"sm",children:["palette"===b&&(0,l.jsx)(tV.A,{variant:"default",onClick:u,title:c.colorPickerCancel,"aria-label":c.colorPickerCancel,children:(0,l.jsx)(Z,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}),(0,l.jsx)(tV.A,{variant:"default",onClick:()=>{(h?.chain()).focus().unsetColor().run(),u()},title:c.colorPickerClear,"aria-label":c.colorPickerClear,children:(0,l.jsx)(U,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}),"palette"===b?(0,l.jsx)(tV.A,{variant:"default",onClick:()=>k("colorPicker"),title:c.colorPickerColorPicker,"aria-label":c.colorPickerColorPicker,children:(0,l.jsx)(q,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}):(0,l.jsx)(tV.A,{variant:"default",onClick:()=>k("palette"),"aria-label":c.colorPickerPalette,title:c.colorPickerPalette,children:(0,l.jsx)(J,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}),"colorPicker"===b&&(0,l.jsx)(tV.A,{variant:"default",onClick:u,title:c.colorPickerSave,"aria-label":c.colorPickerSave,children:(0,l.jsx)(Y,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})})]})})]})]})});tQ.displayName="@mantine/tiptap/ColorPickerControl";let t0={},t1=(0,o.forwardRef)((t,e)=>{let{color:n,...o}=(0,i.w)("RichTextEditorColorControl",t0,t),{editor:a,labels:r}=(0,d.Y)(),s=a?.getAttributes("textStyle").color||null,h=r.colorControlLabel(n);return(0,l.jsx)(tn,{...o,active:s===n,"aria-label":h,title:h,onClick:()=>(a?.chain()).focus().setColor(n).run(),ref:e,children:(0,l.jsx)(t$.b,{color:n,size:14})})});t1.displayName="@mantine/tiptap/RichTextEditorColorControl";let t2={},t4=(0,a.d5)((t,e)=>{let{classNames:n,className:o,style:a,styles:r,vars:h,...c}=(0,i.w)("RichTextEditorControlsGroup",t2,t),x=(0,d.Y)();return(0,l.jsx)(s.x,{ref:e,...x.getStyles("controlsGroup",{className:o,style:a,styles:r,classNames:n}),...c})});t4.classes=p.Z,t4.displayName="@mantine/tiptap/RichTextEditorControlsGroup";let t5={},t6=(0,a.d5)((t,e)=>{let{classNames:n,className:o,style:a,styles:r,vars:h,sticky:c,stickyOffset:x,mod:p,...j}=(0,i.w)("RichTextEditorToolbar",t5,t),u=(0,d.Y)();return(0,l.jsx)(s.x,{ref:e,mod:[{sticky:c},p],...u.getStyles("toolbar",{className:o,style:a,styles:r,classNames:n}),...j,__vars:{"--rte-sticky-offset":(0,tt.h)(x)}})});t6.classes=p.Z,t6.displayName="@mantine/tiptap/RichTextEditorToolbar";let t8={withCodeHighlightStyles:!0,withTypographyStyles:!0},t7=(0,a.d5)((t,e)=>{let n=(0,i.w)("RichTextEditor",t8,t),{classNames:a,className:c,style:x,styles:j,unstyled:u,vars:b,editor:k,withCodeHighlightStyles:M,withTypographyStyles:v,labels:f,children:g,...m}=n,C=(0,r.y)({name:"RichTextEditor",classes:p.Z,props:n,className:c,style:x,classNames:a,styles:j,unstyled:u,vars:b}),L=(0,o.useMemo)(()=>({...h,...f}),[f]);return(0,l.jsx)(d.r,{value:{editor:k,getStyles:C,labels:L,withCodeHighlightStyles:M,withTypographyStyles:v,unstyled:u},children:(0,l.jsx)(s.x,{...C("root"),...m,ref:e,children:g})})});t7.classes=p.Z,t7.displayName="@mantine/tiptap/RichTextEditor",t7.Content=u,t7.Control=tn,t7.Toolbar=t6,t7.ControlsGroup=t4,t7.Bold=ta,t7.Italic=ti,t7.Strikethrough=ts,t7.Underline=tr,t7.ClearFormatting=th,t7.H1=tp,t7.H2=tj,t7.H3=tu,t7.H4=tb,t7.H5=tk,t7.H6=tM,t7.BulletList=tc,t7.OrderedList=tx,t7.Link=tF,t7.Unlink=td,t7.Blockquote=tv,t7.AlignLeft=tf,t7.AlignRight=tg,t7.AlignCenter=tm,t7.AlignJustify=tC,t7.Superscript=ty,t7.Subscript=tL,t7.Code=tH,t7.CodeBlock=tS,t7.ColorPicker=tQ,t7.Color=t1,t7.Highlight=tw,t7.Hr=tz,t7.UnsetColor=tE,t7.Undo=tA,t7.Redo=tP,t7.TaskList=tT,t7.TaskListSink=tR,t7.TaskListLift=tI},14852:function(t,e,n){n.d(e,{Z:function(){return l}});var l={root:"m_dd3f7539",typographyStylesProvider:"m_d37966d9",content:"m_c2204cc2",linkEditorDropdown:"m_8a991b4f",control:"m_c2207da6",controlsGroup:"m_2ab47ef2",linkEditor:"m_b67b711e",linkEditorInput:"m_296cf94c",linkEditorExternalControl:"m_cfef614",linkEditorSave:"m_3b28e7bb",toolbar:"m_4574a3c4",taskList:"m_8b44009a"}}}]); \ No newline at end of file +"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[76124],{26802:function(t,e,n){n.d(e,{M:function(){return m}});var l=n(52322);n(2784);var o=n(38483),a=n(46690),i=n(12063),r=n(28559),s=n(82027),h=n(98446),d=n(65744),c=n(40580),x=n(91482),p=n(54541),j=n(32100),u=n(68755),b=n(9437);function k({spacing:t,verticalSpacing:e,cols:n,selector:o}){let a=(0,u.rZ)(),i=void 0===e?t:e,r=(0,c.L)({"--sg-spacing-x":(0,x.bG)((0,j.v)(t)),"--sg-spacing-y":(0,x.bG)((0,j.v)(i)),"--sg-cols":j.v(n)?.toString()}),s=(0,h.X)(a.breakpoints).reduce((e,l)=>(e[l]||(e[l]={}),"object"==typeof t&&void 0!==t[l]&&(e[l]["--sg-spacing-x"]=(0,x.bG)(t[l])),"object"==typeof i&&void 0!==i[l]&&(e[l]["--sg-spacing-y"]=(0,x.bG)(i[l])),"object"==typeof n&&void 0!==n[l]&&(e[l]["--sg-cols"]=n[l]),e),{}),d=(0,p.I)((0,h.X)(s),a.breakpoints).filter(t=>(0,h.X)(s[t.value]).length>0).map(t=>({query:`(min-width: ${a.breakpoints[t.value]})`,styles:s[t.value]}));return(0,l.jsx)(b.f,{styles:r,media:d,selector:o})}function M(t){return"object"==typeof t&&null!==t?(0,h.X)(t):[]}function v({spacing:t,verticalSpacing:e,cols:n,selector:o}){let a=void 0===e?t:e,i=(0,c.L)({"--sg-spacing-x":(0,x.bG)((0,j.v)(t)),"--sg-spacing-y":(0,x.bG)((0,j.v)(a)),"--sg-cols":j.v(n)?.toString()}),r=function({spacing:t,verticalSpacing:e,cols:n}){return Array.from(new Set([...M(t),...M(e),...M(n)])).sort((t,e)=>(0,d.px)(t)-(0,d.px)(e))}({spacing:t,verticalSpacing:e,cols:n}),s=r.reduce((e,l)=>(e[l]||(e[l]={}),"object"==typeof t&&void 0!==t[l]&&(e[l]["--sg-spacing-x"]=(0,x.bG)(t[l])),"object"==typeof a&&void 0!==a[l]&&(e[l]["--sg-spacing-y"]=(0,x.bG)(a[l])),"object"==typeof n&&void 0!==n[l]&&(e[l]["--sg-cols"]=n[l]),e),{}),h=r.map(t=>({query:`simple-grid (min-width: ${t})`,styles:s[t]}));return(0,l.jsx)(b.f,{styles:i,container:h,selector:o})}var f={container:"m_925c2d2c",root:"m_2415a157"};let g={cols:1,spacing:"md",type:"media"},m=(0,s.d5)((t,e)=>{let n=(0,o.w)("SimpleGrid",g,t),{classNames:s,className:h,style:d,styles:c,unstyled:x,vars:p,cols:j,verticalSpacing:u,spacing:b,type:M,...m}=n,C=(0,a.y)({name:"SimpleGrid",classes:f,props:n,className:h,style:d,classNames:s,styles:c,unstyled:x,vars:p}),L=(0,i.m)();return"container"===M?(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(v,{...n,selector:`.${L}`}),(0,l.jsx)("div",{...C("container"),children:(0,l.jsx)(r.x,{ref:e,...C("root",{className:L}),...m})})]}):(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(k,{...n,selector:`.${L}`}),(0,l.jsx)(r.x,{ref:e,...C("root",{className:L}),...m})]})});m.classes=f,m.displayName="@mantine/core/SimpleGrid"},27072:function(t,e,n){n.d(e,{l:function(){return d}});var l=n(52322);n(2784);var o=n(38483),a=n(46690),i=n(28559),r=n(82027),s={root:"m_d6493fad"};let h={},d=(0,r.d5)((t,e)=>{let n=(0,o.w)("TypographyStylesProvider",h,t),{classNames:r,className:d,style:c,styles:x,unstyled:p,...j}=n,u=(0,a.y)({name:"TypographyStylesProvider",classes:s,props:n,className:d,style:c,classNames:r,styles:x,unstyled:p});return(0,l.jsx)(i.x,{ref:e,...u("root"),...j})});d.classes=s,d.displayName="@mantine/core/TypographyStylesProvider"},32100:function(t,e,n){n.d(e,{v:function(){return l}});function l(t){return"object"==typeof t&&null!==t?"base"in t?t.base:void 0:t}},99070:function(t,e,n){n.d(e,{o:function(){return o}});var l=n(65744);function o(t,e){return t in e?(0,l.px)(e[t]):(0,l.px)(t)}},54541:function(t,e,n){n.d(e,{I:function(){return o}});var l=n(99070);function o(t,e){let n=t.map(t=>({value:t,px:(0,l.o)(t,e)}));return n.sort((t,e)=>t.px-e.px),n}},84821:function(t,e,n){n.d(e,{U:function(){return o}});var l=n(2784);function o(t){let[e,n]=(0,l.useState)(t);return[e,t=>{if(t){if("function"==typeof t)n(t);else if("object"==typeof t&&"nativeEvent"in t){let{currentTarget:e}=t;n("checkbox"===e.type?e.checked:e.value)}else n(t)}else n(t)}]}},50023:function(t,e,n){n.d(e,{Y:function(){return o},r:function(){return l}});let[l,o]=(0,n(89106).R)("RichTextEditor component was not found in tree")},76124:function(t,e,n){n.d(e,{L:function(){return t7}});var l=n(52322),o=n(2784),a=n(82027),i=n(38483),r=n(46690),s=n(28559);let h={linkControlLabel:"Link",colorPickerControlLabel:"Text color",highlightControlLabel:"Highlight text",colorControlLabel:t=>`Set text color ${t}`,boldControlLabel:"Bold",italicControlLabel:"Italic",underlineControlLabel:"Underline",strikeControlLabel:"Strikethrough",clearFormattingControlLabel:"Clear formatting",unlinkControlLabel:"Remove link",bulletListControlLabel:"Bullet list",orderedListControlLabel:"Ordered list",h1ControlLabel:"Heading 1",h2ControlLabel:"Heading 2",h3ControlLabel:"Heading 3",h4ControlLabel:"Heading 4",h5ControlLabel:"Heading 5",h6ControlLabel:"Heading 6",blockquoteControlLabel:"Blockquote",alignLeftControlLabel:"Align text: left",alignCenterControlLabel:"Align text: center",alignRightControlLabel:"Align text: right",alignJustifyControlLabel:"Align text: justify",codeControlLabel:"Code",codeBlockControlLabel:"Code block",subscriptControlLabel:"Subscript",superscriptControlLabel:"Superscript",unsetColorControlLabel:"Unset color",hrControlLabel:"Horizontal line",undoControlLabel:"Undo",redoControlLabel:"Redo",tasksControlLabel:"Task list",tasksSinkLabel:"Decrease task level",tasksLiftLabel:"Increase task level",linkEditorInputLabel:"Enter URL",linkEditorInputPlaceholder:"https://example.com/",linkEditorExternalLink:"Open link in a new tab",linkEditorInternalLink:"Open link in the same tab",linkEditorSave:"Save",colorPickerCancel:"Cancel",colorPickerClear:"Clear color",colorPickerColorPicker:"Color picker",colorPickerPalette:"Color palette",colorPickerSave:"Save",colorPickerColorLabel:t=>`Set text color ${t}`};var d=n(50023),c=n(13635),x=n(27072),p=n(14852);let j={},u=(0,a.d5)((t,e)=>{let{classNames:n,className:o,style:a,styles:r,vars:h,...p}=(0,i.w)("RichTextEditorContent",j,t),u=(0,d.Y)();return u.withTypographyStyles?(0,l.jsx)(x.l,{...u.getStyles("typographyStylesProvider",{className:o,style:a,styles:r,classNames:n}),unstyled:u.unstyled,ref:e,children:(0,l.jsx)(s.x,{component:c.kg,editor:u.editor,...u.getStyles("content",{classNames:n,styles:r}),...p})}):(0,l.jsx)(s.x,{component:c.kg,editor:u.editor,...u.getStyles("content",{classNames:n,styles:r,className:o,style:a}),...p})});function b(t){return(0,l.jsx)("svg",{...t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",strokeWidth:"1.5",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round"})}function k(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M7 5h6a3.5 3.5 0 0 1 0 7h-6z"}),(0,l.jsx)("path",{d:"M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"})]})}function M(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M11 5l6 0"}),(0,l.jsx)("path",{d:"M7 19l6 0"}),(0,l.jsx)("path",{d:"M14 5l-4 14"})]})}function v(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M7 5v5a5 5 0 0 0 10 0v-5"}),(0,l.jsx)("path",{d:"M5 19h14"})]})}function f(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 12l14 0"}),(0,l.jsx)("path",{d:"M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5"})]})}function g(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M17 15l4 4m0 -4l-4 4"}),(0,l.jsx)("path",{d:"M7 6v-1h11v1"}),(0,l.jsx)("path",{d:"M7 19l4 0"}),(0,l.jsx)("path",{d:"M13 5l-4 14"})]})}function m(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M19 18v-8l-2 2"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function C(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function L(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M19 14a2 2 0 1 0 -2 -2"}),(0,l.jsx)("path",{d:"M17 16a2 2 0 1 0 2 -2"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function y(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M20 18v-8l-4 6h5"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function H(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M17 18h2a2 2 0 1 0 0 -4h-2v-4h4"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function S(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M19 14a2 2 0 1 0 0 4a2 2 0 0 0 0 -4z"}),(0,l.jsx)("path",{d:"M21 12a2 2 0 1 0 -4 0v4"}),(0,l.jsx)("path",{d:"M4 6v12"}),(0,l.jsx)("path",{d:"M12 6v12"}),(0,l.jsx)("path",{d:"M11 18h2"}),(0,l.jsx)("path",{d:"M3 18h2"}),(0,l.jsx)("path",{d:"M4 12h8"}),(0,l.jsx)("path",{d:"M3 6h2"}),(0,l.jsx)("path",{d:"M11 6h2"})]})}function w(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M9 6l11 0"}),(0,l.jsx)("path",{d:"M9 12l11 0"}),(0,l.jsx)("path",{d:"M9 18l11 0"}),(0,l.jsx)("path",{d:"M5 6l0 .01"}),(0,l.jsx)("path",{d:"M5 12l0 .01"}),(0,l.jsx)("path",{d:"M5 18l0 .01"})]})}function z(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M11 6h9"}),(0,l.jsx)("path",{d:"M11 12h9"}),(0,l.jsx)("path",{d:"M12 18h8"}),(0,l.jsx)("path",{d:"M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"}),(0,l.jsx)("path",{d:"M6 10v-6l-2 2"})]})}function E(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M17 22v-2"}),(0,l.jsx)("path",{d:"M9 15l6 -6"}),(0,l.jsx)("path",{d:"M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"}),(0,l.jsx)("path",{d:"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"}),(0,l.jsx)("path",{d:"M20 17h2"}),(0,l.jsx)("path",{d:"M2 7h2"}),(0,l.jsx)("path",{d:"M7 2v2"})]})}function A(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M6 15h15"}),(0,l.jsx)("path",{d:"M21 19h-15"}),(0,l.jsx)("path",{d:"M15 11h6"}),(0,l.jsx)("path",{d:"M21 7h-6"}),(0,l.jsx)("path",{d:"M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"}),(0,l.jsx)("path",{d:"M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"})]})}function P(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M4 6l16 0"}),(0,l.jsx)("path",{d:"M4 12l10 0"}),(0,l.jsx)("path",{d:"M4 18l14 0"})]})}function T(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M4 6l16 0"}),(0,l.jsx)("path",{d:"M10 12l10 0"}),(0,l.jsx)("path",{d:"M6 18l14 0"})]})}function R(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M4 6l16 0"}),(0,l.jsx)("path",{d:"M8 12l8 0"}),(0,l.jsx)("path",{d:"M6 18l12 0"})]})}function I(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M4 6l16 0"}),(0,l.jsx)("path",{d:"M4 12l16 0"}),(0,l.jsx)("path",{d:"M4 18l12 0"})]})}function _(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 7l8 10m-8 0l8 -10"}),(0,l.jsx)("path",{d:"M21 20h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2"})]})}function N(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 7l8 10m-8 0l8 -10"}),(0,l.jsx)("path",{d:"M21 11h-4l3.5 -4a1.73 1.73 0 0 0 -3.5 -2"})]})}function G(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M7 8l-4 4l4 4"}),(0,l.jsx)("path",{d:"M17 8l4 4l-4 4"}),(0,l.jsx)("path",{d:"M14 4l-4 16"})]})}function B(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"}),(0,l.jsx)("path",{d:"M12.5 5.5l4 4"}),(0,l.jsx)("path",{d:"M4.5 13.5l4 4"}),(0,l.jsx)("path",{d:"M21 15v4h-8l4 -4z"})]})}function D(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 12h2"}),(0,l.jsx)("path",{d:"M17 12h2"}),(0,l.jsx)("path",{d:"M11 12h2"})]})}function U(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M20.042 16.045a9 9 0 0 0 -12.087 -12.087m-2.318 1.677a9 9 0 1 0 12.725 12.73"}),(0,l.jsx)("path",{d:"M3 3l18 18"})]})}function q(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M11 7l6 6"}),(0,l.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"})]})}function Z(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M18 6l-12 12"}),(0,l.jsx)("path",{d:"M6 6l12 12"})]})}function J(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("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"}),(0,l.jsx)("path",{d:"M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"}),(0,l.jsx)("path",{d:"M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"}),(0,l.jsx)("path",{d:"M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"})]})}function Y(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M5 12l5 5l10 -10"})]})}function F(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M9 15l6 -6"}),(0,l.jsx)("path",{d:"M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"}),(0,l.jsx)("path",{d:"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"})]})}function $(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"}),(0,l.jsx)("path",{d:"M11 13l9 -9"}),(0,l.jsx)("path",{d:"M15 4h5v5"})]})}function O(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M9 14l-4 -4l4 -4"}),(0,l.jsx)("path",{d:"M5 10h11a4 4 0 1 1 0 8h-1"})]})}function X(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M15 14l4 -4l-4 -4"}),(0,l.jsx)("path",{d:"M19 10h-11a4 4 0 1 0 0 8h1"})]})}function K(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M3.5 5.5l1.5 1.5l2.5 -2.5"}),(0,l.jsx)("path",{d:"M3.5 11.5l1.5 1.5l2.5 -2.5"}),(0,l.jsx)("path",{d:"M3.5 17.5l1.5 1.5l2.5 -2.5"}),(0,l.jsx)("path",{d:"M11 6l9 0"}),(0,l.jsx)("path",{d:"M11 12l9 0"}),(0,l.jsx)("path",{d:"M11 18l9 0"})]})}function V(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M20 6l-11 0"}),(0,l.jsx)("path",{d:"M20 12l-7 0"}),(0,l.jsx)("path",{d:"M20 18l-11 0"}),(0,l.jsx)("path",{d:"M4 8l4 4l-4 4"})]})}function W(t){return(0,l.jsxs)(b,{...t,children:[(0,l.jsx)("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),(0,l.jsx)("path",{d:"M20 6l-7 0"}),(0,l.jsx)("path",{d:"M20 12l-9 0"}),(0,l.jsx)("path",{d:"M20 18l-7 0"}),(0,l.jsx)("path",{d:"M8 8l-4 4l4 4"})]})}u.classes=p.Z,u.displayName="@mantine/tiptap/RichTextEditorContent";var Q=n(63409),tt=n(58898);let te={interactive:!0},tn=(0,a.d5)((t,e)=>{let{classNames:n,className:o,style:a,styles:r,vars:s,interactive:h,active:c,onMouseDown:x,disabled:p,...j}=(0,i.w)("RichTextEditorControl",te,t),u=(0,d.Y)();return(0,l.jsx)(Q.k,{...j,...u.getStyles("control",{className:o,style:a,classNames:n,styles:r}),disabled:p,"data-rich-text-editor-control":!0,tabIndex:h?0:-1,"data-interactive":h||void 0,"data-disabled":p||void 0,"data-active":c||void 0,"aria-pressed":c&&h||void 0,"aria-hidden":!h||void 0,ref:e,unstyled:u.unstyled,onMouseDown:t=>{t.preventDefault(),x?.(t)}})});tn.classes=p.Z,tn.displayName="@mantine/tiptap/RichTextEditorControl";let tl=(0,o.forwardRef)(({className:t,icon:e,...n},o)=>(0,l.jsx)(tn,{ref:o,...n,children:(0,l.jsx)(e,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}));function to({label:t,isActive:e,operation:n,icon:a,isDisabled:i}){let r=(0,o.forwardRef)((o,r)=>{let{editor:s,labels:h}=(0,d.Y)(),c=h[t];return(0,l.jsx)(tl,{...o,"aria-label":c,title:c,active:!!e?.name&&s?.isActive(e.name,e.attributes),ref:r,onClick:()=>s?.chain().focus()[n.name](n.attributes).run(),icon:o.icon||a,disabled:i?.(s)||!1})});return r.displayName=`@mantine/tiptap/${t}`,r}tl.displayName="@mantine/tiptap/RichTextEditorControlBase";let ta=to({label:"boldControlLabel",icon:t=>(0,l.jsx)(k,{...t}),isActive:{name:"bold"},operation:{name:"toggleBold"}}),ti=to({label:"italicControlLabel",icon:t=>(0,l.jsx)(M,{...t}),isActive:{name:"italic"},operation:{name:"toggleItalic"}}),tr=to({label:"underlineControlLabel",icon:t=>(0,l.jsx)(v,{...t}),isActive:{name:"underline"},operation:{name:"toggleUnderline"}}),ts=to({label:"strikeControlLabel",icon:t=>(0,l.jsx)(f,{...t}),isActive:{name:"strike"},operation:{name:"toggleStrike"}}),th=to({label:"clearFormattingControlLabel",icon:t=>(0,l.jsx)(g,{...t}),operation:{name:"unsetAllMarks"}}),td=to({label:"unlinkControlLabel",icon:t=>(0,l.jsx)(E,{...t}),operation:{name:"unsetLink"}}),tc=to({label:"bulletListControlLabel",icon:t=>(0,l.jsx)(w,{...t}),isActive:{name:"bulletList"},operation:{name:"toggleBulletList"}}),tx=to({label:"orderedListControlLabel",icon:t=>(0,l.jsx)(z,{...t}),isActive:{name:"orderedList"},operation:{name:"toggleOrderedList"}}),tp=to({label:"h1ControlLabel",icon:t=>(0,l.jsx)(m,{...t}),isActive:{name:"heading",attributes:{level:1}},operation:{name:"toggleHeading",attributes:{level:1}}}),tj=to({label:"h2ControlLabel",icon:t=>(0,l.jsx)(C,{...t}),isActive:{name:"heading",attributes:{level:2}},operation:{name:"toggleHeading",attributes:{level:2}}}),tu=to({label:"h3ControlLabel",icon:t=>(0,l.jsx)(L,{...t}),isActive:{name:"heading",attributes:{level:3}},operation:{name:"toggleHeading",attributes:{level:3}}}),tb=to({label:"h4ControlLabel",icon:t=>(0,l.jsx)(y,{...t}),isActive:{name:"heading",attributes:{level:4}},operation:{name:"toggleHeading",attributes:{level:4}}}),tk=to({label:"h5ControlLabel",icon:t=>(0,l.jsx)(H,{...t}),isActive:{name:"heading",attributes:{level:5}},operation:{name:"toggleHeading",attributes:{level:5}}}),tM=to({label:"h6ControlLabel",icon:t=>(0,l.jsx)(S,{...t}),isActive:{name:"heading",attributes:{level:6}},operation:{name:"toggleHeading",attributes:{level:6}}}),tv=to({label:"blockquoteControlLabel",icon:t=>(0,l.jsx)(A,{...t}),isActive:{name:"blockquote"},operation:{name:"toggleBlockquote"}}),tf=to({label:"alignLeftControlLabel",icon:t=>(0,l.jsx)(P,{...t}),operation:{name:"setTextAlign",attributes:"left"}}),tg=to({label:"alignRightControlLabel",icon:t=>(0,l.jsx)(T,{...t}),operation:{name:"setTextAlign",attributes:"right"}}),tm=to({label:"alignCenterControlLabel",icon:t=>(0,l.jsx)(R,{...t}),operation:{name:"setTextAlign",attributes:"center"}}),tC=to({label:"alignJustifyControlLabel",icon:t=>(0,l.jsx)(I,{...t}),operation:{name:"setTextAlign",attributes:"justify"}}),tL=to({label:"subscriptControlLabel",icon:t=>(0,l.jsx)(_,{...t}),isActive:{name:"subscript"},operation:{name:"toggleSubscript"}}),ty=to({label:"superscriptControlLabel",icon:t=>(0,l.jsx)(N,{...t}),isActive:{name:"superscript"},operation:{name:"toggleSuperscript"}}),tH=to({label:"codeControlLabel",icon:t=>(0,l.jsx)(G,{...t}),isActive:{name:"code"},operation:{name:"toggleCode"}}),tS=to({label:"codeBlockControlLabel",icon:t=>(0,l.jsx)(G,{...t}),isActive:{name:"codeBlock"},operation:{name:"toggleCodeBlock"}}),tw=to({label:"highlightControlLabel",icon:t=>(0,l.jsx)(B,{...t}),isActive:{name:"highlight"},operation:{name:"toggleHighlight"}}),tz=to({label:"hrControlLabel",icon:t=>(0,l.jsx)(D,{...t}),operation:{name:"setHorizontalRule"}}),tE=to({label:"unsetColorControlLabel",icon:t=>(0,l.jsx)(U,{...t}),operation:{name:"unsetColor"}}),tA=to({label:"undoControlLabel",icon:t=>(0,l.jsx)(O,{...t}),isDisabled:t=>!t?.can().undo(),operation:{name:"undo"}}),tP=to({label:"redoControlLabel",icon:t=>(0,l.jsx)(X,{...t}),isDisabled:t=>!t?.can().redo(),operation:{name:"redo"}}),tT=to({label:"tasksControlLabel",icon:t=>(0,l.jsx)(K,{...t}),isActive:{name:"taskList"},operation:{name:"toggleTaskList"}}),tR=to({label:"tasksSinkLabel",icon:t=>(0,l.jsx)(V,{...t}),operation:{name:"sinkListItem",attributes:"taskItem"},isDisabled:t=>!t?.can().sinkListItem("taskItem")}),tI=to({label:"tasksLiftLabel",icon:t=>(0,l.jsx)(W,{...t}),operation:{name:"liftListItem",attributes:"taskItem"},isDisabled:t=>!t?.can().liftListItem("taskItem")});var t_=n(51477),tN=n(50205),tG=n(74770),tB=n(893),tD=n(17115),tU=n(84821),tq=n(3900),tZ=n(65695);let tJ=t=>(0,l.jsx)(F,{...t}),tY={},tF=(0,a.d5)((t,e)=>{let n=(0,i.w)("RichTextEditorLinkControl",tY,t),{classNames:a,className:r,style:s,styles:h,vars:c,icon:x,popoverProps:p,disableTooltips:j,initialExternal:u,...b}=n,k=(0,d.Y)(),M={classNames:a,styles:h},[v,f]=(0,tU.U)(""),[g,m]=(0,o.useState)(u),[C,{open:L,close:y}]=(0,tq.q)(!1),H=()=>{L();let t=k.editor?.getAttributes("link");f(t?.href||""),m(t?.href?t?.target==="_blank":u)},S=()=>{y(),f(""),m(u)},w=()=>{S(),""===v?k.editor?.chain().focus().extendMarkRange("link").unsetLink().run():k.editor?.chain().focus().extendMarkRange("link").setLink({href:v,target:g?"_blank":null}).run()};(0,tZ.s)("edit-link",H,!1);let{resolvedClassNames:z,resolvedStyles:E}=(0,t_.h)({classNames:a,styles:h,props:n});return(0,l.jsxs)(tN.J,{trapFocus:!0,shadow:"md",withinPortal:!0,opened:C,onChange:t=>!t&&S(),offset:-44,zIndex:1e4,...p,children:[(0,l.jsx)(tN.J.Target,{children:(0,l.jsx)(tl,{icon:x||tJ,...b,"aria-label":k.labels.linkControlLabel,title:k.labels.linkControlLabel,onClick:H,active:k.editor?.isActive("link"),ref:e,classNames:z,styles:E,className:r,style:s})}),(0,l.jsx)(tN.J.Dropdown,{...k.getStyles("linkEditorDropdown",M),children:(0,l.jsxs)("div",{...k.getStyles("linkEditor",M),children:[(0,l.jsx)(tG.o,{placeholder:k.labels.linkEditorInputPlaceholder,"aria-label":k.labels.linkEditorInputLabel,type:"url",value:v,onChange:f,classNames:{input:k.getStyles("linkEditorInput",M).className},onKeyDown:t=>{"Enter"===t.key&&(t.preventDefault(),w())},rightSection:(0,l.jsx)(tB.u,{label:g?k.labels.linkEditorExternalLink:k.labels.linkEditorInternalLink,events:{hover:!0,focus:!0,touch:!0},withinPortal:!0,withArrow:!0,disabled:j,zIndex:1e4,children:(0,l.jsx)(Q.k,{onClick:()=>m(t=>!t),"data-active":g||void 0,...k.getStyles("linkEditorExternalControl",M),children:(0,l.jsx)($,{style:{width:(0,tt.h)(14),height:(0,tt.h)(14)}})})})}),(0,l.jsx)(tD.z,{variant:"default",onClick:w,...k.getStyles("linkEditorSave",M),children:k.labels.linkEditorSave})]})})]})});tF.classes=p.Z,tF.displayName="@mantine/tiptap/RichTextEditorLinkControl";var t$=n(27009),tO=n(26802),tX=n(37574),tK=n(93010),tV=n(54813);let tW={},tQ=(0,o.forwardRef)((t,e)=>{let{popoverProps:n,colors:a,colorPickerProps:r,...s}=(0,i.w)("RichTextEditorColorPickerControl",tW,t),{editor:h,labels:c,getStyles:x}=(0,d.Y)(),[p,{toggle:j,close:u}]=(0,tq.q)(!1),[b,k]=(0,o.useState)("palette"),M=h?.getAttributes("textStyle").color||"var(--mantine-color-text)",v=(t,e=!0)=>{(h?.chain()).focus().setColor(t).run(),e&&u()},f=a.map((t,e)=>(0,l.jsx)(t$.b,{component:"button",color:t,onClick:()=>v(t),size:26,radius:"xs",style:{cursor:"pointer"},title:c.colorPickerColorLabel(t),"aria-label":c.colorPickerColorLabel(t)},e));return(0,l.jsxs)(tN.J,{opened:p,withinPortal:!0,trapFocus:!0,onChange:t=>!t&&u(),...n,children:[(0,l.jsx)(tN.J.Target,{children:(0,l.jsx)(tn,{...s,"aria-label":c.colorPickerControlLabel,title:c.colorPickerControlLabel,ref:e,onClick:j,children:(0,l.jsx)(t$.b,{color:M,size:14})})}),(0,l.jsxs)(tN.J.Dropdown,{...x("linkEditorDropdown"),children:["palette"===b&&(0,l.jsx)(tO.M,{cols:7,spacing:2,children:f}),"colorPicker"===b&&(0,l.jsx)(tX.z,{defaultValue:M,onChange:t=>v(t,!1),...r}),(0,l.jsx)(tB.u.Group,{closeDelay:200,children:(0,l.jsxs)(tK.Z,{justify:"flex-end",gap:"xs",mt:"sm",children:["palette"===b&&(0,l.jsx)(tV.A,{variant:"default",onClick:u,title:c.colorPickerCancel,"aria-label":c.colorPickerCancel,children:(0,l.jsx)(Z,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}),(0,l.jsx)(tV.A,{variant:"default",onClick:()=>{(h?.chain()).focus().unsetColor().run(),u()},title:c.colorPickerClear,"aria-label":c.colorPickerClear,children:(0,l.jsx)(U,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}),"palette"===b?(0,l.jsx)(tV.A,{variant:"default",onClick:()=>k("colorPicker"),title:c.colorPickerColorPicker,"aria-label":c.colorPickerColorPicker,children:(0,l.jsx)(q,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}):(0,l.jsx)(tV.A,{variant:"default",onClick:()=>k("palette"),"aria-label":c.colorPickerPalette,title:c.colorPickerPalette,children:(0,l.jsx)(J,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})}),"colorPicker"===b&&(0,l.jsx)(tV.A,{variant:"default",onClick:u,title:c.colorPickerSave,"aria-label":c.colorPickerSave,children:(0,l.jsx)(Y,{style:{width:(0,tt.h)(16),height:(0,tt.h)(16)}})})]})})]})]})});tQ.displayName="@mantine/tiptap/ColorPickerControl";let t0={},t1=(0,o.forwardRef)((t,e)=>{let{color:n,...o}=(0,i.w)("RichTextEditorColorControl",t0,t),{editor:a,labels:r}=(0,d.Y)(),s=a?.getAttributes("textStyle").color||null,h=r.colorControlLabel(n);return(0,l.jsx)(tn,{...o,active:s===n,"aria-label":h,title:h,onClick:()=>(a?.chain()).focus().setColor(n).run(),ref:e,children:(0,l.jsx)(t$.b,{color:n,size:14})})});t1.displayName="@mantine/tiptap/RichTextEditorColorControl";let t2={},t4=(0,a.d5)((t,e)=>{let{classNames:n,className:o,style:a,styles:r,vars:h,...c}=(0,i.w)("RichTextEditorControlsGroup",t2,t),x=(0,d.Y)();return(0,l.jsx)(s.x,{ref:e,...x.getStyles("controlsGroup",{className:o,style:a,styles:r,classNames:n}),...c})});t4.classes=p.Z,t4.displayName="@mantine/tiptap/RichTextEditorControlsGroup";let t5={},t6=(0,a.d5)((t,e)=>{let{classNames:n,className:o,style:a,styles:r,vars:h,sticky:c,stickyOffset:x,mod:p,...j}=(0,i.w)("RichTextEditorToolbar",t5,t),u=(0,d.Y)();return(0,l.jsx)(s.x,{ref:e,mod:[{sticky:c},p],...u.getStyles("toolbar",{className:o,style:a,styles:r,classNames:n}),...j,__vars:{"--rte-sticky-offset":(0,tt.h)(x)}})});t6.classes=p.Z,t6.displayName="@mantine/tiptap/RichTextEditorToolbar";let t8={withCodeHighlightStyles:!0,withTypographyStyles:!0},t7=(0,a.d5)((t,e)=>{let n=(0,i.w)("RichTextEditor",t8,t),{classNames:a,className:c,style:x,styles:j,unstyled:u,vars:b,editor:k,withCodeHighlightStyles:M,withTypographyStyles:v,labels:f,children:g,...m}=n,C=(0,r.y)({name:"RichTextEditor",classes:p.Z,props:n,className:c,style:x,classNames:a,styles:j,unstyled:u,vars:b}),L=(0,o.useMemo)(()=>({...h,...f}),[f]);return(0,l.jsx)(d.r,{value:{editor:k,getStyles:C,labels:L,withCodeHighlightStyles:M,withTypographyStyles:v,unstyled:u},children:(0,l.jsx)(s.x,{...C("root"),...m,ref:e,children:g})})});t7.classes=p.Z,t7.displayName="@mantine/tiptap/RichTextEditor",t7.Content=u,t7.Control=tn,t7.Toolbar=t6,t7.ControlsGroup=t4,t7.Bold=ta,t7.Italic=ti,t7.Strikethrough=ts,t7.Underline=tr,t7.ClearFormatting=th,t7.H1=tp,t7.H2=tj,t7.H3=tu,t7.H4=tb,t7.H5=tk,t7.H6=tM,t7.BulletList=tc,t7.OrderedList=tx,t7.Link=tF,t7.Unlink=td,t7.Blockquote=tv,t7.AlignLeft=tf,t7.AlignRight=tg,t7.AlignCenter=tm,t7.AlignJustify=tC,t7.Superscript=ty,t7.Subscript=tL,t7.Code=tH,t7.CodeBlock=tS,t7.ColorPicker=tQ,t7.Color=t1,t7.Highlight=tw,t7.Hr=tz,t7.UnsetColor=tE,t7.Undo=tA,t7.Redo=tP,t7.TaskList=tT,t7.TaskListSink=tR,t7.TaskListLift=tI},14852:function(t,e,n){n.d(e,{Z:function(){return l}});var l={root:"m_dd3f7539",typographyStylesProvider:"m_d37966d9",content:"m_c2204cc2",linkEditorDropdown:"m_8a991b4f",control:"m_c2207da6",controlsGroup:"m_2ab47ef2",linkEditor:"m_b67b711e",linkEditorInput:"m_296cf94c",linkEditorExternalControl:"m_cfef614",linkEditorSave:"m_3b28e7bb",toolbar:"m_4574a3c4",taskList:"m_8b44009a"}}}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/_app-064da61fd1b9d559.js b/_next/static/chunks/pages/_app-5d0501ee30e25798.js similarity index 85% rename from _next/static/chunks/pages/_app-064da61fd1b9d559.js rename to _next/static/chunks/pages/_app-5d0501ee30e25798.js index 30cf46f1ef8..ae23570826c 100644 --- a/_next/static/chunks/pages/_app-064da61fd1b9d559.js +++ b/_next/static/chunks/pages/_app-5d0501ee30e25798.js @@ -1,4 +1,4 @@ -(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[w]+" "+k:s(k,/&\f/g,h[w])).trim())&&(d[x++]=j);return y(e,t,n,0===i?P:l,d,p,m)}function F(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=k(),38===r&&12===o&&(t[n]=1),!j(o);)w();return u(b,e,g)},D=function(e,t){var n=-1,r=44;do switch(j(r)){case 0:38===r&&12===k()&&(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===k()?"&\f":"",t[n]=e[n].length;break}default:e[n]+=i(r)}while(r=w());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?"":" "}(B);break;case 92:G+=function(e,t){for(var n;--t&&w()&&!(v<48)&&!(v>102)&&(!(v>57)||!(v<65))&&(!(v>70)||!(v<97)););return n=g+(t<6&&32==k()&&32==w()),u(b,e,n)}(g-1,7);continue;case 47:switch(k()){case 42:case 47:p(y(M=function(e,t){for(;w();)if(e+v===57)break;else if(e+v===84&&47===k())break;return"/*"+u(b,t,g-1)+"*"+i(47===e?e:w())}(w(),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?F(G+";",o,r,R-1):F(s(G," ","")+";",o,r,R-2),I);break;case 59:G+=";";default:if(p(V=A(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(A(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),_=B;default:if(L<1){if(123==z)--L;else if(125==z&&0==L++&&125==(v=g>0?l(b,--g):0,f--,10===v&&(f=1,m--),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===k()&&(G+=S(w())),N=k(),P=R=d(H=G+=function(e){for(;!j(k());)w();return u(b,e,g)}(g)),z++;break;case 45:45===B&&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 m(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(95810)}])},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 A},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),m=n(63409),f=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,f.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)(m.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 w(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 k=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),B=n.n(_);function A(e){let{href:t,...n}=e,o=null==t?void 0:t.replace("https://mantine.dev","");return o&&!(null==o?void 0:o.startsWith("http"))&&o.trim().length>0?(0,r.jsx)(N.e,{className:B().link,component:R(),href:o,...n}):(0,r.jsx)(N.e,{className:B().link,href:t,...n})}var F=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)(F.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)(A,{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)(k.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)(A,{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)(A,{href:"/core/input",children:"Input"})," ","and ",(0,r.jsx)(A,{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)(A,{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)(A,{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)(A,{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)(A,{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)(A,{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)(A,{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)(A,{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:"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/songkeys/next-app-mantine-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:"next",name:"ship-template",link:"https://github.com/paralect/ship",description:"Fullstack boilerplate with Next.js, auth, MongoDB, Turborepo"},{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:"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 em(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)(A,{href:"/styles/postcss-preset",children:"PostCSS setup"}),","," ",(0,r.jsx)(A,{href:"/theming/color-schemes",children:"ColorSchemeScript"})," and other essential features. Some templates also include additional features like"," ",(0,r.jsx)(A,{href:"/guides/jest",children:"Jest"}),","," ",(0,r.jsx)(A,{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)(A,{href:"/templates-usage",children:"this page"}),"."]}),(0,r.jsx)(ep,{type:t})]})}function ef(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)(A,{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)(A,{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)(A,{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 ew(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 ek=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)(A,{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:ek(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)(A,{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 eB(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 eA=n(97654),eF=n(28559);function eL({size:e,style:t,...n}){return(0,r.jsxs)(eF.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,eA.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)(F.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","@tiptap/pm","@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@^7.1.0"]},{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)(F.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:w,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:em,ComboboxDisclaimer:ef,ComboboxData:ey,ComboboxLargeData:ex,ComboboxFiltering:ew,ComboboxProps:eC,ServerComponentsIncompatible:eS,ExamplesButton:eB,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:A,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),keywords:t.searchTags,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),m=n(93010),f=n(28559),h=n(23205),g=n(893),v=n(90664),b=n(19289),y=n(58092),x=n(68893);let w=(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 k="m_83c3d5d1";function j(){let{setColorScheme:e}=(0,y.X)(),t=(0,x.l)("light",{getInitialValueInEffect:!0});return(0,r.jsxs)(w,{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)(k,"m_f4e3c6be"),stroke:1.5}),(0,r.jsx)(b.Z,{className:(0,s.Z)(k,"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)(w,{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)(w,{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)(w,{tooltip:"Source code",component:"a",href:e,children:(0,r.jsx)(R.E,{size:22})})}var _=n(27111);function B({className:e,...t}){return(0,r.jsx)(d.k,{...t,className:(0,s.Z)("m_6e98493a",e),children:(0,r.jsxs)(m.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 A({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)(m.Z,{gap:"xs",...l,children:[o&&(0,r.jsx)(B,{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 F({onSearch:e}){return(0,r.jsx)(w,{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.13.3"}),(0,r.jsx)(a.Z,{className:O().versionChevron,stroke:1.5})]})})}),(0,r.jsx)(c.v.Dropdown,{children:g})]})]}),(0,r.jsx)(A,{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)(m.Z,{justify:"space-between",w:"100%",wrap:"nowrap",children:[(0,r.jsx)(f.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)(m.Z,{gap:"sm",children:[(0,r.jsx)(F,{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"}]]),em=(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"}]]),ef=(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:em,buttons:ef,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 ew(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 ek(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)(ew,{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)(ew,{data:e,onNavbarClose:n,linkRef:t=>{c.current[e.slug]=t}},e.slug)});return(0,r.jsxs)(f.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)(ek,{data:e,onNavbarClose:n},e.group));return(0,r.jsx)(f.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.jsxs)(o.x,{component:"svg",__vars:{"--icon-size":(0,i.h)(t)},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 394 80",className:s().nextIcon,"data-large":!0,...n,children:[(0,r.jsx)("path",{fill:"currentColor",d:"M261.919.033h68.628V12.7h-27.224v66.639H289.71V12.7h-27.791V.033zM149.052.033V12.7h-55.01v20.377h44.239v12.667H94.042v20.928h55.01V79.34H80.43V12.7h-.006V.033h68.628zM183.32.066h-17.814l63.806 79.306h17.866l-31.907-39.626L247.127.126l-17.815.028-22.96 28.516L183.32.066zM201.6 56.715l-8.921-11.092-27.224 33.81h17.865l18.28-22.718z"}),(0,r.jsx)("path",{fill:"currentColor",fillRule:"evenodd",d:"M80.907 79.339L17.015 0H0v79.306h13.612V16.952l50.195 62.387h17.1z",clipRule:"evenodd"}),(0,r.jsx)("path",{fill:"currentColor",d:"M333.607 78.855a3.528 3.528 0 01-2.555-1.036c-.71-.691-1.061-1.527-1.052-2.518-.009-.963.342-1.79 1.052-2.481a3.528 3.528 0 012.555-1.036c.959 0 1.798.345 2.508 1.036.72.69 1.079 1.518 1.089 2.481a3.44 3.44 0 01-.508 1.79 3.675 3.675 0 01-1.319 1.282 3.403 3.403 0 01-1.77.482zM356.84 45.445h6.032v23.24c-.009 2.135-.471 3.962-1.374 5.498-.913 1.536-2.177 2.708-3.8 3.535-1.614.818-3.505 1.237-5.654 1.237-1.965 0-3.726-.355-5.294-1.046-1.568-.69-2.813-1.726-3.726-3.09-.923-1.363-1.375-3.063-1.375-5.098h6.042c.009.89.212 1.663.599 2.308a3.855 3.855 0 001.605 1.481c.691.346 1.485.519 2.379.519.969 0 1.799-.2 2.472-.61.673-.4 1.19-1 1.55-1.799.35-.79.535-1.772.544-2.935v-23.24zM387.691 54.534c-.147-1.409-.793-2.509-1.918-3.29-1.135-.79-2.601-1.182-4.4-1.182-1.263 0-2.351.191-3.255.564-.904.382-1.605.89-2.085 1.536-.479.645-.719 1.381-.738 2.208 0 .691.166 1.29.489 1.79.323.51.756.937 1.319 1.282a8.806 8.806 0 001.845.882c.682.236 1.365.436 2.047.6l3.145.772a21.74 21.74 0 013.662 1.182 12.966 12.966 0 013.163 1.872 8.384 8.384 0 012.214 2.726c.544 1.064.821 2.309.821 3.745 0 1.936-.498 3.635-1.504 5.108-1.005 1.463-2.453 2.608-4.353 3.435-1.891.818-4.178 1.236-6.871 1.236-2.601 0-4.87-.4-6.779-1.2-1.918-.79-3.413-1.954-4.492-3.48-1.079-1.527-1.66-3.39-1.743-5.58h5.977c.083 1.144.452 2.099 1.079 2.871.636.763 1.466 1.327 2.481 1.709 1.024.372 2.167.563 3.431.563 1.319 0 2.481-.2 3.486-.59.996-.391 1.78-.937 2.343-1.646.572-.7.858-1.526.867-2.472-.009-.863-.268-1.581-.766-2.145-.507-.563-1.208-1.036-2.103-1.417a21.606 21.606 0 00-3.154-1.027l-3.818-.964c-2.758-.7-4.944-1.763-6.54-3.19-1.604-1.427-2.398-3.317-2.398-5.69 0-1.944.535-3.653 1.615-5.116 1.069-1.463 2.536-2.6 4.39-3.408 1.863-.818 3.966-1.218 6.308-1.218 2.38 0 4.464.4 6.263 1.218 1.798.809 3.21 1.936 4.233 3.372 1.024 1.436 1.559 3.08 1.587 4.944h-5.848z"})]})},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"},Changelog7110:{title:"Version v7.11.0",slug:"/changelog/7-11-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.11.0",date:"June 26th, 2024"},Changelog7120:{title:"Version v7.12.0",slug:"/changelog/7-12-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.12.0",date:"August 6th, 2024"},Changelog7130:{title:"Version v7.13.0",slug:"/changelog/7-13-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.13.0",date:"September 26th, 2024"},PreviousChangelogs:{title:"All releases",slug:"/changelog/previous-versions",hideHeader:!0},AllReleases:{title:"All releases",slug:"/changelog/all-releases",hideHeader:!0}};function o(e,t){let n=e.replace(/[A-Z]/g,e=>"-".concat(e.toLowerCase()));return{title:n,package:"@mantine/hooks",slug:"/hooks/".concat(n),description:t,import:"import { ".concat(e," } from '@mantine/hooks';"),source:"@mantine/hooks/src/".concat(n,"/").concat(n,".ts"),docs:"hooks/".concat(n,".mdx"),searchTags:"".concat(e," ").concat(n.split("-").join(" "))}}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/core/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"},SemiCircleProgress:{title:"SemiCircleProgress",package:"@mantine/core",slug:"/core/semi-circle-progress",props:["SemiCircleProgress"],styles:["SemiCircleProgress"],description:"Represent progress with semi circle diagram",import:"import { SemiCircleProgress } from '@mantine/core';",source:"@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.tsx",docs:"core/semi-circle-progress.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:"Scatter chart component",import:"import { ScatterChart } from '@mantine/charts';",source:"@mantine/charts/src/ScatterChart/ScatterChart.tsx",docs:"charts/scatter-chart.mdx"},BubbleChart:{title:"BubbleChart",props:["BubbleChart"],styles:["BubbleChart"],package:"@mantine/charts",slug:"/charts/bubble-chart",description:"Bubble chart component",import:"import { BubbleChart } from '@mantine/charts';",source:"@mantine/charts/src/BubbleChart/BubbleChart.tsx",docs:"charts/bubble-chart.mdx"},CompositeChart:{title:"CompositeChart",props:["CompositeChart"],styles:["CompositeChart"],package:"@mantine/charts",slug:"/charts/composite-chart",description:"Composed chart with support for Area, Bar and Line charts",import:"import { CompositeChart } from '@mantine/charts';",source:"@mantine/charts/src/CompositeChart/CompositeChart.tsx",docs:"charts/composite-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,a.SemiCircleProgress]},{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.CompositeChart,a.DonutChart,a.PieChart,a.RadarChart,a.ScatterChart,a.BubbleChart,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.Changelog7130,a.Changelog7120,a.Changelog7110,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),[])},95810:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return e_}});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 m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function f(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,m(e,t)}n(13980);var h=n(28316),g={disabled:!1},v=d.createContext(null),b="unmounted",y="exited",x="entering",w="entered",k="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=w:o=t.unmountOnExit||t.mountOnEnter?b:y,r.state={status:o},r.nextCallback=null,r}f(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!==w&&(t=x):(n===x||n===w)&&(t=k)}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:w},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:w},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:k},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)(),m=()=>window.clearTimeout(p.current),f=()=>{t(e.id),m()},h=()=>{"number"==typeof u&&(p.current=window.setTimeout(f,u))};return(0,d.useEffect)(()=>{e.onOpen?.(e)},[]),(0,d.useEffect)(()=>(h(),m),[u]),(0,r.jsx)(G.P,{...o,...l,onClose:f,ref:i,onMouseEnter:m,onMouseLeave:h,children:c})});W.displayName="@mantine/notifications/NotificationContainer";var Y=n(60048),q={root:"m_b37d9ac7",notification:"m_5ed0edd0"};let K={position:"bottom-right",autoClose:4e3,transitionDuration:250,containerWidth:440,notificationMaxHeight:200,limit:5,zIndex:(0,P.w)("overlay"),store:Y.Ps,withinPortal:!0},U=(0,R.Z)((e,{zIndex:t,containerWidth:n})=>({root:{"--notifications-z-index":t?.toString(),"--notifications-container-width":(0,N.h)(n)}})),X=(0,_.d5)((e,t)=>{let n=(0,B.w)("Notifications",K,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,position:u,autoClose:p,transitionDuration:m,containerWidth:f,notificationMaxHeight:h,limit:g,zIndex:v,store:b,portalProps:y,withinPortal:x,...w}=n,k=(0,A.rZ)(),C=(0,Y.zn)(b),S=(0,$.N)(),I=(0,z.J)(),M=(0,d.useRef)({}),T=(0,d.useRef)(0),P=k.respectReducedMotion&&I?1:m,R=(0,F.y)({name:"Notifications",classes:q,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:U});(0,d.useEffect)(()=>{b?.updateState(e=>({...e,limit:g||5,defaultPosition:u}))},[g,u]),(0,H.l)(()=>{C.notifications.length>T.current&&setTimeout(()=>S(),0),T.current=C.notifications.length},[C.notifications]);let N=C.notifications.reduce((e,t)=>(e[t.position||u].push(t),e),O.reduce((e,t)=>(e[t]=[],e),{})),_=O.reduce((e,t)=>(e[t]=N[t].map(({style:e,...n})=>(0,r.jsx)(j,{timeout:P,onEnter:()=>M.current[n.id].offsetHeight,nodeRef:{current:M.current[n.id]},children:o=>(0,r.jsx)(W,{ref:e=>{M.current[n.id]=e},data:n,onHide:e=>(0,Y.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:Z[a],transitionDuration:`${r}ms, ${r}ms, ${r}ms`,transitionTimingFunction:"cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear",transitionProperty:"opacity, transform, max-height"},c={opacity:1,transform:V[a]},l={opacity:0,maxHeight:0,transform:Z[a]};return{...s,...{entering:c,entered:c,exiting:l,exited:l}[e]}}({state:o,position:t,transitionDuration:P,maxHeight:h}),...e}})})},n.id)),e),{});return(0,r.jsxs)(L.q,{withinPortal:x,...y,children:[(0,r.jsx)(D.x,{...R("root"),"data-position":"top-center",ref:t,...w,children:(0,r.jsx)(E,{children:_["top-center"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"top-left",...w,children:(0,r.jsx)(E,{children:_["top-left"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"top-right",...w,children:(0,r.jsx)(E,{children:_["top-right"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"bottom-right",...w,children:(0,r.jsx)(E,{children:_["bottom-right"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"bottom-left",...w,children:(0,r.jsx)(E,{children:_["bottom-left"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"bottom-center",...w,children:(0,r.jsx)(E,{children:_["bottom-center"]})})]})});X.classes=q,X.displayName="@mantine/notifications/Notifications",X.show=Y.N9.show,X.hide=Y.N9.hide,X.update=Y.N9.update,X.clean=Y.N9.clean,X.cleanQueue=Y.N9.cleanQueue,X.updateState=Y.N9.updateState;var J=n(70980),Q=n(45847),ee=n.n(Q);function et(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(ee(),{strategy:"afterInteractive",src:"https://www.googletagmanager.com/gtag/js?id=G-4Z4NNVLRH5"}),(0,r.jsx)(ee(),{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 en=n(5632),er=n(58092),eo=n(68893);let ei=["/combobox"];function ea(){let e=(0,en.useRouter)(),{setColorScheme:t}=(0,er.X)(),{toggleDirection:n}=(0,a.gm)(),o=(0,eo.l)("light");return(0,u.A)([["mod + J",()=>t("light"===o?"dark":"light")],["mod + shift + L",()=>!ei.includes(e.pathname)&&n()]],[]),(0,r.jsx)(r.Fragment,{children:null})}var es=n(52905),ec=n(8582),el=n(17115),eu=n(78222),ed=n(73533),ep=n(93010);let em=(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:m}=o,f=function(){let e=(0,d.useContext)(em);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)(ep.Z,{mt:u?0:"md",justify:"flex-end",...s,children:[(0,r.jsx)(el.z,{variant:"default",...t,onClick:n=>{"function"==typeof t?.onClick&&t?.onClick(n),"function"==typeof c&&c(),a&&f.closeModal(e)},children:t?.children||p}),(0,r.jsx)(el.z,{...n,onClick:t=>{"function"==typeof n?.onClick&&n?.onClick(t),"function"==typeof l&&l(),i&&f.closeModal(e)},children:n?.children||m})]})]})}em.displayName="@mantine/modals/ModalsContext";var eh=n(2807);function eg(e,t){t&&"confirm"===e.type&&e.props.onCancel?.(),e.props.onClose?.()}function ev(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;eg(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=>{eg(e,t.canceled)}),{current:e.current,modals:[]};default:return e}}function eb({children:e,modalProps:t,labels:n,modals:o}){let[i,a]=(0,d.useReducer)(ev,{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,ed.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,ed.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,ed.k)();return a({type:"OPEN",modal:{id:r,type:"context",props:n,ctx:e}}),r},[a]),m=(0,d.useCallback)((e,t)=>{a({type:"CLOSE",modalId:e,canceled:t})},[s,a]);(0,eh.Ro)({openModal:l,openConfirmModal:u,openContextModal:({modal:e,...t})=>p(e,t),closeModal:m,closeContextModal:m,closeAllModals:c});let f={modals:i.modals,openModal:l,openConfirmModal:u,openContextModal:p,closeModal:m,closeContextModal:m,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:f,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:t}}default:return{modalProps:{},content:null}}})();return(0,r.jsxs)(em.Provider,{value:f,children:[(0,r.jsx)(eu.u,{zIndex:(0,P.w)("modal")+1,...t,...h,opened:i.modals.length>0,onClose:()=>m(i.current?.id),children:g}),e]})}let ey=e=>{let{context:t,id:n,innerProps:o}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(ec.x,{size:"sm",children:o.modalBody}),(0,r.jsx)(el.z,{fullWidth:!0,mt:"md",onClick:()=>t.closeModal(n),children:"Close modal"})]})};function ex(e){let{children:t}=e;return(0,r.jsx)(eb,{labels:{confirm:"Confirm",cancel:"Cancel"},modals:{demonstration:ey},children:t})}var ew=n(20233),ek=n(47196),ej=n(87744),eC=n(99469),eS=n.n(eC);function eI(){return(0,r.jsx)(i(),{children:(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:":root{ --docs-font-primary: ".concat(eS().style.fontFamily,", ").concat(ej.t.fontFamily,"; }")}})})}var eM=n(60231),eT=n(9065);let eE=(0,eM.j)({fontFamilyMonospace:"Menlo, Monaco, ".concat(ej.t.fontFamilyMonospace),colors:{virtual:(0,eT.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"]}}),eP=(0,n(2107).Z)({key:"css"});n(59739);let eR=["/","/combobox","/app-shell"];async function eN(){let{getHighlighter:e}=await n.e(92198).then(n.bind(n,92198));return await e({langs:["tsx","scss","html","bash","json"],themes:[]})}function e_(e){let{Component:t,pageProps:n,router:o}=e,d=!eR.includes(o.pathname),[p,m]=(0,l.I)({key:"mantine-navbar-opened",defaultValue:!0});return(0,u.A)([["mod + alt + N",()=>m(!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)(et,{}),(0,r.jsx)(eI,{}),(0,r.jsx)(a._9,{initialDirection:"ltr",detectDirection:!1,children:(0,r.jsx)(c.Nl,{cache:eP,children:(0,r.jsx)(s.M,{theme:eE,defaultColorScheme:"light",children:(0,r.jsxs)(J.U,{loadShiki:eN,children:[(0,r.jsx)(ew.o,{}),(0,r.jsx)(X,{}),(0,r.jsx)(ex,{children:(0,r.jsxs)(es.Cu,{children:[(0,r.jsx)(ea,{}),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 m}});let a="refresh",s="navigate",c="restore",l="server-patch",u="prefetch",d="fast-refresh",p="server-action";function m(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),m=n(70514),f=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)}(async()=>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:w=null,passHref:k,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),B=null!=N?N:_,A=!N,F=!1!==w,L=null===w?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,m.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(()=>{B&&V&&F&&b(B,D,$,{locale:I},{kind:L},A)},[$,D,V,I,F,null==N?void 0:N.locale,B,A,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),B&&!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,B,D,$,j,C,S,I,A)},onMouseEnter(e){P||"function"!=typeof T||T(e),P&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),B&&(F||!A)&&b(B,D,$,{locale:I,priority:!0,bypassPrefetchedCheck:!0},{kind:L},A)},onTouchStart:function(e){P||"function"!=typeof E||E(e),P&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),B&&(F||!A)&&b(B,D,$,{locale:I,priority:!0,bypassPrefetchedCheck:!0},{kind:L},A)}};if((0,l.isAbsoluteUrl)($))Y.href=$;else if(!P||k||"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,f.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),m=(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]),[m,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:f,shards:b,noIsolation:x,inert:w,setCallbacks:c,allowPinchZoom:!!k,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:m,ref:I}),p))});v.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},v.classNames={fullWidth:m,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,f({},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])}},w=function(){var e=x();return function(t){return e(t.styles,t.dynamic),null}},k={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 k;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=w(),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(m," {\n margin-right: ").concat(s,"px ").concat(r,";\n }\n \n .").concat(p," .").concat(p," {\n right: 0 ").concat(r,";\n }\n \n .").concat(m," .").concat(m," {\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),B(e,r)){var o=A(e,r);if(o[1]>o[2])return!0}r=r.parentNode}while(r&&r!==n.body);return!1},B=function(e,t){return"v"===e?N(t,"overflowY"):N(t,"overflowX")},A=function(e,t){return"v"===e?[t.scrollTop,t.scrollHeight,t.clientHeight]:[t.scrollLeft,t.scrollWidth,t.clientWidth]},F=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,m=0;do{var f=A(e,c),h=f[0],g=f[1]-f[2]-a*h;(h||g)&&B(e,c)&&(p+=g,m+=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(m)||!o&&-s>m)&&(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(w)[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 m=r.current||o;return F(m,t,e,"h"===m?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))},[]),m=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:m}),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 f=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,f?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 f},oo:function(){return i},uY:function(){return m},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,m=i.y+i.height/2-a.height/2,f=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:m};break;case"left":o={x:i.x-a.width,y:m};break;default:o={x:i.x,y:i.y}}switch((0,r.hp)(t)){case"start":o[c]-=f*(n&&d?-1:1);break;case"end":o[c]+=f*(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),m=r,f={},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),m={x:n,y:o},f=(0,r.Wh)(i),h=(0,r.I4)(f),g=await s.getDimensions(u),v="y"===f,b=v?"clientHeight":"clientWidth",y=a.reference[h]+a.reference[f]-m[f]-a.floating[h],x=m[f]-a.reference[f],w=await (null==s.getOffsetParent?void 0:s.getOffsetParent(u)),k=w?w[b]:0;k&&await (null==s.isElement?void 0:s.isElement(w))||(k=c.floating[b]||a.floating[h]);let j=k/2-g[h]/2-1,C=(0,r.VV)(p[v?"top":"left"],j),S=(0,r.VV)(p[v?"bottom":"right"],j),I=k-g[h]-S,M=k/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))||[]),m=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),f=(0,r.JB)(l(p)),h=(0,r.yd)(c),g=await a.getElementRects({reference:{getBoundingClientRect:function(){if(2===m.length&&m[0].left>m[1].right&&null!=u&&null!=d)return m.find(e=>u>e.left-h.left&&ue.top-h.top&&d=2){if("y"===(0,r.Qq)(n)){let e=m[0],t=m[m.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)(...m.map(e=>e.right)),o=(0,r.VV)(...m.map(e=>e.left)),i=m.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 f}},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:m,crossAxis:f,alignmentAxis:h}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...p};return c&&"number"==typeof h&&(f="end"===c?-1*h:h),l?{x:f*d,y:m*u}:{x:m*u,y:f*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}}}}},m=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),m=(0,r.Qq)((0,r.k3)(i)),f=(0,r.Rn)(m),h=d[f],g=d[m];if(s){let e="y"===f?"top":"left",t="y"===f?"bottom":"right",n=h+p[e],o=h-p[t];h=(0,r.uZ)(n,h,o)}if(c){let e="y"===m?"top":"left",t="y"===m?"bottom":"right",n=g+p[e],o=g-p[t];g=(0,r.uZ)(n,g,o)}let v=l.fn({...t,[f]:h,[m]:g});return{...v,data:{x:v.x-n,y:v.y-o}}}}},f=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),m=(0,r.Rn)(p),f=d[m],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"===m?"height":"width",t=a.reference[m]-a.floating[e]+v.mainAxis,n=a.reference[m]+a.reference[e]-v.mainAxis;fn&&(f=n)}if(u){var b,y;let e="y"===m?"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{[m]:f,[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),m=(0,r.k3)(i),f=(0,r.hp)(i),h="y"===(0,r.Qq)(i),{width:g,height:v}=s.floating;"top"===m||"bottom"===m?(n=m,o=f===(await (null==c.isRTL?void 0:c.isRTL(l.floating))?"start":"end")?"left":"right"):(o=m,n="end"===f?"top":"bottom");let b=v-p[n],y=g-p[o],x=!t.middlewareData.shift,w=b,k=y;if(h){let e=g-p.left-p.right;k=f||x?(0,r.VV)(y,e):e}else{let e=v-p.top-p.bottom;w=f||x?(0,r.VV)(b,e):e}if(x&&!f){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?k=g-2*(0!==e||0!==t?e+t:(0,r.Fp)(p.left,p.right)):w=v-2*(0!==n||0!==o?n+o:(0,r.Fp)(p.top,p.bottom))}await u({...t,availableWidth:k,availableHeight:w});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 k},dp:function(){return j},dr:function(){return I},oo:function(){return M},uY:function(){return w},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 m=(void 0===(a=n)&&(a=!1),o&&(!a||o===(0,i.Jj)(d))&&a)?u(d):(0,r.ze)(0),f=(l.left+m.x)/p.x,h=(l.top+m.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;f*=e.x,h*=e.y,g*=e.x,v*=e.y,f+=o,h+=a,n=(0,i.Jj)(n).frameElement}}return(0,r.JB)({width:g,height:v,x:f,y:h})}let p=[":popover-open",":modal"];function m(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 f(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+f(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=f(s))}let h=l.left+u.scrollLeft-p.x,g=l.top+u.scrollTop-p.y,[v,b,y]=m(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?m(t.floating):[!1];if(o===s||l)return n;let u={scrollLeft:0,scrollTop:0},p=(0,r.ze)(1),f=(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),f.x=e.x+o.clientLeft,f.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+f.x,y:n.y*p.y-u.scrollTop*p.y+f.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:m=!1}=o,f=s(e),h=c||l?[...f?(0,i.Kx)(f):[],...(0,i.Kx)(t)]:[];h.forEach(e=>{c&&e.addEventListener("scroll",n,{passive:!0}),l&&e.addEventListener("resize",n)});let g=f&&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:m}=e.getBoundingClientRect();if(c||t(),!p||!m)return;let f=(0,r.GW)(d),h=(0,r.GW)(a.clientWidth-(u+p)),g={rootMargin:-f+"px "+-h+"px "+-(0,r.GW)(a.clientHeight-(d+m))+"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}(f,n):null,v=-1,b=null;u&&(b=new ResizeObserver(e=>{let[r]=e;r&&r.target===f&&b&&(b.unobserve(t),cancelAnimationFrame(v),v=requestAnimationFrame(()=>{var e;null==(e=b)||e.observe(t)})),n()}),f&&!m&&b.observe(f),b.observe(t));let y=m?d(e):null;return m&&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,m&&cancelAnimationFrame(a)}}let w=o.uY,k=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:m,floating:f}={},transform:h=!0,whileElementsMounted:g,open:v}=e,[b,y]=o.useState({x:0,y:0,strategy:n,placement:t,middlewareData:{},isPositioned:!1}),[x,w]=o.useState(a);c(x,a)||w(a);let[k,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=m||k,E=f||C,P=o.useRef(null),R=o.useRef(null),N=o.useRef(b),_=null!=g,B=d(g),A=d(p),F=o.useCallback(()=>{if(!P.current||!R.current)return;let e={placement:t,strategy:n,middleware:x};A.current&&(e.platform=A.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,A]);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(B.current)return B.current(T,E,F);F()}},[T,E,F,B,_]);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:F,refs:D,elements:$,floatingStyles:z}),[b,F,D,$,z])}},63607:function(e,t,n){"use strict";n.d(t,{e0:function(){return B},Qu:function(){return A},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 m(e,t){return null!=t&&("composedPath"in e?e.composedPath().includes(t):null!=e.target&&t.contains(e.target))}function f(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++,k=o["useId".toString()]||function(){let[e,t]=r.useState(()=>y?w():void 0);return b(()=>{null==e&&t(w())},[]),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:m}=e,{enabled:f=!0,delay:h=0,handleClose:g=null,mouseOnly:v=!1,restMs:y=0,move:x=!0}=t,w=I(),k=S(),j=T(g),C=T(h),M=r.useRef(),R=r.useRef(),N=r.useRef(),_=r.useRef(),B=r.useRef(!0),A=r.useRef(!1),F=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(f)return c.on("openchange",e),()=>{c.off("openchange",e)};function e(e){let{open:t}=e;t||(clearTimeout(R.current),clearTimeout(_.current),B.current=!0)}},[f,c]),r.useEffect(()=>{if(!f||!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,f,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(()=>{F.current(),N.current=void 0},[]),z=r.useCallback(()=>{if(A.current){let e=p(m.floating.current).body;e.style.pointerEvents="",e.removeAttribute(E),A.current=!1}},[m]);return r.useEffect(()=>{if(f&&(0,i.kK)(l))return n&&l.addEventListener("mouseleave",m),null==u||u.addEventListener("mouseleave",m),x&&l.addEventListener("mousemove",r,{once:!0}),l.addEventListener("mouseenter",r),l.addEventListener("mouseleave",c),()=>{n&&l.removeEventListener("mouseleave",m),null==u||u.removeEventListener("mouseleave",m),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),B.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;F.current();let o=p(u);if(clearTimeout(_.current),j.current){n||clearTimeout(R.current),N.current=j.current({...e,tree:w,x:r.clientX,y:r.clientY,onClose(){z(),$(),D(r,!0,"safe-polygon")}});let t=N.current;o.addEventListener("mousemove",t),F.current=()=>{o.removeEventListener("mousemove",t)};return}"touch"===M.current&&s(u,r.relatedTarget)||D(r)}function m(n){t()||null==j.current||j.current({...e,tree:w,x:n.clientX,y:n.clientY,onClose(){z(),$(),D(n)}})(n)}},[l,u,f,e,v,y,x,D,$,z,o,n,w,C,j,a]),b(()=>{var e,t;if(f&&n&&null!=(e=j.current)&&e.__options.blockPointerEvents&&L()){let e=p(u).body;if(e.setAttribute(E,""),e.style.pointerEvents="none",A.current=!0,(0,i.kK)(l)&&u){let e=null==w||null==(t=w.nodesRef.current.find(e=>e.id===k))||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=""}}}},[f,n,k,u,l,w,j,L]),b(()=>{n||(M.current=void 0,$(),z())},[n,$,z]),r.useEffect(()=>()=>{$(),clearTimeout(R.current),clearTimeout(_.current),z()},[f,l,$,z]),r.useMemo(()=>{if(!f)return{};function e(e){M.current=e.pointerType}return{reference:{onPointerDown:e,onPointerEnter:e,onMouseMove(e){n||0===y||(clearTimeout(_.current),_.current=setTimeout(()=>{B.current||o(!0,e.nativeEvent,"hover")},y))}},floating:{onMouseEnter(){clearTimeout(R.current)},onMouseLeave(e){D(e.nativeEvent,!1)}}}},[f,y,n,o,D])}let N=r.createContext({delay:0,initialDelay:0,timeoutMs:0,currentId:null,setCurrentId:()=>{},setState:()=>{},isInstantPhase:!1}),_=()=>r.useContext(N),B=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)},A=(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 F(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:w="pointerdown",ancestorScroll:k=!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:B,outsidePress:A}=$(C),z=v(e=>{if(!n||!h||!g||"Escape"!==e.key)return;let t=S?F(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=f(e))||t.removeEventListener("keydown",n)};null==(t=f(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=f(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&&F(S.nodesRef.current,a).some(t=>{var n;return m(e,null==(n=t.context)?void 0:n.elements.floating)});if(m(e,u)||m(e,l)||g)return;let v=S?F(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=f(e))||t.removeEventListener(y,n)};null==(t=f(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",B?H:z,B),E&&t.addEventListener(y,A?Z:O,A);let r=[];return k&&((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",B?H:z,B),E&&t.removeEventListener(y,A?Z:O,A),r.forEach(t=>{t.removeEventListener("scroll",e)})}},[d,u,l,c,g,E,y,n,o,k,h,N,_,z,B,H,O,A,Z]),r.useEffect(()=>{P.current=!1},[E,y]),r.useMemo(()=>h?{reference:{onKeyDown:z,[L[w]]: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,w,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(),m=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)}),f=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=k(),w=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)&&(f.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:w,domReference:f}),[u.refs,j,w]),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:m}),[u,a,x,y,n,m,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:m,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=f(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(m.floating.current,r)||s(h,r)||n)return;o(!1,e.nativeEvent,"focus")}})}}}:{},[g,v,h,m,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=k(),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=f(),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 m(e){let t=b(e);for(;c(t)&&!h(t);){if(p(t))return t;t=b(t)}return null}function f(){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 f},Py:function(){return h},Re:function(){return c},Ze:function(){return d},Zq:function(){return l},ao:function(){return u},gQ:function(){return m},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 w},NM:function(){return i},Qq:function(){return g},Rn:function(){return f},VV:function(){return r},Wh:function(){return v},gy:function(){return y},hp:function(){return m},i8:function(){return b},k3:function(){return p},ku:function(){return d},pw:function(){return k},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 m(e){return e.split("-")[1]}function f(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 f(g(e))}function b(e,t,n){void 0===n&&(n=!1);let r=m(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=k(a)),[a,k(a)]}function y(e){let t=k(e);return[x(e),t,x(t)]}function x(e){return e.replace(/start|end/g,e=>l[e])}function w(e,t,n,r){let o=m(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 k(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"}};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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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,m.h)(t)}})),b=(0,f.d5)((e,t)=>{let n=(0,a.w)("ActionIconGroup",g,e),{className:o,style:i,classNames:l,styles:u,unstyled:d,orientation:p,vars:m,borderWidth:f,variant:b,mod:y,...x}=(0,a.w)("ActionIconGroup",g,e),w=(0,s.y)({name:"ActionIconGroup",props:n,classes:h,className:o,style:i,classNames:l,styles:u,unstyled:d,vars:m,varsResolver:v,rootSelector:"group"});return(0,r.jsx)(c.x,{...w("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}}}),w=(0,l.b)((e,t)=>{let n=(0,a.w)("ActionIcon",y,e),{className:o,unstyled:i,variant:l,classNames:m,styles:f,style:g,loading:v,loaderProps:b,size:w,color:k,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:m,styles:f,unstyled:i,vars:I,varsResolver:x});return(0,r.jsxs)(p.k,{..._("root",{active:!T&&!v&&!E}),...N,unstyled:i,variant:l,size:w,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})]})});w.classes=h,w.displayName="@mantine/core/ActionIcon",w.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),m=n(82027),f={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,m.d5)((e,t)=>{let n=(0,u.w)("Blockquote",h,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,children:m,icon:v,iconSize:b,cite:y,...x}=n,w=(0,d.y)({name:"Blockquote",classes:f,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,...w("root"),...x,children:[v&&(0,r.jsx)("span",{...w("icon"),children:v}),m,y&&(0,r.jsx)("cite",{...w("cite"),children:y})]})});v.classes=f,v.displayName="@mantine/core/Blockquote"},23205:function(e,t,n){"use strict";n.d(t,{O:function(){return g}});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),p=n(63409),m={root:"m_fea6bf1a",burger:"m_d4fb9cad"};let f={},h=(0,a.Z)((e,{color:t,size:n,lineSize:r,transitionDuration:a,transitionTimingFunction:c})=>({root:{"--burger-color":t?(0,s.p)(t,e):void 0,"--burger-size":(0,i.ap)(n,"burger-size"),"--burger-line-size":r?(0,o.h)(r):void 0,"--burger-transition-duration":void 0===a?void 0:`${a}ms`,"--burger-transition-timing-function":c}})),g=(0,d.d5)((e,t)=>{let n=(0,c.w)("Burger",f,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:g,opened:v,children:b,transitionDuration:y,transitionTimingFunction:x,lineSize:w,...k}=n,j=(0,l.y)({name:"Burger",classes:m,props:n,className:i,style:a,classNames:o,styles:s,unstyled:d,vars:g,varsResolver:h});return(0,r.jsxs)(p.k,{...j("root"),ref:t,...k,children:[(0,r.jsx)(u.x,{mod:["reduce-motion",{opened:v}],...j("burger")}),b]})});g.classes=m,g.displayName="@mantine/core/Burger"},17115:function(e,t,n){"use strict";n.d(t,{z:function(){return k}});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),m=n(63409),f=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,f.d5)((e,t)=>{let n=(0,s.w)("ButtonGroup",g,e),{className:o,style:i,classNames:a,styles:u,unstyled:d,orientation:p,vars:m,borderWidth:f,variant:b,mod:y,...x}=(0,s.w)("ButtonGroup",g,e),w=(0,c.y)({name:"ButtonGroup",props:n,classes:h,className:o,style:i,classNames:a,styles:u,unstyled:d,vars:m,varsResolver:v,rootSelector:"group"});return(0,r.jsx)(l.x,{...w("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={},w=(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}}}),k=(0,u.b)((e,t)=>{let n=(0,s.w)("Button",x,e),{style:o,vars:i,className:a,color:u,disabled:f,children:g,leftSection:v,rightSection:b,fullWidth:k,variant:j,radius:C,loading:S,loaderProps:I,gradient:M,classNames:T,styles:E,unstyled:P,"data-disabled":R,autoContrast:N,mod:_,...B}=n,A=(0,c.y)({name:"Button",props:n,classes:h,className:a,style:o,classNames:T,styles:E,unstyled:P,vars:i,varsResolver:w}),F=!!v,L=!!b;return(0,r.jsxs)(m.k,{ref:t,...A("root",{active:!f&&!S&&!R}),unstyled:P,variant:j,disabled:f||S,mod:[{disabled:f||R,loading:S,block:k,"with-left-section":F,"with-right-section":L},_],...B,children:[(0,r.jsx)(p.u,{mounted:!!S,transition:y,duration:150,children:e=>(0,r.jsx)(l.x,{component:"span",...A("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",{...A("inner"),children:[v&&(0,r.jsx)(l.x,{component:"span",...A("section"),mod:{position:"left"},children:v}),(0,r.jsx)(l.x,{component:"span",mod:{loading:S},...A("label"),children:g}),b&&(0,r.jsx)(l.x,{component:"span",...A("section"),mod:{position:"right"},children:b})]})]})});k.classes=h,k.displayName="@mantine/core/Button",k.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),m=n(46690),f=n(97072),h=n(28559),g=n(82027),v=n(50569),b=n(63409);let y=(0,i.createContext)(null),x=y.Provider,w=()=>(0,i.useContext)(y),[k,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.d5)((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:f,value:h,onClick:g,...v}=n,y=(0,m.y)({name:"CheckboxCard",classes:C,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:I,rootSelector:"card"}),x=w(),j="boolean"==typeof u?u:x?.value.includes(h||"")||!1;return(0,r.jsx)(k,{value:{checked:j},children:(0,r.jsx)(b.k,{ref:t,mod:[{"with-border":f,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.d5)((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,m]=(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||m(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),B={indicator:"m_5e5256ee",icon:"m_1b1c543a","indicator--outline":"m_76e20374"};let A={icon:_.P},F=(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}),m=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?m:(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.d5)((e,t)=>{let n=(0,p.w)("CheckboxIndicator",A,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,icon:u,indeterminate:d,radius:f,color:g,iconColor:v,autoContrast:b,checked:y,mod:x,variant:w,disabled:k,...C}=n,S=(0,m.y)({name:"CheckboxIndicator",classes:B,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:F,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:w}),variant:w,mod:[{checked:M,disabled:k},x],...C,children:(0,r.jsx)(u,{indeterminate:d,...S("icon")})})});L.displayName="@mantine/core/CheckboxIndicator",L.classes=B;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}),m=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?m:(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.d5)((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:k,checked:j,labelPosition:C,description:S,error:I,disabled:M,variant:T,indeterminate:E,icon:P,rootRef:R,iconColor:N,onChange:_,autoContrast:B,mod:A,...F}=n,L=w(),H=y||L?.size,O=(0,m.y)({name:"Checkbox",props:n,classes:D,className:a,style:s,classNames:i,styles:c,unstyled:l,vars:u,varsResolver:z}),{styleProps:Z,rest:V}=(0,f.c)(F),G=(0,o.M)(b),W=L?{checked:L.value.includes(V.value),onChange:e=>{L.onChange(e),_?.(e)}}:{};return(0,r.jsx)(v.Z,{...O("root"),__staticSelector:"Checkbox",__stylesApiProps:n,id:G,size:H,labelPosition:C,label:g,description:S,error:I,disabled:M,classNames:i,styles:c,unstyled:l,"data-checked":W.checked||j||void 0,variant:T,ref:R,mod:A,...Z,...k,children:(0,r.jsxs)(h.x,{...O("inner"),mod:{"data-label-position":C},children:[(0,r.jsx)(h.x,{component:"input",id:G,ref:t,checked:j,disabled:M,mod:{error:!!I,indeterminate:E},...O("input",{focusable:!0,variant:T}),onChange:_,...V,...W,type:"checkbox"}),(0,r.jsx)(P,{indeterminate:E,...O("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 m={root:"m_86a44da5","root--subtle":"m_220c80f2"};let f={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",f,e),{iconSize:o,children:i,vars:a,radius:s,className:u,classNames:g,style:v,styles:b,unstyled:y,"data-disabled":x,disabled:w,variant:k,icon:j,mod:C,...S}=n,I=(0,l.y)({name:"CloseButton",props:n,className:u,style:v,classes:m,classNames:g,styles:b,unstyled:y,vars:a,varsResolver:h});return(0,r.jsxs)(d.k,{ref:t,...S,unstyled:y,variant:k,disabled:w,mod:[{disabled:w||x},C],...I("root",{variant:k,active:!w&&!x}),children:[j||(0,r.jsx)(p,{}),i]})});g.classes=m,g.displayName="@mantine/core/CloseButton"},45909:function(e,t,n){"use strict";n.d(t,{E:function(){return m}});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}})),m=(0,l.d5)((e,t)=>{let n=(0,a.w)("Code",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:h,color:g,block:v,variant:b,mod:y,...x}=n,w=(0,s.y)({name:"Code",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{component:v?"pre":"code",variant:b,ref:t,mod:[{block:v},y],...w("root"),...x,dir:"ltr"})});m.classes=u,m.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),m=n(27009),f=n(14726),h=n(40993),g=n(59835),v=n(88957),b=n(93262),y=n(51438),x=n(55170);function w({className:e,onChange:t,onChangeEnd:n,value:i,saturationLabel:a,focusable:s=!0,size:c,color:l,onScrubStart:u,onScrubEnd:p,...m}){let{getStyles:f}=(0,h.j)(),[v,b]=(0,o.useState)({x:i.s/100,y:1-i.v/100}),w=(0,o.useRef)(v),{ref:k}=(0,y.r)(({x:e,y:n})=>{w.current={x:e,y:n},t({s:Math.round(100*e),v:Math.round((1-n)*100)})},{onScrubEnd:()=>{let{x:e,y:t}=w.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,{...f("saturation"),ref:k,...m,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",{...f("saturationOverlay",{style:{backgroundColor:`hsl(${i.h}, 100%, 50%)`}})}),(0,r.jsx)("div",{...f("saturationOverlay",{style:{backgroundImage:"linear-gradient(90deg, #fff, transparent)"}})}),(0,r.jsx)("div",{...f("saturationOverlay",{style:{backgroundImage:"linear-gradient(0deg, #000, transparent)"}})}),(0,r.jsx)(x.b,{position:v,...f("thumb",{style:{backgroundColor:l}})})]})}w.displayName="@mantine/core/Saturation";let k=(0,o.forwardRef)(({className:e,datatype:t,setValue:n,onChangeEnd:i,size:a,focusable:s,data:c,swatchesPerRow:l,...u},p)=>{let f=(0,h.j)(),g=c.map((e,t)=>(0,o.createElement)(m.b,{...f.getStyles("swatch"),unstyled:f.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,{...f.getStyles("swatches"),ref:p,...u,children:g})});k.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.d5)((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:B,hueLabel:A,alphaLabel:F,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)(w,{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:B,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":A,onScrubStart:en,onScrubEnd:er}),U&&(0,r.jsx)(f.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":F,onScrubStart:en,onScrubEnd:er})]}),U&&(0,r.jsx)(m.b,{color:X,radius:"sm",size:"var(--cp-preview-size)",...G("preview")})]})]}),Array.isArray(D)&&(0,r.jsx)(k,{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),m=n(82027),f=n(40993),h=n(55170),g=n(37873);let v={},b=(0,m.d5)((e,t)=>{let n=(0,u.w)("ColorSlider",v,e),{classNames:m,className:b,style:y,styles:x,unstyled:w,vars:k,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:B="ColorPicker",...A}=n,F=(0,d.y)({name:B,classes:g.Z,props:n,className:b,style:y,classNames:m,styles:x,unstyled:w}),L=f.j()?.getStyles||F,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,{...A,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 m},lu:function(){return f}});let o={grad:.9,turn:360,rad:360/(2*Math.PI)},i=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;function a(e){let t=i.exec(e);return t?function({h:e,s:t,l:n,a:r}){let o=(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 m(e){for(let[,t]of Object.entries(d))if(t.test(e))return!0;return!1}function f(e){if("string"!=typeof e)return{h:0,s:0,v:0,a:1};if("transparent"===e)return{h:0,s:0,v:0,a:0};let t=e.trim();for(let[e,n]of Object.entries(d))if(n.test(t))return p[e](t);return{h:0,s:0,v:0,a:1}}},27009:function(e,t,n){"use strict";n.d(t,{b:function(){return f}});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},m=(0,a.Z)((e,{radius:t,size:n})=>({root:{"--cs-radius":void 0===t?void 0:(0,i.H5)(t),"--cs-size":(0,o.h)(n)}})),f=(0,u.b)((e,t)=>{let n=(0,s.w)("ColorSwatch",p,e),{classNames:o,className:i,style:a,styles:u,unstyled:f,vars:h,color:g,size:v,radius:b,withShadow:y,children:x,variant:w,...k}=(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:f,vars:h,varsResolver:m});return(0,r.jsxs)(l.x,{ref:t,variant:w,size:v,...j("root",{focusable:!0}),...k,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})]})});f.classes=d,f.displayName="@mantine/core/ColorSwatch"},61271:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={dropdown:"m_88b62a41",search:"m_985517d8",options:"m_b2821a6e",option:"m_92253aa5",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 m}});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")}})),m=(0,l.d5)((e,t)=>{let n=(0,a.w)("ComboboxChevron",d,e),{size:o,error:i,style:l,className:m,classNames:f,styles:h,unstyled:g,vars:v,mod:b,...y}=n,x=(0,s.y)({name:"ComboboxChevron",classes:u.Z,props:n,style:l,className:m,classNames:f,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"})})});m.classes=u.Z,m.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 l}});var r=n(52322),o=n(2784),i=n(89027);function a(e,t,n,r){return"center"===e||"center"===r?{top:t}:"end"===e?{bottom:n}:"start"===e?{top:n}:{}}function s(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 c={bottom:"borderTopLeftRadius",left:"borderTopRightRadius",right:"borderBottomLeftRadius",top:"borderBottomRightRadius"},l=(0,o.forwardRef)(({position:e,arrowSize:t,arrowOffset:n,arrowRadius:o,arrowPosition:l,visible:u,arrowX:d,arrowY:p,style:m,...f},h)=>{let{dir:g}=(0,i.gm)();return u?(0,r.jsx)("div",{...f,ref:h,style:{...m,...function({position:e,arrowSize:t,arrowOffset:n,arrowRadius:r,arrowPosition:o,arrowX:i,arrowY:l,dir:u}){let[d,p="center"]=e.split("-"),m={width:t,height:t,transform:"rotate(45deg)",position:"absolute",[c[d]]:r},f=-t/2;return"left"===d?{...m,...a(p,l,n,o),right:f,borderLeftColor:"transparent",borderBottomColor:"transparent"}:"right"===d?{...m,...a(p,l,n,o),left:f,borderRightColor:"transparent",borderTopColor:"transparent"}:"top"===d?{...m,...s(p,i,n,o,u),bottom:f,borderTopColor:"transparent",borderLeftColor:"transparent"}:"bottom"===d?{...m,...s(p,i,n,o,u),top:f,borderBottomColor:"transparent",borderRightColor:"transparent"}:{}}({position:e,arrowSize:t,arrowOffset:n,arrowRadius:o,arrowPosition:l,dir:g,arrowX:d,arrowY:p})}}):null});l.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&&e)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),m=n(66596),f={root:"m_96b553a6"};let h={},g=(0,a.Z)((e,{transitionDuration:t})=>({root:{"--transition-duration":"number"==typeof t?`${t}ms`:t}})),v=(0,u.d5)((e,t)=>{let n=(0,s.w)("FloatingIndicator",h,e),{classNames:a,className:u,style:v,styles:b,unstyled:y,vars:x,target:w,parent:k,transitionDuration:j,mod:C,displayAfterTransitionEnd:S,...I}=n,M=(0,c.y)({name:"FloatingIndicator",classes:f,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`)},f=()=>{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(f),h.current.observe(e),t&&(g.current=new ResizeObserver(f),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)&&(f(),l(!1))};return t.addEventListener("transitionend",e),()=>{t.removeEventListener("transitionend",e)}}},[t]),(0,d.K)(()=>{"test"!==(0,m.d)()&&s(!0)},20,{autoInvoke:!0}),(0,p.I)(e=>{e.forEach(e=>{"attributes"===e.type&&"dir"===e.attributeName&&f()})},{attributes:!0,attributeFilter:["dir"]},()=>document.documentElement),{initialized:a,hidden:c}}({target:w,parent:k,ref:T,displayAfterTransitionEnd:S}),R=(0,i.Yx)(t,T);return w&&k?(0,r.jsx)(l.x,{ref:R,mod:[{initialized:E,hidden:P},C],...M("root"),...I}):null});v.displayName="@mantine/core/FloatingIndicator",v.classes=f},10266:function(e,t,n){"use strict";n.d(t,{i:function(){return f}});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),m=n(1767);function f({children:e,active:t=!0,refProp:n="ref",innerRef:r}){let a=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),c=(0,d.Yx)(a,r);return(0,p.k)(e)?(0,o.cloneElement)(e,{[n]:c}):e}function h(e){return(0,r.jsx)(m.T,{tabIndex:-1,"data-autofocus":!0,...e})}f.displayName="@mantine/core/FocusTrap",h.displayName="@mantine/core/FocusTrapInitialFocus",f.InitialFocus=h},93010:function(e,t,n){"use strict";n.d(t,{Z:function(){return f}});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"},m=(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}})),f=(0,u.d5)((e,t)=>{let n=(0,s.w)("Group",p,e),{classNames:a,className:u,style:f,styles:h,unstyled:g,children:v,gap:b,align:y,justify:x,wrap:w,grow:k,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:f,classes:d,classNames:a,styles:h,unstyled:g,vars:C,varsResolver:m});return(0,r.jsx)(l.x,{..._("root"),ref:t,variant:S,mod:[{grow:k},M],size:I,...T,children:E})});f.classes=d,f.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,...m}=(0,o.w)("Highlight",l,e),f=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,...m,__staticSelector:"Highlight",children:f.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:m,description:f,id:h,disabled:g,error:v,size:b,labelPosition:y="left",bodyElement:x="div",labelElement:w="label",variant:k,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:k,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:[m&&(0,r.jsx)(s.x,{component:w,htmlFor:"label"===w?h:void 0,...T("label"),"data-disabled":g||void 0,children:m}),f&&(0,r.jsx)(c.I.Description,{size:b,__inheritStyles:!1,...T("description"),children:f}),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),m=n(82027),f=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,m.d5)((e,t)=>{let n=(0,c.w)("InputDescription",g,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,size:m,__staticSelector:b,__inheritStyles:y=!0,variant:x,...w}=(0,c.w)("InputDescription",g,n),k=(0,f.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&&k?.getStyles||j;return(0,r.jsx)(d.x,{component:"p",ref:t,variant:x,size:m,...C("description",k?.getStyles?{className:i,style:a}:void 0),...w})});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)})`}})),w=(0,m.d5)((e,t)=>{let n=(0,c.w)("InputError",y,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,size:m,__staticSelector:g,__inheritStyles:v=!0,variant:b,...w}=n,k=(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,f.D)(),C=v&&j?.getStyles||k;return(0,r.jsx)(d.x,{component:"p",ref:t,variant:b,size:m,...C("error",j?.getStyles?{className:i,style:a}:void 0),...w})});w.classes=h,w.displayName="@mantine/core/InputError";let k={labelElement:"label"},j=(0,s.Z)((e,{size:t})=>({label:{"--input-label-size":(0,a.yv)(t),"--input-asterisk-color":void 0}})),C=(0,m.d5)((e,t)=>{let n=(0,c.w)("InputLabel",k,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,labelElement:m,size:g,required:v,htmlFor:b,onMouseDown:y,children:x,__staticSelector:w,variant:C,mod:S,...I}=(0,c.w)("InputLabel",k,n),M=(0,l.y)({name:["InputWrapper",w],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"label",vars:p,varsResolver:j}),T=(0,f.D)(),E=T?.getStyles||M;return(0,r.jsxs)(d.x,{...E("label",T?.getStyles?{className:i,style:a}:void 0),component:m,variant:C,size:g,ref:t,htmlFor:"label"===m?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,m.d5)((e,t)=>{let n=(0,c.w)("InputPlaceholder",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,__staticSelector:m,variant:f,error:g,mod:v,...b}=(0,c.w)("InputPlaceholder",S,n),y=(0,l.y)({name:["InputPlaceholder",m],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:f,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,m.d5)((e,t)=>{let n=(0,c.w)("InputWrapper",T,e),{classNames:o,className:a,style:s,styles:u,unstyled:p,vars:m,size:g,variant:v,__staticSelector:y,inputContainer:x,inputWrapperOrder:k,label:j,error:S,description:I,labelProps:P,descriptionProps:R,errorProps:N,labelElement:_,children:B,withAsterisk:A,id:F,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:m,varsResolver:E}),O={size:g,variant:v,__staticSelector:y},Z=(0,M.M)(F),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 A?A: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(B)},"input"),ee=W&&(0,i.createElement)(w,{...N,...O,size:N?.size||O.size,key:"error",id:N?.id||V},S),et=k.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)(f.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}}(k,{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:m,__staticSelector:g,__stylesApiProps:v,size:b,wrapperProps:y,error:x,disabled:w,leftSection:k,leftSectionProps:j,leftSectionWidth:C,rightSection:S,rightSectionProps:I,rightSectionWidth:M,rightSectionPointerEvents:T,leftSectionPointerEvents:E,variant:P,vars:_,pointer:B,multiline:A,radius:F,id:L,withAria:D,withErrorStyles:$,mod:z,inputSize:H,...O}=n,{styleProps:Z,rest:V}=(0,u.c)(O),G=(0,f.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:m,disabled:w,"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:B,disabled:w,multiline:A,"data-with-right-section":!!S,"data-with-left-section":!!k},z],variant:P,size:b,children:[k&&(0,r.jsx)("div",{...j,"data-position":"left",...Y("section",{className:j?.className,style:j?.style}),children:k}),(0,r.jsx)(d.x,{component:"input",...V,...q,ref:t,required:m,mod:{disabled:w,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=w,_.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:m,__staticSelector:f,__stylesApiProps:h,errorProps:g,labelProps:v,descriptionProps:b,wrapperProps:y,id:x,size:w,style:k,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:f,__stylesApiProps:h||i,errorProps:g,labelProps:v,descriptionProps:b,unstyled:m,styles:d,size:w,style:k,inputContainer:j,inputWrapperOrder:C,withAsterisk:S,variant:I,id:x,mod:T,...y};return{...R,classNames:u,styles:d,unstyled:m,wrapperProps:{...N,...P},inputProps:{required:l,classNames:u,styles:d,unstyled:m,size:w,__staticSelector:f,__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 m}});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")}})),m=(0,l.d5)((e,t)=>{let n=(0,a.w)("Kbd",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:h,...g}=n,v=(0,s.y)({name:"Kbd",classes:u,props:n,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{component:"kbd",ref:t,...v("root"),...g})});m.classes=u,m.displayName="@mantine/core/Kbd"},12491:function(e,t,n){"use strict";n.d(t,{a:function(){return x}});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),m={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 f=(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsxs)(u.x,{component:"span",className:(0,p.Z)(m.barsLoader,e),...t,ref:n,children:[(0,r.jsx)("span",{className:m.bar}),(0,r.jsx)("span",{className:m.bar}),(0,r.jsx)("span",{className:m.bar})]}));f.displayName="@mantine/core/Bars";let h=(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsxs)(u.x,{component:"span",className:(0,p.Z)(m.dotsLoader,e),...t,ref:n,children:[(0,r.jsx)("span",{className:m.dot}),(0,r.jsx)("span",{className:m.dot}),(0,r.jsx)("span",{className:m.dot})]}));h.displayName="@mantine/core/Dots";let g=(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsx)(u.x,{component:"span",className:(0,p.Z)(m.ovalLoader,e),...t,ref:n}));g.displayName="@mantine/core/Oval";let v={bars:f,oval:g,dots:h},b={loaders:v,type:"oval"},y=(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}})),x=(0,d.d5)((e,t)=>{let n=(0,c.w)("Loader",b,e),{size:o,color:i,type:a,vars:s,className:d,style:p,classNames:f,styles:h,unstyled:g,loaders:v,variant:x,children:w,...k}=n,j=(0,l.y)({name:"Loader",props:n,classes:m,className:d,style:p,classNames:f,styles:h,unstyled:g,vars:s,varsResolver:y});return w?(0,r.jsx)(u.x,{...j("root"),ref:t,...k,children:w}):(0,r.jsx)(u.x,{...j("root"),ref:t,component:v[a],variant:x,size:o,...k})});x.defaultLoaders=v,x.classes=m,x.displayName="@mantine/core/Loader"},20368:function(e,t,n){"use strict";n.d(t,{v:function(){return f}});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"},m=(0,o.Z)((e,{color:t})=>({root:{"--mark-bg-dark":u({color:t,theme:e,defaultShade:5}),"--mark-bg-light":u({color:t,theme:e,defaultShade:2})}})),f=(0,c.d5)((e,t)=>{let n=(0,i.w)("Mark",p,e),{classNames:o,className:c,style:l,styles:u,unstyled:f,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:f,vars:h,varsResolver:m});return(0,r.jsx)(s.x,{component:"mark",ref:t,variant:v,...y("root"),...b})});f.classes=d,f.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[m,f]=(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.d5)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:s,...c}=(0,u.w)("MenuDivider",b,e),l=f();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),w=n(98498);let k={},j=(0,g.d5)((e,t)=>{let{classNames:n,className:i,style:a,styles:s,vars:c,onMouseEnter:l,onMouseLeave:d,onKeyDown:m,children:h,...g}=(0,u.w)("MenuDropdown",k,e),v=(0,o.useRef)(null),b=f(),y=(0,w.x)(m,e=>{("ArrowUp"===e.key||"ArrowDown"===e.key)&&(e.preventDefault(),v.current?.querySelectorAll("[data-menu-item]:not(:disabled)")[0]?.focus())}),j=(0,w.x)(l,()=>("hover"===b.trigger||"click-hover"===b.trigger)&&b.openDropdown()),C=(0,w.x)(d,()=>("hover"===b.trigger||"click-hover"===b.trigger)&&b.closeDropdown());return(0,r.jsxs)(p.J.Dropdown,{...g,onMouseEnter:j,onMouseLeave:C,role:"menu","aria-orientation":"vertical",ref:(0,x.Yx)(t,v),...b.getStyles("dropdown",{className:i,style:a,styles:s,classNames:n,withStaticClass:!1}),tabIndex:-1,"data-menu-dropdown":!0,onKeyDown:y,children:[(0,r.jsx)("div",{tabIndex:-1,"data-autofocus":!0,"data-mantine-stop-propagation":!0,style:{outline:0}}),h]})});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:m,children:h,disabled:g,...v}=(0,u.w)("MenuItem",P,e),b=f(),y=(0,I.rZ)(),{dir:k}=(0,T.gm)(),j=(0,o.useRef)(),M=b.getItemIndex(j.current),R=(0,w.x)(v.onMouseLeave,()=>b.setHovered(-1)),N=(0,w.x)(v.onMouseEnter,()=>b.setHovered(b.getItemIndex(j.current))),_=(0,w.x)(v.onClick,()=>{"boolean"==typeof d?d&&b.closeDropdownImmediately():b.closeOnItemClick&&b.closeDropdownImmediately()}),B=(0,w.x)(v.onFocus,()=>b.setHovered(b.getItemIndex(j.current))),A=l?y.variantColorResolver({color:l,theme:y,variant:"light"}):void 0,F=l?(0,S.E)({color:l,theme:y}):null;return(0,r.jsxs)(E.k,{...v,unstyled:b.unstyled,tabIndex:b.menuItemTabIndex,onFocus:B,...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,"data-mantine-stop-propagation":!0,onMouseEnter:N,onMouseLeave:R,onClick:_,onKeyDown:(0,C.R)({siblingSelector:"[data-menu-item]",parentSelector:"[data-menu-dropdown]",activateOnFocus:!1,loop:b.loop,dir:k,orientation:"vertical",onKeyDown:v.onKeyDown}),__vars:{"--menu-item-color":F?.isThemeColor&&F?.shade===void 0?`var(--mantine-color-${F.color}-6)`:A?.color,"--menu-item-hover":A?.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}),m&&(0,r.jsx)("div",{...b.getStyles("itemSection",{styles:s,classNames:n}),"data-position":"right",children:m})]})});R.classes=v,R.displayName="@mantine/core/MenuItem";let N={},_=(0,g.d5)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:s,...c}=(0,u.w)("MenuLabel",N,e),l=f();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 B=n(98399);let A={refProp:"ref"},F=(0,o.forwardRef)((e,t)=>{let{children:n,refProp:i,...a}=(0,u.w)("MenuTarget",A,e);if(!(0,B.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=f(),c=(0,w.x)(n.props.onClick,()=>{"click"===s.trigger?s.toggleDropdown():"click-hover"!==s.trigger||(s.setOpenedViaClick(!0),s.opened||s.openDropdown())}),l=(0,w.x)(n.props.onMouseEnter,()=>("hover"===s.trigger||"click-hover"===s.trigger)&&s.openDropdown()),d=(0,w.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})})});F.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:f,onClose:h,opened:g,defaultOpened:b,trapFocus:y,onChange:x,closeOnItemClick:w,loop:k,closeOnEscape:j,trigger:C,openDelay:S,closeDelay:I,classNames:M,styles:T,unstyled:E,variant:P,vars:R,menuItemTabIndex:N,keepMounted:_,...B}=t,A=(0,l.y)({name:"Menu",classes:v,props:t,classNames:M,styles:T,unstyled:E}),[F,{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||f?.()},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)(m,{value:{getStyles:A,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:F,setHovered:D,openedViaClick:O,setOpenedViaClick:Z,closeOnItemClick:w,closeDropdown:"click"===C?V:q,openDropdown:"click"===C?G:Y,closeDropdownImmediately:V,loop:k,trigger:C,unstyled:E,menuItemTabIndex:N},children:(0,r.jsx)(p.J,{...B,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=F,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.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:c,vars:u,...p}=(0,i.w)("ModalBody",d,e),m=l();return(0,r.jsx)(s.y,{ref:t,...m.getStyles("body",{classNames:n,style:a,styles:c,className:o}),...p})});p.classes=u,p.displayName="@mantine/core/ModalBody";var m=n(91403);let f={},h=(0,a.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalCloseButton",f,e),d=l();return(0,r.jsx)(m._,{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.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,children:u,...d}=(0,i.w)("ModalContent",y,e),p=l(),m=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)(m,{style:{maxHeight:p.fullScreen?"100dvh":`calc(100dvh - (${(0,g.h)(p.yOffset)} * 2))`},children:u})})});x.classes=u,x.displayName="@mantine/core/ModalContent";var w=n(79208);let k={},j=(0,a.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalHeader",k,e),d=l();return(0,r.jsx)(w.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.d5)((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:"fade-down"},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.d5)((e,t)=>{let n=(0,i.w)("ModalRoot",R,e),{classNames:o,className:a,style:s,styles:l,unstyled:d,vars:p,yOffset:m,scrollAreaComponent:f,radius:h,fullScreen:g,centered:v,xOffset:b,__staticSelector:y,...x}=n,w=(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:m,scrollAreaComponent:f,getStyles:w,fullScreen:g},children:(0,r.jsx)(P.e,{ref:t,...w("root"),"data-full-screen":g||void 0,"data-centered":v||void 0,unstyled:d,...x})})});_.classes=u,_.displayName="@mantine/core/ModalRoot";var B=n(92682);let A={},F=(0,a.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalTitle",A,e),d=l();return(0,r.jsx)(B.q,{ref:t,...d.getStyles("title",{classNames:n,style:a,styles:s,className:o}),...u})});F.classes=u,F.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.d5)((e,t)=>{let{title:n,withOverlay:o,overlayProps:a,withCloseButton:s,closeButtonProps:c,children:l,radius:u,...d}=(0,i.w)("Modal",L,e),m=!!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:[m&&(0,r.jsxs)(j,{children:[n&&(0,r.jsx)(F,{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=F,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),m=n(26565),f=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:w,portalProps:k,lockScroll:j,children:C,zIndex:S,shadow:I,padding:M,__vars:T,unstyled:E,removeScrollProps:P,...R},N)=>{let{_id:_,titleMounted:B,bodyMounted:A,shouldLockScroll:F,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,f.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,m.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}),{key:$,...z}=P||{};return(0,r.jsx)(l.q,{...k,withinPortal:w,children:(0,r.jsx)(u.i,{value:{opened:t,onClose:n,closeOnClickOutside:x,transitionProps:{...g,keepMounted:e},getTitleId:()=>`${_}-title`,getBodyId:()=>`${_}-body`,titleMounted:B,bodyMounted:A,setTitleMounted:L,setBodyMounted:D,trapFocus:v,closeOnEscape:b,zIndex:S,unstyled:E},children:(0,r.jsx)(i.Z,{enabled:F&&j,...z,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})},$)})})});h.displayName="@mantine/core/ModalBase"},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},m)=>{let f=(0,l.q)();return(0,r.jsx)(c.u,{mounted:f.opened,transition:"pop",...f.transitionProps,...e,children:e=>(0,r.jsx)("div",{...n,className:(0,i.Z)({[u.Z.inner]:!f.unstyled},n.className),children:(0,r.jsx)(a.i,{active:f.opened&&f.trapFocus,innerRef:m,children:(0,r.jsx)(s.X,{...p,component:"section",role:"dialog",tabIndex:-1,"aria-modal":!0,"aria-describedby":f.bodyMounted?f.getBodyId():void 0,"aria-labelledby":f.titleMounted?f.getTitleId():void 0,style:[d,e],className:(0,i.Z)({[u.Z.content]:!f.unstyled},t),unstyled:f.unstyled,children:p.children})})})})});d.displayName="@mantine/core/ModalBaseContent"},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.d5)((e,t)=>{let{data:n,children:i,size:d,error:p,rightSection:m,unstyled:f,...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:f,rightSection:m||(0,r.jsx)(s.d,{size:d,error:p,unstyled:f}),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),m={root:"m_a513464",icon:"m_a4ceffb",loader:"m_b0920b15",body:"m_a49ed24",title:"m_3feedf16",description:"m_3d733a3a",closeButton:"m_919a4d88"};let f={withCloseButton:!0},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.d5)((e,t)=>{let n=(0,s.w)("Notification",f,e),{className:o,color:i,radius:a,loading:u,withCloseButton:g,withBorder:v,title:b,icon:y,children:x,onClose:w,closeButtonProps:k,classNames:j,style:C,styles:S,unstyled:I,variant:M,vars:T,mod:E,...P}=n,R=(0,c.y)({name:"Notification",classes:m,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",...k,unstyled:I,onClick:w,...R("closeButton")})]})});g.classes=m,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),m={root:"m_9814e45f"};let f={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",f,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:p,fixed:g,center:v,children:b,radius:y,zIndex:x,gradient:w,blur:k,color:j,backgroundOpacity:C,mod:S,...I}=n,M=(0,u.y)({name:"Overlay",props:n,classes:m,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=m,g.displayName="@mantine/core/Overlay"},1198:function(e,t,n){"use strict";n.d(t,{X:function(){return m}});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)}})),m=(0,l.b)((e,t)=>{let n=(0,a.w)("Paper",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,withBorder:h,vars:g,radius:v,shadow:b,variant:y,mod:x,...w}=n,k=(0,s.y)({name:"Paper",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:g,varsResolver:p});return(0,r.jsx)(c.x,{ref:t,mod:[{"data-with-border":h},x],...k("root"),variant:y,...w})});m.classes=u,m.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),m=n(71916);let[f,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),w=n(82027),k=n(62086),j=n(10266),C=n(71517),S=n(96321),I={dropdown:"m_38a85659",arrow:"m_a31dc6c1"};let M={},T=(0,w.d5)((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,...m}=n,f=h(),w=(0,g.u)({opened:f.opened,shouldReturnFocus:f.returnFocus}),I=f.withRoles?{"aria-labelledby":f.getTargetId(),id:f.getDropdownId(),role:"dialog",tabIndex:-1}:{},T=(0,v.Yx)(t,f.floating);return f.disabled?null:(0,r.jsx)(C.q,{...f.portalProps,withinPortal:f.withinPortal,children:(0,r.jsx)(S.u,{mounted:f.opened,...f.transitionProps,transition:f.transitionProps?.transition||"fade",duration:f.transitionProps?.duration??150,keepMounted:f.keepMounted,exitDuration:"number"==typeof f.transitionProps?.exitDuration?f.transitionProps.exitDuration:f.transitionProps?.duration,children:e=>(0,r.jsx)(j.i,{active:f.trapFocus&&f.opened,innerRef:T,children:(0,r.jsxs)(x.x,{...I,...m,variant:l,onKeyDownCapture:function(e,t={active:!0}){return"function"==typeof e&&t.active?n=>{"Escape"===n.key&&(e(n),t.onTrigger?.())}:t.onKeyDown||y}(f.onClose,{active:f.closeOnEscape,onTrigger:w,onKeyDown:c}),"data-position":f.placement,"data-fixed":"fixed"===f.floatingStrategy||void 0,...f.getStyles("dropdown",{className:o,props:n,classNames:d,styles:p,style:[{...e,zIndex:f.zIndex,top:f.y??0,left:f.x??0,width:"target"===f.width?void 0:(0,b.h)(f.width)},i]}),children:[s,(0,r.jsx)(k.Y,{ref:f.arrowRef,arrowX:f.arrowX,arrowY:f.arrowY,visible:f.withArrow,position:f.placement,arrowSize:f.arrowSize,arrowRadius:f.arrowRadius,arrowOffset:f.arrowOffset,arrowPosition:f.arrowPosition,...f.getStyles("arrow",{props:n,classNames:d,styles:p})})]})})})})});T.classes=I,T.displayName="@mantine/core/PopoverDropdown";var E=n(40489),P=n(98399);let R={refProp:"ref",popupType:"dialog"},N=(0,w.d5)((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),B=n(75580),A=n(92416),F=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:w,arrowOffset:k,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:em}=(0,p.gm)(),ef=(0,i.M)(U),eh=function(e){let[t,n,r]=(0,L.C)({value:e.opened,defaultValue:e.defaultOpened,finalValue:!1,onChange:e.onChange}),o=(0,F.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,B.uY)("boolean"==typeof n.shift?{limiter:(0,B.dr)(),padding:5}:{limiter:(0,B.dr)(),padding:5,...n.shift})),n.flip&&r.push("boolean"==typeof n.flip?(0,B.RR)():(0,B.RR)(n.flip)),n.inline&&r.push("boolean"==typeof n.inline?(0,B.Qo)():(0,B.Qo)(n.inline)),r.push((0,A.x7)({element:e.arrowRef,padding:e.arrowOffset})),(n.size||"target"===e.width)&&r.push((0,B.dp)({..."boolean"==typeof n.size?{}:n.size,apply({rects:r,availableWidth:o,availableHeight:i,...a}){let s=t(),c=s.refs.floating.current?.style??{};n.size&&("object"==typeof n.size&&n.size.apply?n.size.apply({rects:r,availableWidth:o,availableHeight:i,...a}):Object.assign(c,{maxWidth:`${o}px`,maxHeight:`${i}px`})),"target"===e.width&&Object.assign(c,{width:`${r.reference.width}px`})}})),r}(e,()=>o)});return(0,$.L)({opened:t,position:e.position,positionDependencies:e.positionDependencies||[],floating:o}),(0,D.l)(()=>{e.onPositionChange?.(o.placement)},[o.placement]),(0,D.l)(()=>{e.opened?e.onOpen?.():e.onClose?.()},[e.opened,r]),{floating:o,controlled:"boolean"==typeof e.opened,opened:t,onClose:()=>{t&&(r||e.onClose?.(),n(!1))},onToggle:()=>{t?(e.onClose?.(),n(!1)):(e.onOpen?.(),n(!0))}}}({middlewares:y,width:b,position:(0,m._)(em,s),offset:"number"==typeof c?c+(x?w/2:0):c,arrowRef:ec,arrowOffset:k,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)(f,{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:w,arrowOffset:k,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:()=>`${ef}-target`,getDropdownId:()=>`${ef}-dropdown`,withRoles:Q,targetProps:ea,__staticSelector:J,classNames:M,styles:T,unstyled:S,variant:en,keepMounted:er,getStyles:es,floatingStrategy:ei},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,m]=(0,o.useState)(!1),f=(0,o.useRef)(null);return((0,a.Y)(()=>(m(!0),f.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,f.current),!u&&f.current&&document.body.appendChild(f.current),()=>{!u&&f.current&&document.body.removeChild(f.current)}),[u]),p&&f.current)?(0,i.createPortal)((0,r.jsx)(r.Fragment,{children:n}),f.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,m]=(0,d.R)("ScrollArea.Root component was not found in tree");var f=n(7966),h=n(64261);function g(e,t){let n=(0,f.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=m(),[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=m(),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"},w=(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),[m,f]=(0,o.useState)(null),[h,g]=(0,o.useState)(null),[v,b]=(0,o.useState)(null),[w,k]=(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:m,onViewportChange:f,content:h,onContentChange:g,scrollbarX:v,onScrollbarXChange:b,scrollbarXEnabled:M,onScrollbarXEnabledChange:T,scrollbarY:w,onScrollbarYChange:k,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`}})})});w.displayName="@mantine/core/ScrollAreaRoot";var k=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=m(),[b,x]=(0,o.useState)(null),w=(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,f.W)(d),T=(0,f.W)(l),R=(0,k.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,f.W)(a),onThumbPointerUp:(0,f.W)(s),onThumbPositionChange:T,onThumbPointerDown:(0,f.W)(c)},children:(0,r.jsx)("div",{...h,ref:w,"data-mantine-scrollbar":!0,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",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,j.current=null})})})}),_=(0,o.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:i,style:a,...s}=e,c=m(),[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)}})}})});_.displayName="@mantine/core/ScrollAreaScrollbarX";let B=(0,o.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:i,style:a,...s}=e,c=m(),[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.displayName="@mantine/core/ScrollAreaScrollbarY";let A=(0,o.forwardRef)((e,t)=>{let{orientation:n="vertical",...i}=e,{dir:a}=(0,j.gm)(),s=m(),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),f={...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)(_,{...f,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)(B,{...f,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.displayName="@mantine/core/ScrollAreaScrollbarVisible";let F=(0,o.forwardRef)((e,t)=>{let n=m(),{forceMount:i,...a}=e,[s,c]=(0,o.useState)(!1),l="horizontal"===e.orientation,u=(0,k.y)(()=>{if(n.viewport){let e=n.viewport.offsetWidth{let{forceMount:n,...i}=e,a=m(),[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)(F,{"data-state":s?"visible":"hidden",...i,ref:t}):null});L.displayName="@mantine/core/ScrollAreaScrollbarHover";let D=(0,o.forwardRef)((e,t)=>{let{forceMount:n,...i}=e,a=m(),s="horizontal"===e.orientation,[c,l]=(0,o.useState)("hidden"),u=(0,k.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)(A,{"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=m(),{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)(F,{...i,ref:t,forceMount:n}):"always"===a.type?(0,r.jsx)(A,{...i,ref:t}):null});$.displayName="@mantine/core/ScrollAreaScrollbar";let z=(0,o.forwardRef)((e,t)=>{let{style:n,...i}=e,a=m(),s=R(),{onThumbPositionChange:c}=s,l=(0,y.Yx)(t,e=>s.onThumbChange(e)),u=(0,o.useRef)(),d=(0,k.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)})});z.displayName="@mantine/core/ScrollAreaThumb";let 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});H.displayName="@mantine/core/ScrollAreaThumb";let O=(0,o.forwardRef)(({children:e,style:t,...n},o)=>{let i=m(),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.d5)((e,t)=>{let n=(0,s.w)("ScrollArea",V,e),{classNames:i,className:a,style:l,styles:u,unstyled:d,scrollbarSize:p,vars:m,type:f,scrollHideDelay:h,viewportProps:g,viewportRef:v,onScrollPositionChange:y,children:x,offsetScrollbars:k,scrollbars:j,onBottomReached:C,onTopReached:S,...I}=n,[M,T]=(0,o.useState)(!1),E=(0,c.y)({name:"ScrollArea",props:n,classes:Z,className:a,style:l,classNames:i,styles:u,unstyled:d,vars:m,varsResolver:G});return(0,r.jsxs)(w,{type:"never"===f?"always":f,scrollHideDelay:h,ref:t,scrollbars:j,...E("root"),...I,children:[(0,r.jsx)(O,{...g,...E("viewport",{style:g?.style}),ref:v,"data-offset-scrollbars":!0===k?"xy":k||void 0,"data-scrollbars":j||void 0,onScroll:e=>{g?.onScroll?.(e),y?.({x:e.currentTarget.scrollLeft,y:e.currentTarget.scrollTop});let{scrollTop:t,scrollHeight:n,clientHeight:r}=e.currentTarget;t-(n-r)>=0&&C?.(),0===t&&S?.()},children:x}),("xy"===j||"x"===j)&&(0,r.jsx)($,{...E("scrollbar"),orientation:"horizontal","data-hidden":"never"===f||void 0,forceMount:!0,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),children:(0,r.jsx)(H,{...E("thumb")})}),("xy"===j||"y"===j)&&(0,r.jsx)($,{...E("scrollbar"),orientation:"vertical","data-hidden":"never"===f||void 0,forceMount:!0,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),children:(0,r.jsx)(H,{...E("thumb")})}),(0,r.jsx)(b,{...E("corner"),"data-hovered":M||void 0,"data-hidden":"never"===f||void 0})]})});W.displayName="@mantine/core/ScrollArea";let Y=(0,u.d5)((e,t)=>{let{children:n,classNames:o,styles:i,scrollbarSize:a,scrollHideDelay:c,type:u,dir:d,offsetScrollbars:p,viewportRef:m,onScrollPositionChange:f,unstyled:h,variant:g,viewportProps:v,scrollbars:b,style:y,vars:x,onBottomReached:w,onTopReached:k,...j}=(0,s.w)("ScrollAreaAutosize",V,e);return(0,r.jsx)(l.x,{...j,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:m,onScrollPositionChange:f,unstyled:h,variant:g,viewportProps:v,vars:x,scrollbars:b,onBottomReached:w,onTopReached:k,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 w}});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),m=n(38483),f=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)}})),w=(0,g.d5)((e,t)=>{let n=(0,m.w)("SegmentedControl",y,e),{classNames:c,className:l,style:u,styles:g,unstyled:w,vars:k,data:j,value:C,defaultValue:S,onChange:I,size:M,name:T,disabled:E,readOnly:P,fullWidth:R,orientation:N,radius:_,color:B,transitionDuration:A,transitionTimingFunction:F,variant:L,autoContrast:D,withItemsBorders:$,mod:z,...H}=n,O=(0,f.y)({name:"SegmentedControl",props:n,classes:b,className:l,style:u,classNames:c,styles:g,unstyled:w,vars:k,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!==B?(0,d.R)({color:B,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","data-disabled":E,children:["string"==typeof X&&(0,r.jsx)(v.G,{target:q[X],parent:W,component:"span",transitionDuration:"var(--sc-transition-duration)",...O("indicator")}),ee]})});w.classes=b,w.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),m=n(38483),f=n(46690),h=n(82027),g=n(89027),v=n(56867),b=n(10497),y=n(39172),x=n(77970),w=n(37748),k=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.d5)((e,t)=>{let n=(0,m.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:B,marks:A,label:F,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,f.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 F?F(es):F,el=N??(0,C.p)(R),eu=(0,o.useCallback)(({x:e})=>{if(!O){let t=(0,w.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,k.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,k.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,k.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,k.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:A,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:B,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:m,labelAlwaysOn:f,thumbLabel:h,onFocus:g,onBlur:v,showLabelOnHover:b,isHovered:y,children:x=null,disabled:w},k)=>{let{getStyles:j}=(0,s.I)(),[C,S]=(0,o.useState)(!1),I=f||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:k,__vars:{"--slider-thumb-offset":`${c}%`},...j("thumb",{focusable:!0}),mod:{dragging:u,disabled:w},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,...m,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 m=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:m})}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)(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 m}});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}})),m=(0,l.d5)((e,t)=>{let n=(0,a.w)("Stack",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:h,align:g,justify:v,gap:b,variant:y,...x}=n,w=(0,s.y)({name:"Stack",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{ref:t,...w("root"),variant:y,...x})});m.classes=u,m.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),m=n(28559),f=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 w={},k=(0,f.d5)((e,t)=>{let{value:n,defaultValue:o,onChange:a,size:s,wrapperProps:c,children:l,readOnly:d,...p}=(0,u.w)("SwitchGroup",w,e),[m,f]=(0,i.C)({value:n,defaultValue:o,finalValue:[],onChange:a});return(0,r.jsx)(v,{value:{value:m,onChange:e=>{let t=e.currentTarget.value;d||f(m.includes(t)?m.filter(e=>e!==t):[...m,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})})})});k.classes=y.I.Wrapper.classes,k.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,f.d5)((e,t)=>{let n=(0,u.w)("Switch",C,e),{classNames:a,className:s,style:c,styles:l,unstyled:f,vars:g,color:v,label:y,offLabel:x,onLabel:w,id:k,size:I,radius:M,wrapperProps:T,thumbIcon:E,checked:P,defaultChecked:R,onChange:N,labelPosition:_,description:B,error:A,disabled:F,variant:L,rootRef:D,mod:$,...z}=n,H=b(),O=I||H?.size,Z=(0,d.y)({name:"Switch",props:n,classes:j,className:s,style:c,classNames:a,styles:l,unstyled:f,vars:g,varsResolver:S}),{styleProps:V,rest:G}=(0,p.c)(z),W=(0,o.M)(k),Y=H?{checked:H.value.includes(G.value),onChange:H.onChange}:{},[q,K]=(0,i.C)({value:Y.checked??P,defaultValue:R,finalValue:!1});return(0,r.jsxs)(h.Z,{...Z("root"),__staticSelector:"Switch",__stylesApiProps:n,id:W,size:O,labelPosition:_,label:y,description:B,error:A,disabled:F,bodyElement:"label",labelElement:"span",classNames:a,styles:l,unstyled:f,"data-checked":Y.checked||void 0,variant:L,ref:D,mod:$,...V,...T,children:[(0,r.jsx)("input",{...G,disabled:F,checked:q,onChange:e=>{H?Y.onChange?.(e):N?.(e),K(e.currentTarget.checked)},id:W,ref:t,type:"checkbox",role:"switch",...Z("input")}),(0,r.jsxs)(m.x,{"aria-hidden":"true",mod:{error:A,"label-position":_,"without-labels":!w&&!x},...Z("track"),children:[(0,r.jsx)(m.x,{component:"span",mod:"reduce-motion",...Z("thumb"),children:E}),(0,r.jsx)("span",{...Z("trackLabel"),children:q?w:x})]})]})});I.classes={...j,...h.J},I.displayName="@mantine/core/Switch",I.Group=k},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,m]=(0,n(89106).R)("Table component was not found in the tree");var f={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.d5)((o,i)=>{let a=(0,c.w)(n,{},o),{classNames:s,className:l,style:d,styles:p,...f}=a,h=m();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}),...f})});return o.displayName=`@mantine/core/${n}`,o.classes=f,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"),w=h("tfoot"),k=h("caption",{captionSide:!0});function j({data:e}){return(0,r.jsxs)(r.Fragment,{children:[e.caption&&(0,r.jsx)(k,{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)(w,{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.d5)((e,t)=>{let n=(0,c.w)("TableScrollContainer",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:p,children:m,minWidth:h,type:g,...v}=n,b=(0,l.y)({name:"TableScrollContainer",classes:f,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:m})})});M.classes=f,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:m,stickyHeader:f})=>({table:{"--table-layout":t,"--table-caption-side":n,"--table-horizontal-spacing":(0,i.bG)(r),"--table-vertical-spacing":(0,i.bG)(a),"--table-border-color":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":f?(0,o.h)(m):void 0}})),P=(0,d.d5)((e,t)=>{let n=(0,c.w)("Table",T,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:m,horizontalSpacing:h,verticalSpacing:g,captionSide:v,stripedColor:b,highlightOnHoverColor:y,striped:x,highlightOnHover:w,withColumnBorders:k,withRowBorders:C,withTableBorder:S,borderColor:I,layout:M,variant:P,data:R,children:N,stickyHeader:_,stickyHeaderOffset:B,mod:A,...F}=n,L=(0,l.y)({name:"Table",props:n,className:i,style:a,classes:f,classNames:o,styles:s,unstyled:d,rootSelector:"table",vars:m,varsResolver:E});return(0,r.jsx)(p,{value:{getStyles:L,stickyHeader:_,striped:!0===x?"odd":x||void 0,highlightOnHover:w,withColumnBorders:k,withRowBorders:C,captionSide:v||"bottom"},children:(0,r.jsx)(u.x,{component:"table",variant:P,ref:t,mod:[{"data-with-table-border":S},A],...L("table"),...F,children:N||!!R&&(0,r.jsx)(j,{data:R})})})});P.classes=f,P.displayName="@mantine/core/Table",P.Td=v,P.Th=g,P.Tr=b,P.Thead=y,P.Tbody=x,P.Tfoot=w,P.Caption=k,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 m={inherit:!1},f=(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",m,e),{lineClamp:o,truncate:i,inline:a,inherit:s,gradient:d,span:h,__staticSelector:g,vars:v,className:b,style:y,classNames:x,styles:w,unstyled:k,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:w,unstyled:k,vars:v,varsResolver:f});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.d5)((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 h}});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"],d=["xs","sm","md","lg","xl"];var p={root:"m_8a5d1357"};let m={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)`}:d.includes(n)?{fontSize:`var(--mantine-font-size-${n})`,fontWeight:`var(--mantine-h${e}-font-weight)`,lineHeight:`var(--mantine-h${e}-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}}}),h=(0,c.d5)((e,t)=>{let n=(0,i.w)("Title",m,e),{classNames:o,className:c,style:l,styles:u,unstyled:d,order:h,vars:g,size:v,variant:b,lineClamp:y,textWrap:x,mod:w,...k}=n,j=(0,a.y)({name:"Title",props:n,classes:p,className:c,style:l,classNames:o,styles:u,unstyled:d,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},w],size:v,...k}):null});h.classes=p,h.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),m=n(46690),f=n(28559),h=n(82027),g=n(89027),v=n(71916),b=n(62086),y=n(71517),x=n(96321);let w={duration:100,transition:"fade"};var k=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,defaultOpened:!1,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.d5)((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:w,offset:P,position:R,multiline:N,zIndex:_,disabled:B,defaultOpened:A,variant:F,vars:L,portalProps:D,...$}=n,z=(0,k.rZ)(),H=(0,m.y)({name:"TooltipFloating",props:n,classes:M,className:d,style:u,classNames:h,styles:g,unstyled:v,rootSelector:"tooltip",vars:L,varsResolver:E}),{handleMouseMove:O,x:Z,y:V,opened:G,boundaryRef:W,floating:Y,setOpened:q}=function({offset:e,position:t,defaultOpened:n}){let[r,i]=(0,o.useState)(n),a=(0,o.useRef)(),{x:s,y:c,elements:l,refs:u,update:d,placement:p}=(0,C.YF)({placement:t,middleware:[(0,S.uY)({crossAxis:!0,padding:5,rootBoundary:"document"})]}),m=p.includes("right")?e:t.includes("left")?-1*e:0,f=p.includes("bottom")?e:t.includes("top")?-1*e:0,h=(0,o.useCallback)(({clientX:e,clientY:t})=>{u.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:e,y:t,left:e+m,top:t+f,right:e,bottom:t})})},[l.reference]);return(0,o.useEffect)(()=>{if(u.floating.current){let e=a.current;e.addEventListener("mousemove",h);let t=(0,I.Kx)(u.floating.current);return t.forEach(e=>{e.addEventListener("scroll",d)}),()=>{e.removeEventListener("mousemove",h),t.forEach(e=>{e.removeEventListener("scroll",d)})}}},[l.reference,u.floating.current,d,h,r]),{handleMouseMove:h,x:s,y:c,opened:r,setOpened:i,boundaryRef:a,floating:u.setFloating}}({offset:P,position:R,defaultOpened:A});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 K=(0,a.Yx)(W,i.ref,t);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y.q,{...D,withinPortal:l,children:(0,r.jsx)(f.x,{...$,...H("tooltip",{style:{...(0,j.c)(u,z),zIndex:_,display:!B&&G?"block":"none",top:(V&&Math.round(V))??"",left:(Z&&Math.round(Z))??""}}),variant:F,ref:Y,mod:{multiline:N},children:w})}),(0,o.cloneElement)(i,{...i.props,[c]:K,onMouseEnter:e=>{i.props.onMouseEnter?.(e),O(e),q(!0)},onMouseLeave:e=>{i.props.onMouseLeave?.(e),q(!1)}})]})});P.classes=M,P.displayName="@mantine/core/TooltipFloating";let R=(0,o.createContext)(!1),N=R.Provider,_=()=>(0,o.useContext)(R),B={openDelay:0,closeDelay:0};function A(e){let{openDelay:t,closeDelay:n,children:o}=(0,p.w)("TooltipGroup",B,e);return(0,r.jsx)(N,{value:!0,children:(0,r.jsx)(C.e0,{delay:{open:t,close:n},children:o})})}A.displayName="@mantine/core/TooltipGroup",A.extend=e=>e;var F=n(84061),L=n(92416),D=n(66178),$=n(71978),z=n(52630);let H={position:"top",refProp:"ref",withinPortal:!0,inline:!1,defaultOpened:!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.d5)((e,t)=>{var n;let c=(0,p.w)("Tooltip",H,e),{children:l,position:u,refProp:d,label:h,openDelay:k,closeDelay:j,onPositionChange:I,opened:T,defaultOpened:E,withinPortal:P,radius:R,color:N,classNames:B,styles:A,unstyled:Z,style:V,className:G,withArrow:W,arrowSize:Y,arrowOffset:q,arrowRadius:K,arrowPosition:U,offset:X,transitionProps:J,multiline:Q,events:ee,zIndex:et,disabled:en,positionDependencies:er,onClick:eo,onMouseEnter:ei,onMouseLeave:ea,inline:es,variant:ec,keepMounted:el,vars:eu,portalProps:ed,mod:ep,floatingStrategy:em,...ef}=(0,p.w)("Tooltip",H,c),{dir:eh}=(0,g.gm)(),eg=(0,o.useRef)(null),ev=function(e){let[t,n]=(0,o.useState)(e.defaultOpened),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:m,refs:f,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,F.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)(m,{enabled:e.events?.hover,delay:i?s:{open:e.openDelay,close:e.closeDelay},mouseOnly:!e.events?.touch}),(0,C.KK)(m,{enabled:e.events?.focus,visibleOnly:!0}),(0,C.qs)(m,{role:"tooltip"}),(0,C.bQ)(m,{enabled:void 0===e.opened}),(0,C.Qu)(m,{id:a})]);(0,z.L)({opened:r,position:e.position,positionDependencies:e.positionDependencies,floating:{refs:f,update:h}}),(0,$.l)(()=>{e.onPositionChange?.(g)},[g]);let w=r&&c&&c!==a;return{x:d,y:p,arrowX:v,arrowY:b,reference:f.setReference,floating:f.setFloating,getFloatingProps:x,getReferenceProps:y,isGroupPhase:w,opened:r,placement:g}}({position:(0,v._)(eh,u),closeDelay:j,openDelay:k,onPositionChange:I,opened:T,defaultOpened:E,events:ee,arrowRef:eg,arrowOffset:q,offset:"number"==typeof X?X+(W?Y/2:0):X,positionDependencies:[...er,l],inline:es,strategy:em}),eb=(0,m.y)({name:"Tooltip",props:c,classes:M,className:G,style:V,classNames:B,styles:A,unstyled:Z,rootSelector:"tooltip",vars:eu,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 ey=(0,a.Yx)(ev.reference,l.ref,t),ex=(n={duration:100,transition:"fade"},{...w,...n,...J});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y.q,{...ed,withinPortal:P,children:(0,r.jsx)(x.u,{...ex,keepMounted:el,mounted:!en&&!!ev.opened,duration:ev.isGroupPhase?10:ex.duration,children:e=>(0,r.jsxs)(f.x,{...ef,"data-fixed":"fixed"===em||void 0,variant:ec,mod:[{multiline:Q},ep],...ev.getFloatingProps({ref:ev.floating,className:eb("tooltip").className,style:{...eb("tooltip").style,...e,zIndex:et,top:ev.y??0,left:ev.x??0}}),children:[h,(0,r.jsx)(b.Y,{ref:eg,arrowX:ev.arrowX,arrowY:ev.arrowY,visible:W,position:ev.placement,arrowSize:Y,arrowOffset:q,arrowRadius:K,arrowPosition:U,...eb("arrow")})]})})}),(0,o.cloneElement)(l,ev.getReferenceProps({onClick:eo,onMouseEnter:ei,onMouseLeave:ea,onMouseMove:c.onMouseMove,onPointerDown:c.onPointerDown,onPointerEnter:c.onPointerEnter,[d]:ey,className:(0,i.Z)(G,l.props.className),...l.props}))]})});Z.classes=M,Z.displayName="@mantine/core/Tooltip",Z.Floating=P,Z.Group=A},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:m,timingFunction:f="ease",onExit:h,onEntered:g,onEnter:v,onExited:b,enterDelay:y,exitDelay:x}){let{transitionDuration:w,transitionStatus:k,transitionTimingFunction:j}=function({duration:e,exitDuration:t,timingFunction:n,mounted:r,onEnter:o,onExit:i,onEntered:d,onExited:p,enterDelay:m,exitDelay:f}){let h=(0,u.rZ)(),g=(0,c.J)(),v=!!h.respectReducedMotion&&g,[b,y]=(0,a.useState)(v?0:e),[x,w]=(0,a.useState)(r?"entered":"exited"),k=(0,a.useRef)(-1),j=(0,a.useRef)(-1),C=(0,a.useRef)(-1),S=n=>{let r=n?o:i,a=n?d:p;window.clearTimeout(k.current);let c=v?0:n?e:t;y(c),0===c?("function"==typeof r&&r(),"function"==typeof a&&a(),w(n?"entered":"exited")):C.current=requestAnimationFrame(()=>{s.flushSync(()=>{w(n?"pre-entering":"pre-exiting")}),C.current=requestAnimationFrame(()=>{"function"==typeof r&&r(),w(n?"entering":"exiting"),k.current=window.setTimeout(()=>{"function"==typeof a&&a(),w(n?"entered":"exited")},c)})})},I=e=>{if(window.clearTimeout(j.current),"number"!=typeof(e?m:f)){S(e);return}j.current=window.setTimeout(()=>{S(e)},e?m:f)};return(0,l.l)(()=>{I(r)},[r]),(0,a.useEffect)(()=>()=>{window.clearTimeout(k.current),cancelAnimationFrame(C.current)},[]),{transitionDuration:b,transitionStatus:x,transitionTimingFunction:n||"ease"}}({mounted:p,exitDuration:d,duration:n,timingFunction:f,onExit:h,onEntered:g,onEnter:v,onExited:b,enterDelay:y,exitDelay:x});return 0===w?p?(0,r.jsx)(r.Fragment,{children:m({})}):e?m({display:"none"}):null:"exited"===k?e?m({display:"none"}):null:(0,r.jsx)(r.Fragment,{children:m(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:w,state:k,timingFunction:j}))})}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:m,styles:f,style:h,...g}=n,v=(0,i.y)({name:d,props:n,classes:c,className:s,style:h,classNames:m,styles:f,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.d5)((e,t)=>{let n=(0,o.w)("VisuallyHidden",l,e),{classNames:s,className:u,style:d,styles:p,unstyled:m,vars:f,...h}=n,g=(0,i.y)({name:"VisuallyHidden",classes:c,props:n,className:u,style:d,classNames:s,styles:p,unstyled:m});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 m=n(97072),f=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:w,darkHidden:k,renderRoot:j,__size:C,...S},I)=>{let M=(0,u.rZ)(),{styleProps:T,rest:E}=(0,m.c)(S),P=(0,l.dv)(),R=P?.()?.(T.sx),N=(0,g.m)(),_=(0,h.n)({styleProps:T,theme:M,data:f.p}),B={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":w,"mantine-dark-hidden":k,[`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(B):(0,r.jsx)(e||"div",{...B})]})});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:m,pt:f,pb:h,pl:g,pr:v,pe:b,ps:y,bd:x,bg:w,c:k,opacity:j,ff:C,fz:S,fw:I,lts:M,ta:T,lh:E,fs:P,tt:R,td:N,w:_,miw:B,maw:A,h:F,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:m,pt:f,pb:h,pl:g,pr:v,pe:b,ps:y,bd:x,bg:w,c:k,opacity:j,ff:C,fz:S,fw:I,lts:M,ta:T,lh:E,fs:P,tt:R,td:N,w:_,miw:B,maw:A,h:F,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 w}});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 m(e,t){return(Array.isArray(e)?e:[e]).reduce((e,t)=>`${t}{${e}}`,t)}var f=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,f.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?m(t,n):"",o=p(e.dark),i=p(e.light),a=o?":host"===t?m(`${t}([data-mantine-color-scheme="dark"])`,o):m(`${t}[data-mantine-color-scheme="dark"]`,o):"",s=i?":host"===t?m(`${t}([data-mantine-color-scheme="light"])`,i):m(`${t}[data-mantine-color-scheme="light"]`,i):"";return`${r}${a}${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?"":` +(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[w]+" "+k:s(k,/&\f/g,h[w])).trim())&&(d[x++]=j);return y(e,t,n,0===i?P:l,d,p,m)}function F(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=k(),38===r&&12===o&&(t[n]=1),!j(o);)w();return u(b,e,g)},D=function(e,t){var n=-1,r=44;do switch(j(r)){case 0:38===r&&12===k()&&(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===k()?"&\f":"",t[n]=e[n].length;break}default:e[n]+=i(r)}while(r=w());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?"":" "}(B);break;case 92:G+=function(e,t){for(var n;--t&&w()&&!(v<48)&&!(v>102)&&(!(v>57)||!(v<65))&&(!(v>70)||!(v<97)););return n=g+(t<6&&32==k()&&32==w()),u(b,e,n)}(g-1,7);continue;case 47:switch(k()){case 42:case 47:p(y(M=function(e,t){for(;w();)if(e+v===57)break;else if(e+v===84&&47===k())break;return"/*"+u(b,t,g-1)+"*"+i(47===e?e:w())}(w(),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?F(G+";",o,r,R-1):F(s(G," ","")+";",o,r,R-2),I);break;case 59:G+=";";default:if(p(V=A(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(A(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),_=B;default:if(L<1){if(123==z)--L;else if(125==z&&0==L++&&125==(v=g>0?l(b,--g):0,f--,10===v&&(f=1,m--),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===k()&&(G+=S(w())),N=k(),P=R=d(H=G+=function(e){for(;!j(k());)w();return u(b,e,g)}(g)),z++;break;case 45:45===B&&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 m(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(95810)}])},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 A},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),m=n(63409),f=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,f.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)(m.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 w(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 k=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),B=n.n(_);function A(e){let{href:t,...n}=e,o=null==t?void 0:t.replace("https://mantine.dev","");return o&&!(null==o?void 0:o.startsWith("http"))&&o.trim().length>0?(0,r.jsx)(N.e,{className:B().link,component:R(),href:o,...n}):(0,r.jsx)(N.e,{className:B().link,href:t,...n})}var F=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)(F.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)(A,{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)(k.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)(A,{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)(A,{href:"/core/input",children:"Input"})," ","and ",(0,r.jsx)(A,{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)(A,{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)(A,{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)(A,{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)(A,{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)(A,{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)(A,{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)(A,{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:"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/songkeys/next-app-mantine-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:"next",name:"ship-template",link:"https://github.com/paralect/ship",description:"Fullstack boilerplate with Next.js, auth, MongoDB, Turborepo"},{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:"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 em(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)(A,{href:"/styles/postcss-preset",children:"PostCSS setup"}),","," ",(0,r.jsx)(A,{href:"/theming/color-schemes",children:"ColorSchemeScript"})," and other essential features. Some templates also include additional features like"," ",(0,r.jsx)(A,{href:"/guides/jest",children:"Jest"}),","," ",(0,r.jsx)(A,{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)(A,{href:"/templates-usage",children:"this page"}),"."]}),(0,r.jsx)(ep,{type:t})]})}function ef(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)(A,{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)(A,{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)(A,{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 ew(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 ek=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)(A,{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:ek(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)(A,{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 eB(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 eA=n(97654),eF=n(28559);function eL({size:e,style:t,...n}){return(0,r.jsxs)(eF.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,eA.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)(F.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","@tiptap/pm","@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@^7.1.0"]},{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)(F.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:w,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:em,ComboboxDisclaimer:ef,ComboboxData:ey,ComboboxLargeData:ex,ComboboxFiltering:ew,ComboboxProps:eC,ServerComponentsIncompatible:eS,ExamplesButton:eB,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:A,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),keywords:t.searchTags,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),m=n(93010),f=n(28559),h=n(23205),g=n(893),v=n(90664),b=n(19289),y=n(58092),x=n(68893);let w=(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 k="m_83c3d5d1";function j(){let{setColorScheme:e}=(0,y.X)(),t=(0,x.l)("light",{getInitialValueInEffect:!0});return(0,r.jsxs)(w,{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)(k,"m_f4e3c6be"),stroke:1.5}),(0,r.jsx)(b.Z,{className:(0,s.Z)(k,"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)(w,{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)(w,{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)(w,{tooltip:"Source code",component:"a",href:e,children:(0,r.jsx)(R.E,{size:22})})}var _=n(27111);function B({className:e,...t}){return(0,r.jsx)(d.k,{...t,className:(0,s.Z)("m_6e98493a",e),children:(0,r.jsxs)(m.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 A({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)(m.Z,{gap:"xs",...l,children:[o&&(0,r.jsx)(B,{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 F({onSearch:e}){return(0,r.jsx)(w,{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.13.3"}),(0,r.jsx)(a.Z,{className:O().versionChevron,stroke:1.5})]})})}),(0,r.jsx)(c.v.Dropdown,{children:g})]})]}),(0,r.jsx)(A,{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)(m.Z,{justify:"space-between",w:"100%",wrap:"nowrap",children:[(0,r.jsx)(f.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)(m.Z,{gap:"sm",children:[(0,r.jsx)(F,{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"}]]),em=(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"}]]),ef=(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:em,buttons:ef,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 ew(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 ek(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)(ew,{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)(ew,{data:e,onNavbarClose:n,linkRef:t=>{c.current[e.slug]=t}},e.slug)});return(0,r.jsxs)(f.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)(ek,{data:e,onNavbarClose:n},e.group));return(0,r.jsx)(f.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.jsxs)(o.x,{component:"svg",__vars:{"--icon-size":(0,i.h)(t)},xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 394 80",className:s().nextIcon,"data-large":!0,...n,children:[(0,r.jsx)("path",{fill:"currentColor",d:"M261.919.033h68.628V12.7h-27.224v66.639H289.71V12.7h-27.791V.033zM149.052.033V12.7h-55.01v20.377h44.239v12.667H94.042v20.928h55.01V79.34H80.43V12.7h-.006V.033h68.628zM183.32.066h-17.814l63.806 79.306h17.866l-31.907-39.626L247.127.126l-17.815.028-22.96 28.516L183.32.066zM201.6 56.715l-8.921-11.092-27.224 33.81h17.865l18.28-22.718z"}),(0,r.jsx)("path",{fill:"currentColor",fillRule:"evenodd",d:"M80.907 79.339L17.015 0H0v79.306h13.612V16.952l50.195 62.387h17.1z",clipRule:"evenodd"}),(0,r.jsx)("path",{fill:"currentColor",d:"M333.607 78.855a3.528 3.528 0 01-2.555-1.036c-.71-.691-1.061-1.527-1.052-2.518-.009-.963.342-1.79 1.052-2.481a3.528 3.528 0 012.555-1.036c.959 0 1.798.345 2.508 1.036.72.69 1.079 1.518 1.089 2.481a3.44 3.44 0 01-.508 1.79 3.675 3.675 0 01-1.319 1.282 3.403 3.403 0 01-1.77.482zM356.84 45.445h6.032v23.24c-.009 2.135-.471 3.962-1.374 5.498-.913 1.536-2.177 2.708-3.8 3.535-1.614.818-3.505 1.237-5.654 1.237-1.965 0-3.726-.355-5.294-1.046-1.568-.69-2.813-1.726-3.726-3.09-.923-1.363-1.375-3.063-1.375-5.098h6.042c.009.89.212 1.663.599 2.308a3.855 3.855 0 001.605 1.481c.691.346 1.485.519 2.379.519.969 0 1.799-.2 2.472-.61.673-.4 1.19-1 1.55-1.799.35-.79.535-1.772.544-2.935v-23.24zM387.691 54.534c-.147-1.409-.793-2.509-1.918-3.29-1.135-.79-2.601-1.182-4.4-1.182-1.263 0-2.351.191-3.255.564-.904.382-1.605.89-2.085 1.536-.479.645-.719 1.381-.738 2.208 0 .691.166 1.29.489 1.79.323.51.756.937 1.319 1.282a8.806 8.806 0 001.845.882c.682.236 1.365.436 2.047.6l3.145.772a21.74 21.74 0 013.662 1.182 12.966 12.966 0 013.163 1.872 8.384 8.384 0 012.214 2.726c.544 1.064.821 2.309.821 3.745 0 1.936-.498 3.635-1.504 5.108-1.005 1.463-2.453 2.608-4.353 3.435-1.891.818-4.178 1.236-6.871 1.236-2.601 0-4.87-.4-6.779-1.2-1.918-.79-3.413-1.954-4.492-3.48-1.079-1.527-1.66-3.39-1.743-5.58h5.977c.083 1.144.452 2.099 1.079 2.871.636.763 1.466 1.327 2.481 1.709 1.024.372 2.167.563 3.431.563 1.319 0 2.481-.2 3.486-.59.996-.391 1.78-.937 2.343-1.646.572-.7.858-1.526.867-2.472-.009-.863-.268-1.581-.766-2.145-.507-.563-1.208-1.036-2.103-1.417a21.606 21.606 0 00-3.154-1.027l-3.818-.964c-2.758-.7-4.944-1.763-6.54-3.19-1.604-1.427-2.398-3.317-2.398-5.69 0-1.944.535-3.653 1.615-5.116 1.069-1.463 2.536-2.6 4.39-3.408 1.863-.818 3.966-1.218 6.308-1.218 2.38 0 4.464.4 6.263 1.218 1.798.809 3.21 1.936 4.233 3.372 1.024 1.436 1.559 3.08 1.587 4.944h-5.848z"})]})},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"},Changelog7110:{title:"Version v7.11.0",slug:"/changelog/7-11-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.11.0",date:"June 26th, 2024"},Changelog7120:{title:"Version v7.12.0",slug:"/changelog/7-12-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.12.0",date:"August 6th, 2024"},Changelog7130:{title:"Version v7.13.0",slug:"/changelog/7-13-0",release:"https://github.com/mantinedev/mantine/releases/tag/7.13.0",date:"September 26th, 2024"},PreviousChangelogs:{title:"All releases",slug:"/changelog/previous-versions",hideHeader:!0},AllReleases:{title:"All releases",slug:"/changelog/all-releases",hideHeader:!0}};function o(e,t){let n=e.replace(/[A-Z]/g,e=>"-".concat(e.toLowerCase()));return{title:n,package:"@mantine/hooks",slug:"/hooks/".concat(n),description:t,import:"import { ".concat(e," } from '@mantine/hooks';"),source:"@mantine/hooks/src/".concat(n,"/").concat(n,".ts"),docs:"hooks/".concat(n,".mdx"),searchTags:"".concat(e," ").concat(n.split("-").join(" "))}}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/core/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"},SemiCircleProgress:{title:"SemiCircleProgress",package:"@mantine/core",slug:"/core/semi-circle-progress",props:["SemiCircleProgress"],styles:["SemiCircleProgress"],description:"Represent progress with semi circle diagram",import:"import { SemiCircleProgress } from '@mantine/core';",source:"@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.tsx",docs:"core/semi-circle-progress.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:"Scatter chart component",import:"import { ScatterChart } from '@mantine/charts';",source:"@mantine/charts/src/ScatterChart/ScatterChart.tsx",docs:"charts/scatter-chart.mdx"},BubbleChart:{title:"BubbleChart",props:["BubbleChart"],styles:["BubbleChart"],package:"@mantine/charts",slug:"/charts/bubble-chart",description:"Bubble chart component",import:"import { BubbleChart } from '@mantine/charts';",source:"@mantine/charts/src/BubbleChart/BubbleChart.tsx",docs:"charts/bubble-chart.mdx"},CompositeChart:{title:"CompositeChart",props:["CompositeChart"],styles:["CompositeChart"],package:"@mantine/charts",slug:"/charts/composite-chart",description:"Composed chart with support for Area, Bar and Line charts",import:"import { CompositeChart } from '@mantine/charts';",source:"@mantine/charts/src/CompositeChart/CompositeChart.tsx",docs:"charts/composite-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,a.SemiCircleProgress]},{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.CompositeChart,a.DonutChart,a.PieChart,a.RadarChart,a.ScatterChart,a.BubbleChart,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.Changelog7130,a.Changelog7120,a.Changelog7110,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),[])},95810:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return e_}});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 m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function f(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,m(e,t)}n(13980);var h=n(28316),g={disabled:!1},v=d.createContext(null),b="unmounted",y="exited",x="entering",w="entered",k="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=w:o=t.unmountOnExit||t.mountOnEnter?b:y,r.state={status:o},r.nextCallback=null,r}f(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!==w&&(t=x):(n===x||n===w)&&(t=k)}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:w},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:w},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:k},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)(),m=()=>window.clearTimeout(p.current),f=()=>{t(e.id),m()},h=()=>{"number"==typeof u&&(p.current=window.setTimeout(f,u))};return(0,d.useEffect)(()=>{e.onOpen?.(e)},[]),(0,d.useEffect)(()=>(h(),m),[u]),(0,r.jsx)(G.P,{...o,...l,onClose:f,ref:i,onMouseEnter:m,onMouseLeave:h,children:c})});W.displayName="@mantine/notifications/NotificationContainer";var Y=n(60048),q={root:"m_b37d9ac7",notification:"m_5ed0edd0"};let K={position:"bottom-right",autoClose:4e3,transitionDuration:250,containerWidth:440,notificationMaxHeight:200,limit:5,zIndex:(0,P.w)("overlay"),store:Y.Ps,withinPortal:!0},U=(0,R.Z)((e,{zIndex:t,containerWidth:n})=>({root:{"--notifications-z-index":t?.toString(),"--notifications-container-width":(0,N.h)(n)}})),X=(0,_.d5)((e,t)=>{let n=(0,B.w)("Notifications",K,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,position:u,autoClose:p,transitionDuration:m,containerWidth:f,notificationMaxHeight:h,limit:g,zIndex:v,store:b,portalProps:y,withinPortal:x,...w}=n,k=(0,A.rZ)(),C=(0,Y.zn)(b),S=(0,$.N)(),I=(0,z.J)(),M=(0,d.useRef)({}),T=(0,d.useRef)(0),P=k.respectReducedMotion&&I?1:m,R=(0,F.y)({name:"Notifications",classes:q,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:U});(0,d.useEffect)(()=>{b?.updateState(e=>({...e,limit:g||5,defaultPosition:u}))},[g,u]),(0,H.l)(()=>{C.notifications.length>T.current&&setTimeout(()=>S(),0),T.current=C.notifications.length},[C.notifications]);let N=C.notifications.reduce((e,t)=>(e[t.position||u].push(t),e),O.reduce((e,t)=>(e[t]=[],e),{})),_=O.reduce((e,t)=>(e[t]=N[t].map(({style:e,...n})=>(0,r.jsx)(j,{timeout:P,onEnter:()=>M.current[n.id].offsetHeight,nodeRef:{current:M.current[n.id]},children:o=>(0,r.jsx)(W,{ref:e=>{M.current[n.id]=e},data:n,onHide:e=>(0,Y.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:Z[a],transitionDuration:`${r}ms, ${r}ms, ${r}ms`,transitionTimingFunction:"cubic-bezier(.51,.3,0,1.21), cubic-bezier(.51,.3,0,1.21), linear",transitionProperty:"opacity, transform, max-height"},c={opacity:1,transform:V[a]},l={opacity:0,maxHeight:0,transform:Z[a]};return{...s,...{entering:c,entered:c,exiting:l,exited:l}[e]}}({state:o,position:t,transitionDuration:P,maxHeight:h}),...e}})})},n.id)),e),{});return(0,r.jsxs)(L.q,{withinPortal:x,...y,children:[(0,r.jsx)(D.x,{...R("root"),"data-position":"top-center",ref:t,...w,children:(0,r.jsx)(E,{children:_["top-center"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"top-left",...w,children:(0,r.jsx)(E,{children:_["top-left"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"top-right",...w,children:(0,r.jsx)(E,{children:_["top-right"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"bottom-right",...w,children:(0,r.jsx)(E,{children:_["bottom-right"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"bottom-left",...w,children:(0,r.jsx)(E,{children:_["bottom-left"]})}),(0,r.jsx)(D.x,{...R("root"),"data-position":"bottom-center",...w,children:(0,r.jsx)(E,{children:_["bottom-center"]})})]})});X.classes=q,X.displayName="@mantine/notifications/Notifications",X.show=Y.N9.show,X.hide=Y.N9.hide,X.update=Y.N9.update,X.clean=Y.N9.clean,X.cleanQueue=Y.N9.cleanQueue,X.updateState=Y.N9.updateState;var J=n(70980),Q=n(45847),ee=n.n(Q);function et(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(ee(),{strategy:"afterInteractive",src:"https://www.googletagmanager.com/gtag/js?id=G-4Z4NNVLRH5"}),(0,r.jsx)(ee(),{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 en=n(5632),er=n(58092),eo=n(68893);let ei=["/combobox"];function ea(){let e=(0,en.useRouter)(),{setColorScheme:t}=(0,er.X)(),{toggleDirection:n}=(0,a.gm)(),o=(0,eo.l)("light");return(0,u.A)([["mod + J",()=>t("light"===o?"dark":"light")],["mod + shift + L",()=>!ei.includes(e.pathname)&&n()]],[]),(0,r.jsx)(r.Fragment,{children:null})}var es=n(52905),ec=n(8582),el=n(17115),eu=n(78222),ed=n(73533),ep=n(93010);let em=(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:m}=o,f=function(){let e=(0,d.useContext)(em);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)(ep.Z,{mt:u?0:"md",justify:"flex-end",...s,children:[(0,r.jsx)(el.z,{variant:"default",...t,onClick:n=>{"function"==typeof t?.onClick&&t?.onClick(n),"function"==typeof c&&c(),a&&f.closeModal(e)},children:t?.children||p}),(0,r.jsx)(el.z,{...n,onClick:t=>{"function"==typeof n?.onClick&&n?.onClick(t),"function"==typeof l&&l(),i&&f.closeModal(e)},children:n?.children||m})]})]})}em.displayName="@mantine/modals/ModalsContext";var eh=n(2807);function eg(e,t){t&&"confirm"===e.type&&e.props.onCancel?.(),e.props.onClose?.()}function ev(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;eg(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=>{eg(e,t.canceled)}),{current:e.current,modals:[]};default:return e}}function eb({children:e,modalProps:t,labels:n,modals:o}){let[i,a]=(0,d.useReducer)(ev,{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,ed.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,ed.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,ed.k)();return a({type:"OPEN",modal:{id:r,type:"context",props:n,ctx:e}}),r},[a]),m=(0,d.useCallback)((e,t)=>{a({type:"CLOSE",modalId:e,canceled:t})},[s,a]);(0,eh.Ro)({openModal:l,openConfirmModal:u,openContextModal:({modal:e,...t})=>p(e,t),closeModal:m,closeContextModal:m,closeAllModals:c});let f={modals:i.modals,openModal:l,openConfirmModal:u,openContextModal:p,closeModal:m,closeContextModal:m,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:f,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:t}}default:return{modalProps:{},content:null}}})();return(0,r.jsxs)(em.Provider,{value:f,children:[(0,r.jsx)(eu.u,{zIndex:(0,P.w)("modal")+1,...t,...h,opened:i.modals.length>0,onClose:()=>m(i.current?.id),children:g}),e]})}let ey=e=>{let{context:t,id:n,innerProps:o}=e;return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(ec.x,{size:"sm",children:o.modalBody}),(0,r.jsx)(el.z,{fullWidth:!0,mt:"md",onClick:()=>t.closeModal(n),children:"Close modal"})]})};function ex(e){let{children:t}=e;return(0,r.jsx)(eb,{labels:{confirm:"Confirm",cancel:"Cancel"},modals:{demonstration:ey},children:t})}var ew=n(20233),ek=n(47196),ej=n(87744),eC=n(99469),eS=n.n(eC);function eI(){return(0,r.jsx)(i(),{children:(0,r.jsx)("style",{dangerouslySetInnerHTML:{__html:":root{ --docs-font-primary: ".concat(eS().style.fontFamily,", ").concat(ej.t.fontFamily,"; }")}})})}var eM=n(60231),eT=n(9065);let eE=(0,eM.j)({fontFamilyMonospace:"Menlo, Monaco, ".concat(ej.t.fontFamilyMonospace),colors:{virtual:(0,eT.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"]}}),eP=(0,n(2107).Z)({key:"css"});n(59739);let eR=["/","/combobox","/app-shell"];async function eN(){let{getHighlighter:e}=await n.e(92198).then(n.bind(n,92198));return await e({langs:["tsx","scss","html","bash","json"],themes:[]})}function e_(e){let{Component:t,pageProps:n,router:o}=e,d=!eR.includes(o.pathname),[p,m]=(0,l.I)({key:"mantine-navbar-opened",defaultValue:!0});return(0,u.A)([["mod + alt + N",()=>m(!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)(et,{}),(0,r.jsx)(eI,{}),(0,r.jsx)(a._9,{initialDirection:"ltr",detectDirection:!1,children:(0,r.jsx)(c.Nl,{cache:eP,children:(0,r.jsx)(s.M,{theme:eE,defaultColorScheme:"light",children:(0,r.jsxs)(J.U,{loadShiki:eN,children:[(0,r.jsx)(ew.o,{}),(0,r.jsx)(X,{}),(0,r.jsx)(ex,{children:(0,r.jsxs)(es.Cu,{children:[(0,r.jsx)(ea,{}),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 m}});let a="refresh",s="navigate",c="restore",l="server-patch",u="prefetch",d="fast-refresh",p="server-action";function m(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),m=n(70514),f=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)}(async()=>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:w=null,passHref:k,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),B=null!=N?N:_,A=!N,F=!1!==w,L=null===w?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,m.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(()=>{B&&V&&F&&b(B,D,$,{locale:I},{kind:L},A)},[$,D,V,I,F,null==N?void 0:N.locale,B,A,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),B&&!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,B,D,$,j,C,S,I,A)},onMouseEnter(e){P||"function"!=typeof T||T(e),P&&r.props&&"function"==typeof r.props.onMouseEnter&&r.props.onMouseEnter(e),B&&(F||!A)&&b(B,D,$,{locale:I,priority:!0,bypassPrefetchedCheck:!0},{kind:L},A)},onTouchStart:function(e){P||"function"!=typeof E||E(e),P&&r.props&&"function"==typeof r.props.onTouchStart&&r.props.onTouchStart(e),B&&(F||!A)&&b(B,D,$,{locale:I,priority:!0,bypassPrefetchedCheck:!0},{kind:L},A)}};if((0,l.isAbsoluteUrl)($))Y.href=$;else if(!P||k||"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,f.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),m=(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]),[m,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:f,shards:b,noIsolation:x,inert:w,setCallbacks:c,allowPinchZoom:!!k,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:m,ref:I}),p))});v.defaultProps={enabled:!0,removeScrollBar:!0,inert:!1},v.classNames={fullWidth:m,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,f({},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])}},w=function(){var e=x();return function(t){return e(t.styles,t.dynamic),null}},k={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 k;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=w(),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(m," {\n margin-right: ").concat(s,"px ").concat(r,";\n }\n \n .").concat(p," .").concat(p," {\n right: 0 ").concat(r,";\n }\n \n .").concat(m," .").concat(m," {\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),B(e,r)){var o=A(e,r);if(o[1]>o[2])return!0}r=r.parentNode}while(r&&r!==n.body);return!1},B=function(e,t){return"v"===e?N(t,"overflowY"):N(t,"overflowX")},A=function(e,t){return"v"===e?[t.scrollTop,t.scrollHeight,t.clientHeight]:[t.scrollLeft,t.scrollWidth,t.clientWidth]},F=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,m=0;do{var f=A(e,c),h=f[0],g=f[1]-f[2]-a*h;(h||g)&&B(e,c)&&(p+=g,m+=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(m)||!o&&-s>m)&&(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(w)[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 m=r.current||o;return F(m,t,e,"h"===m?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))},[]),m=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:m}),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 f=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,f?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 f},oo:function(){return i},uY:function(){return m},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,m=i.y+i.height/2-a.height/2,f=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:m};break;case"left":o={x:i.x-a.width,y:m};break;default:o={x:i.x,y:i.y}}switch((0,r.hp)(t)){case"start":o[c]-=f*(n&&d?-1:1);break;case"end":o[c]+=f*(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),m=r,f={},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),m={x:n,y:o},f=(0,r.Wh)(i),h=(0,r.I4)(f),g=await s.getDimensions(u),v="y"===f,b=v?"clientHeight":"clientWidth",y=a.reference[h]+a.reference[f]-m[f]-a.floating[h],x=m[f]-a.reference[f],w=await (null==s.getOffsetParent?void 0:s.getOffsetParent(u)),k=w?w[b]:0;k&&await (null==s.isElement?void 0:s.isElement(w))||(k=c.floating[b]||a.floating[h]);let j=k/2-g[h]/2-1,C=(0,r.VV)(p[v?"top":"left"],j),S=(0,r.VV)(p[v?"bottom":"right"],j),I=k-g[h]-S,M=k/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))||[]),m=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),f=(0,r.JB)(l(p)),h=(0,r.yd)(c),g=await a.getElementRects({reference:{getBoundingClientRect:function(){if(2===m.length&&m[0].left>m[1].right&&null!=u&&null!=d)return m.find(e=>u>e.left-h.left&&ue.top-h.top&&d=2){if("y"===(0,r.Qq)(n)){let e=m[0],t=m[m.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)(...m.map(e=>e.right)),o=(0,r.VV)(...m.map(e=>e.left)),i=m.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 f}},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:m,crossAxis:f,alignmentAxis:h}="number"==typeof p?{mainAxis:p,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...p};return c&&"number"==typeof h&&(f="end"===c?-1*h:h),l?{x:f*d,y:m*u}:{x:m*u,y:f*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}}}}},m=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),m=(0,r.Qq)((0,r.k3)(i)),f=(0,r.Rn)(m),h=d[f],g=d[m];if(s){let e="y"===f?"top":"left",t="y"===f?"bottom":"right",n=h+p[e],o=h-p[t];h=(0,r.uZ)(n,h,o)}if(c){let e="y"===m?"top":"left",t="y"===m?"bottom":"right",n=g+p[e],o=g-p[t];g=(0,r.uZ)(n,g,o)}let v=l.fn({...t,[f]:h,[m]:g});return{...v,data:{x:v.x-n,y:v.y-o}}}}},f=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),m=(0,r.Rn)(p),f=d[m],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"===m?"height":"width",t=a.reference[m]-a.floating[e]+v.mainAxis,n=a.reference[m]+a.reference[e]-v.mainAxis;fn&&(f=n)}if(u){var b,y;let e="y"===m?"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{[m]:f,[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),m=(0,r.k3)(i),f=(0,r.hp)(i),h="y"===(0,r.Qq)(i),{width:g,height:v}=s.floating;"top"===m||"bottom"===m?(n=m,o=f===(await (null==c.isRTL?void 0:c.isRTL(l.floating))?"start":"end")?"left":"right"):(o=m,n="end"===f?"top":"bottom");let b=v-p[n],y=g-p[o],x=!t.middlewareData.shift,w=b,k=y;if(h){let e=g-p.left-p.right;k=f||x?(0,r.VV)(y,e):e}else{let e=v-p.top-p.bottom;w=f||x?(0,r.VV)(b,e):e}if(x&&!f){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?k=g-2*(0!==e||0!==t?e+t:(0,r.Fp)(p.left,p.right)):w=v-2*(0!==n||0!==o?n+o:(0,r.Fp)(p.top,p.bottom))}await u({...t,availableWidth:k,availableHeight:w});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 k},dp:function(){return j},dr:function(){return I},oo:function(){return M},uY:function(){return w},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 m=(void 0===(a=n)&&(a=!1),o&&(!a||o===(0,i.Jj)(d))&&a)?u(d):(0,r.ze)(0),f=(l.left+m.x)/p.x,h=(l.top+m.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;f*=e.x,h*=e.y,g*=e.x,v*=e.y,f+=o,h+=a,n=(0,i.Jj)(n).frameElement}}return(0,r.JB)({width:g,height:v,x:f,y:h})}let p=[":popover-open",":modal"];function m(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 f(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+f(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=f(s))}let h=l.left+u.scrollLeft-p.x,g=l.top+u.scrollTop-p.y,[v,b,y]=m(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?m(t.floating):[!1];if(o===s||l)return n;let u={scrollLeft:0,scrollTop:0},p=(0,r.ze)(1),f=(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),f.x=e.x+o.clientLeft,f.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+f.x,y:n.y*p.y-u.scrollTop*p.y+f.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:m=!1}=o,f=s(e),h=c||l?[...f?(0,i.Kx)(f):[],...(0,i.Kx)(t)]:[];h.forEach(e=>{c&&e.addEventListener("scroll",n,{passive:!0}),l&&e.addEventListener("resize",n)});let g=f&&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:m}=e.getBoundingClientRect();if(c||t(),!p||!m)return;let f=(0,r.GW)(d),h=(0,r.GW)(a.clientWidth-(u+p)),g={rootMargin:-f+"px "+-h+"px "+-(0,r.GW)(a.clientHeight-(d+m))+"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}(f,n):null,v=-1,b=null;u&&(b=new ResizeObserver(e=>{let[r]=e;r&&r.target===f&&b&&(b.unobserve(t),cancelAnimationFrame(v),v=requestAnimationFrame(()=>{var e;null==(e=b)||e.observe(t)})),n()}),f&&!m&&b.observe(f),b.observe(t));let y=m?d(e):null;return m&&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,m&&cancelAnimationFrame(a)}}let w=o.uY,k=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:m,floating:f}={},transform:h=!0,whileElementsMounted:g,open:v}=e,[b,y]=o.useState({x:0,y:0,strategy:n,placement:t,middlewareData:{},isPositioned:!1}),[x,w]=o.useState(a);c(x,a)||w(a);let[k,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=m||k,E=f||C,P=o.useRef(null),R=o.useRef(null),N=o.useRef(b),_=null!=g,B=d(g),A=d(p),F=o.useCallback(()=>{if(!P.current||!R.current)return;let e={placement:t,strategy:n,middleware:x};A.current&&(e.platform=A.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,A]);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(B.current)return B.current(T,E,F);F()}},[T,E,F,B,_]);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:F,refs:D,elements:$,floatingStyles:z}),[b,F,D,$,z])}},63607:function(e,t,n){"use strict";n.d(t,{e0:function(){return B},Qu:function(){return A},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 m(e,t){return null!=t&&("composedPath"in e?e.composedPath().includes(t):null!=e.target&&t.contains(e.target))}function f(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++,k=o["useId".toString()]||function(){let[e,t]=r.useState(()=>y?w():void 0);return b(()=>{null==e&&t(w())},[]),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:m}=e,{enabled:f=!0,delay:h=0,handleClose:g=null,mouseOnly:v=!1,restMs:y=0,move:x=!0}=t,w=I(),k=S(),j=T(g),C=T(h),M=r.useRef(),R=r.useRef(),N=r.useRef(),_=r.useRef(),B=r.useRef(!0),A=r.useRef(!1),F=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(f)return c.on("openchange",e),()=>{c.off("openchange",e)};function e(e){let{open:t}=e;t||(clearTimeout(R.current),clearTimeout(_.current),B.current=!0)}},[f,c]),r.useEffect(()=>{if(!f||!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,f,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(()=>{F.current(),N.current=void 0},[]),z=r.useCallback(()=>{if(A.current){let e=p(m.floating.current).body;e.style.pointerEvents="",e.removeAttribute(E),A.current=!1}},[m]);return r.useEffect(()=>{if(f&&(0,i.kK)(l))return n&&l.addEventListener("mouseleave",m),null==u||u.addEventListener("mouseleave",m),x&&l.addEventListener("mousemove",r,{once:!0}),l.addEventListener("mouseenter",r),l.addEventListener("mouseleave",c),()=>{n&&l.removeEventListener("mouseleave",m),null==u||u.removeEventListener("mouseleave",m),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),B.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;F.current();let o=p(u);if(clearTimeout(_.current),j.current){n||clearTimeout(R.current),N.current=j.current({...e,tree:w,x:r.clientX,y:r.clientY,onClose(){z(),$(),D(r,!0,"safe-polygon")}});let t=N.current;o.addEventListener("mousemove",t),F.current=()=>{o.removeEventListener("mousemove",t)};return}"touch"===M.current&&s(u,r.relatedTarget)||D(r)}function m(n){t()||null==j.current||j.current({...e,tree:w,x:n.clientX,y:n.clientY,onClose(){z(),$(),D(n)}})(n)}},[l,u,f,e,v,y,x,D,$,z,o,n,w,C,j,a]),b(()=>{var e,t;if(f&&n&&null!=(e=j.current)&&e.__options.blockPointerEvents&&L()){let e=p(u).body;if(e.setAttribute(E,""),e.style.pointerEvents="none",A.current=!0,(0,i.kK)(l)&&u){let e=null==w||null==(t=w.nodesRef.current.find(e=>e.id===k))||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=""}}}},[f,n,k,u,l,w,j,L]),b(()=>{n||(M.current=void 0,$(),z())},[n,$,z]),r.useEffect(()=>()=>{$(),clearTimeout(R.current),clearTimeout(_.current),z()},[f,l,$,z]),r.useMemo(()=>{if(!f)return{};function e(e){M.current=e.pointerType}return{reference:{onPointerDown:e,onPointerEnter:e,onMouseMove(e){n||0===y||(clearTimeout(_.current),_.current=setTimeout(()=>{B.current||o(!0,e.nativeEvent,"hover")},y))}},floating:{onMouseEnter(){clearTimeout(R.current)},onMouseLeave(e){D(e.nativeEvent,!1)}}}},[f,y,n,o,D])}let N=r.createContext({delay:0,initialDelay:0,timeoutMs:0,currentId:null,setCurrentId:()=>{},setState:()=>{},isInstantPhase:!1}),_=()=>r.useContext(N),B=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)},A=(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 F(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:w="pointerdown",ancestorScroll:k=!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:B,outsidePress:A}=$(C),z=v(e=>{if(!n||!h||!g||"Escape"!==e.key)return;let t=S?F(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=f(e))||t.removeEventListener("keydown",n)};null==(t=f(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=f(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&&F(S.nodesRef.current,a).some(t=>{var n;return m(e,null==(n=t.context)?void 0:n.elements.floating)});if(m(e,u)||m(e,l)||g)return;let v=S?F(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=f(e))||t.removeEventListener(y,n)};null==(t=f(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",B?H:z,B),E&&t.addEventListener(y,A?Z:O,A);let r=[];return k&&((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",B?H:z,B),E&&t.removeEventListener(y,A?Z:O,A),r.forEach(t=>{t.removeEventListener("scroll",e)})}},[d,u,l,c,g,E,y,n,o,k,h,N,_,z,B,H,O,A,Z]),r.useEffect(()=>{P.current=!1},[E,y]),r.useMemo(()=>h?{reference:{onKeyDown:z,[L[w]]: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,w,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(),m=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)}),f=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=k(),w=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)&&(f.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:w,domReference:f}),[u.refs,j,w]),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:m}),[u,a,x,y,n,m,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:m,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=f(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(m.floating.current,r)||s(h,r)||n)return;o(!1,e.nativeEvent,"focus")}})}}}:{},[g,v,h,m,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=k(),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=f(),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 m(e){let t=b(e);for(;c(t)&&!h(t);){if(p(t))return t;t=b(t)}return null}function f(){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 f},Py:function(){return h},Re:function(){return c},Ze:function(){return d},Zq:function(){return l},ao:function(){return u},gQ:function(){return m},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 w},NM:function(){return i},Qq:function(){return g},Rn:function(){return f},VV:function(){return r},Wh:function(){return v},gy:function(){return y},hp:function(){return m},i8:function(){return b},k3:function(){return p},ku:function(){return d},pw:function(){return k},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 m(e){return e.split("-")[1]}function f(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 f(g(e))}function b(e,t,n){void 0===n&&(n=!1);let r=m(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=k(a)),[a,k(a)]}function y(e){let t=k(e);return[x(e),t,x(t)]}function x(e){return e.replace(/start|end/g,e=>l[e])}function w(e,t,n,r){let o=m(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 k(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"}};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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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}});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,m.h)(t)}})),b=(0,f.d5)((e,t)=>{let n=(0,a.w)("ActionIconGroup",g,e),{className:o,style:i,classNames:l,styles:u,unstyled:d,orientation:p,vars:m,borderWidth:f,variant:b,mod:y,...x}=(0,a.w)("ActionIconGroup",g,e),w=(0,s.y)({name:"ActionIconGroup",props:n,classes:h,className:o,style:i,classNames:l,styles:u,unstyled:d,vars:m,varsResolver:v,rootSelector:"group"});return(0,r.jsx)(c.x,{...w("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}}}),w=(0,l.b)((e,t)=>{let n=(0,a.w)("ActionIcon",y,e),{className:o,unstyled:i,variant:l,classNames:m,styles:f,style:g,loading:v,loaderProps:b,size:w,color:k,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:m,styles:f,unstyled:i,vars:I,varsResolver:x});return(0,r.jsxs)(p.k,{..._("root",{active:!T&&!v&&!E}),...N,unstyled:i,variant:l,size:w,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})]})});w.classes=h,w.displayName="@mantine/core/ActionIcon",w.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),m=n(82027),f={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,m.d5)((e,t)=>{let n=(0,u.w)("Blockquote",h,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,children:m,icon:v,iconSize:b,cite:y,...x}=n,w=(0,d.y)({name:"Blockquote",classes:f,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,...w("root"),...x,children:[v&&(0,r.jsx)("span",{...w("icon"),children:v}),m,y&&(0,r.jsx)("cite",{...w("cite"),children:y})]})});v.classes=f,v.displayName="@mantine/core/Blockquote"},23205:function(e,t,n){"use strict";n.d(t,{O:function(){return g}});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),p=n(63409),m={root:"m_fea6bf1a",burger:"m_d4fb9cad"};let f={},h=(0,a.Z)((e,{color:t,size:n,lineSize:r,transitionDuration:a,transitionTimingFunction:c})=>({root:{"--burger-color":t?(0,s.p)(t,e):void 0,"--burger-size":(0,i.ap)(n,"burger-size"),"--burger-line-size":r?(0,o.h)(r):void 0,"--burger-transition-duration":void 0===a?void 0:`${a}ms`,"--burger-transition-timing-function":c}})),g=(0,d.d5)((e,t)=>{let n=(0,c.w)("Burger",f,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:g,opened:v,children:b,transitionDuration:y,transitionTimingFunction:x,lineSize:w,...k}=n,j=(0,l.y)({name:"Burger",classes:m,props:n,className:i,style:a,classNames:o,styles:s,unstyled:d,vars:g,varsResolver:h});return(0,r.jsxs)(p.k,{...j("root"),ref:t,...k,children:[(0,r.jsx)(u.x,{mod:["reduce-motion",{opened:v}],...j("burger")}),b]})});g.classes=m,g.displayName="@mantine/core/Burger"},17115:function(e,t,n){"use strict";n.d(t,{z:function(){return k}});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),m=n(63409),f=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,f.d5)((e,t)=>{let n=(0,s.w)("ButtonGroup",g,e),{className:o,style:i,classNames:a,styles:u,unstyled:d,orientation:p,vars:m,borderWidth:f,variant:b,mod:y,...x}=(0,s.w)("ButtonGroup",g,e),w=(0,c.y)({name:"ButtonGroup",props:n,classes:h,className:o,style:i,classNames:a,styles:u,unstyled:d,vars:m,varsResolver:v,rootSelector:"group"});return(0,r.jsx)(l.x,{...w("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={},w=(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}}}),k=(0,u.b)((e,t)=>{let n=(0,s.w)("Button",x,e),{style:o,vars:i,className:a,color:u,disabled:f,children:g,leftSection:v,rightSection:b,fullWidth:k,variant:j,radius:C,loading:S,loaderProps:I,gradient:M,classNames:T,styles:E,unstyled:P,"data-disabled":R,autoContrast:N,mod:_,...B}=n,A=(0,c.y)({name:"Button",props:n,classes:h,className:a,style:o,classNames:T,styles:E,unstyled:P,vars:i,varsResolver:w}),F=!!v,L=!!b;return(0,r.jsxs)(m.k,{ref:t,...A("root",{active:!f&&!S&&!R}),unstyled:P,variant:j,disabled:f||S,mod:[{disabled:f||R,loading:S,block:k,"with-left-section":F,"with-right-section":L},_],...B,children:[(0,r.jsx)(p.u,{mounted:!!S,transition:y,duration:150,children:e=>(0,r.jsx)(l.x,{component:"span",...A("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",{...A("inner"),children:[v&&(0,r.jsx)(l.x,{component:"span",...A("section"),mod:{position:"left"},children:v}),(0,r.jsx)(l.x,{component:"span",mod:{loading:S},...A("label"),children:g}),b&&(0,r.jsx)(l.x,{component:"span",...A("section"),mod:{position:"right"},children:b})]})]})});k.classes=h,k.displayName="@mantine/core/Button",k.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),m=n(46690),f=n(97072),h=n(28559),g=n(82027),v=n(50569),b=n(63409);let y=(0,i.createContext)(null),x=y.Provider,w=()=>(0,i.useContext)(y),[k,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.d5)((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:f,value:h,onClick:g,...v}=n,y=(0,m.y)({name:"CheckboxCard",classes:C,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:I,rootSelector:"card"}),x=w(),j="boolean"==typeof u?u:x?.value.includes(h||"")||!1;return(0,r.jsx)(k,{value:{checked:j},children:(0,r.jsx)(b.k,{ref:t,mod:[{"with-border":f,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.d5)((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,m]=(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||m(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),B={indicator:"m_5e5256ee",icon:"m_1b1c543a","indicator--outline":"m_76e20374"};let A={icon:_.P},F=(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}),m=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?m:(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.d5)((e,t)=>{let n=(0,p.w)("CheckboxIndicator",A,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:l,icon:u,indeterminate:d,radius:f,color:g,iconColor:v,autoContrast:b,checked:y,mod:x,variant:w,disabled:k,...C}=n,S=(0,m.y)({name:"CheckboxIndicator",classes:B,props:n,className:i,style:a,classNames:o,styles:s,unstyled:c,vars:l,varsResolver:F,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:w}),variant:w,mod:[{checked:M,disabled:k},x],...C,children:(0,r.jsx)(u,{indeterminate:d,...S("icon")})})});L.displayName="@mantine/core/CheckboxIndicator",L.classes=B;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}),m=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?m:(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.d5)((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:k,checked:j,labelPosition:C,description:S,error:I,disabled:M,variant:T,indeterminate:E,icon:P,rootRef:R,iconColor:N,onChange:_,autoContrast:B,mod:A,...F}=n,L=w(),H=y||L?.size,O=(0,m.y)({name:"Checkbox",props:n,classes:D,className:a,style:s,classNames:i,styles:c,unstyled:l,vars:u,varsResolver:z}),{styleProps:Z,rest:V}=(0,f.c)(F),G=(0,o.M)(b),W=L?{checked:L.value.includes(V.value),onChange:e=>{L.onChange(e),_?.(e)}}:{};return(0,r.jsx)(v.Z,{...O("root"),__staticSelector:"Checkbox",__stylesApiProps:n,id:G,size:H,labelPosition:C,label:g,description:S,error:I,disabled:M,classNames:i,styles:c,unstyled:l,"data-checked":W.checked||j||void 0,variant:T,ref:R,mod:A,...Z,...k,children:(0,r.jsxs)(h.x,{...O("inner"),mod:{"data-label-position":C},children:[(0,r.jsx)(h.x,{component:"input",id:G,ref:t,checked:j,disabled:M,mod:{error:!!I,indeterminate:E},...O("input",{focusable:!0,variant:T}),onChange:_,...V,...W,type:"checkbox"}),(0,r.jsx)(P,{indeterminate:E,...O("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 m={root:"m_86a44da5","root--subtle":"m_220c80f2"};let f={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",f,e),{iconSize:o,children:i,vars:a,radius:s,className:u,classNames:g,style:v,styles:b,unstyled:y,"data-disabled":x,disabled:w,variant:k,icon:j,mod:C,...S}=n,I=(0,l.y)({name:"CloseButton",props:n,className:u,style:v,classes:m,classNames:g,styles:b,unstyled:y,vars:a,varsResolver:h});return(0,r.jsxs)(d.k,{ref:t,...S,unstyled:y,variant:k,disabled:w,mod:[{disabled:w||x},C],...I("root",{variant:k,active:!w&&!x}),children:[j||(0,r.jsx)(p,{}),i]})});g.classes=m,g.displayName="@mantine/core/CloseButton"},45909:function(e,t,n){"use strict";n.d(t,{E:function(){return m}});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}})),m=(0,l.d5)((e,t)=>{let n=(0,a.w)("Code",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:h,color:g,block:v,variant:b,mod:y,...x}=n,w=(0,s.y)({name:"Code",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{component:v?"pre":"code",variant:b,ref:t,mod:[{block:v},y],...w("root"),...x,dir:"ltr"})});m.classes=u,m.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),m=n(27009),f=n(14726),h=n(40993),g=n(59835),v=n(88957),b=n(93262),y=n(51438),x=n(55170);function w({className:e,onChange:t,onChangeEnd:n,value:i,saturationLabel:a,focusable:s=!0,size:c,color:l,onScrubStart:u,onScrubEnd:p,...m}){let{getStyles:f}=(0,h.j)(),[v,b]=(0,o.useState)({x:i.s/100,y:1-i.v/100}),w=(0,o.useRef)(v),{ref:k}=(0,y.r)(({x:e,y:n})=>{w.current={x:e,y:n},t({s:Math.round(100*e),v:Math.round((1-n)*100)})},{onScrubEnd:()=>{let{x:e,y:t}=w.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,{...f("saturation"),ref:k,...m,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",{...f("saturationOverlay",{style:{backgroundColor:`hsl(${i.h}, 100%, 50%)`}})}),(0,r.jsx)("div",{...f("saturationOverlay",{style:{backgroundImage:"linear-gradient(90deg, #fff, transparent)"}})}),(0,r.jsx)("div",{...f("saturationOverlay",{style:{backgroundImage:"linear-gradient(0deg, #000, transparent)"}})}),(0,r.jsx)(x.b,{position:v,...f("thumb",{style:{backgroundColor:l}})})]})}w.displayName="@mantine/core/Saturation";let k=(0,o.forwardRef)(({className:e,datatype:t,setValue:n,onChangeEnd:i,size:a,focusable:s,data:c,swatchesPerRow:l,...u},p)=>{let f=(0,h.j)(),g=c.map((e,t)=>(0,o.createElement)(m.b,{...f.getStyles("swatch"),unstyled:f.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,{...f.getStyles("swatches"),ref:p,...u,children:g})});k.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.d5)((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:B,hueLabel:A,alphaLabel:F,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)(w,{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:B,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":A,onScrubStart:en,onScrubEnd:er}),U&&(0,r.jsx)(f.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":F,onScrubStart:en,onScrubEnd:er})]}),U&&(0,r.jsx)(m.b,{color:X,radius:"sm",size:"var(--cp-preview-size)",...G("preview")})]})]}),Array.isArray(D)&&(0,r.jsx)(k,{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),m=n(82027),f=n(40993),h=n(55170),g=n(37873);let v={},b=(0,m.d5)((e,t)=>{let n=(0,u.w)("ColorSlider",v,e),{classNames:m,className:b,style:y,styles:x,unstyled:w,vars:k,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:B="ColorPicker",...A}=n,F=(0,d.y)({name:B,classes:g.Z,props:n,className:b,style:y,classNames:m,styles:x,unstyled:w}),L=f.j()?.getStyles||F,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,{...A,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 m},lu:function(){return f}});let o={grad:.9,turn:360,rad:360/(2*Math.PI)},i=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;function a(e){let t=i.exec(e);return t?function({h:e,s:t,l:n,a:r}){let o=(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 m(e){for(let[,t]of Object.entries(d))if(t.test(e))return!0;return!1}function f(e){if("string"!=typeof e)return{h:0,s:0,v:0,a:1};if("transparent"===e)return{h:0,s:0,v:0,a:0};let t=e.trim();for(let[e,n]of Object.entries(d))if(n.test(t))return p[e](t);return{h:0,s:0,v:0,a:1}}},27009:function(e,t,n){"use strict";n.d(t,{b:function(){return f}});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},m=(0,a.Z)((e,{radius:t,size:n})=>({root:{"--cs-radius":void 0===t?void 0:(0,i.H5)(t),"--cs-size":(0,o.h)(n)}})),f=(0,u.b)((e,t)=>{let n=(0,s.w)("ColorSwatch",p,e),{classNames:o,className:i,style:a,styles:u,unstyled:f,vars:h,color:g,size:v,radius:b,withShadow:y,children:x,variant:w,...k}=(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:f,vars:h,varsResolver:m});return(0,r.jsxs)(l.x,{ref:t,variant:w,size:v,...j("root",{focusable:!0}),...k,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})]})});f.classes=d,f.displayName="@mantine/core/ColorSwatch"},61271:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var r={dropdown:"m_88b62a41",search:"m_985517d8",options:"m_b2821a6e",option:"m_92253aa5",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 m}});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")}})),m=(0,l.d5)((e,t)=>{let n=(0,a.w)("ComboboxChevron",d,e),{size:o,error:i,style:l,className:m,classNames:f,styles:h,unstyled:g,vars:v,mod:b,...y}=n,x=(0,s.y)({name:"ComboboxChevron",classes:u.Z,props:n,style:l,className:m,classNames:f,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"})})});m.classes=u.Z,m.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 l}});var r=n(52322),o=n(2784),i=n(89027);function a(e,t,n,r){return"center"===e||"center"===r?{top:t}:"end"===e?{bottom:n}:"start"===e?{top:n}:{}}function s(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 c={bottom:"borderTopLeftRadius",left:"borderTopRightRadius",right:"borderBottomLeftRadius",top:"borderBottomRightRadius"},l=(0,o.forwardRef)(({position:e,arrowSize:t,arrowOffset:n,arrowRadius:o,arrowPosition:l,visible:u,arrowX:d,arrowY:p,style:m,...f},h)=>{let{dir:g}=(0,i.gm)();return u?(0,r.jsx)("div",{...f,ref:h,style:{...m,...function({position:e,arrowSize:t,arrowOffset:n,arrowRadius:r,arrowPosition:o,arrowX:i,arrowY:l,dir:u}){let[d,p="center"]=e.split("-"),m={width:t,height:t,transform:"rotate(45deg)",position:"absolute",[c[d]]:r},f=-t/2;return"left"===d?{...m,...a(p,l,n,o),right:f,borderLeftColor:"transparent",borderBottomColor:"transparent"}:"right"===d?{...m,...a(p,l,n,o),left:f,borderRightColor:"transparent",borderTopColor:"transparent"}:"top"===d?{...m,...s(p,i,n,o,u),bottom:f,borderTopColor:"transparent",borderLeftColor:"transparent"}:"bottom"===d?{...m,...s(p,i,n,o,u),top:f,borderBottomColor:"transparent",borderRightColor:"transparent"}:{}}({position:e,arrowSize:t,arrowOffset:n,arrowRadius:o,arrowPosition:l,dir:g,arrowX:d,arrowY:p})}}):null});l.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&&e)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),m=n(66596),f={root:"m_96b553a6"};let h={},g=(0,a.Z)((e,{transitionDuration:t})=>({root:{"--transition-duration":"number"==typeof t?`${t}ms`:t}})),v=(0,u.d5)((e,t)=>{let n=(0,s.w)("FloatingIndicator",h,e),{classNames:a,className:u,style:v,styles:b,unstyled:y,vars:x,target:w,parent:k,transitionDuration:j,mod:C,displayAfterTransitionEnd:S,...I}=n,M=(0,c.y)({name:"FloatingIndicator",classes:f,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`)},f=()=>{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(f),h.current.observe(e),t&&(g.current=new ResizeObserver(f),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)&&(f(),l(!1))};return t.addEventListener("transitionend",e),()=>{t.removeEventListener("transitionend",e)}}},[t]),(0,d.K)(()=>{"test"!==(0,m.d)()&&s(!0)},20,{autoInvoke:!0}),(0,p.I)(e=>{e.forEach(e=>{"attributes"===e.type&&"dir"===e.attributeName&&f()})},{attributes:!0,attributeFilter:["dir"]},()=>document.documentElement),{initialized:a,hidden:c}}({target:w,parent:k,ref:T,displayAfterTransitionEnd:S}),R=(0,i.Yx)(t,T);return w&&k?(0,r.jsx)(l.x,{ref:R,mod:[{initialized:E,hidden:P},C],...M("root"),...I}):null});v.displayName="@mantine/core/FloatingIndicator",v.classes=f},10266:function(e,t,n){"use strict";n.d(t,{i:function(){return f}});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),m=n(1767);function f({children:e,active:t=!0,refProp:n="ref",innerRef:r}){let a=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),c=(0,d.Yx)(a,r);return(0,p.k)(e)?(0,o.cloneElement)(e,{[n]:c}):e}function h(e){return(0,r.jsx)(m.T,{tabIndex:-1,"data-autofocus":!0,...e})}f.displayName="@mantine/core/FocusTrap",h.displayName="@mantine/core/FocusTrapInitialFocus",f.InitialFocus=h},93010:function(e,t,n){"use strict";n.d(t,{Z:function(){return f}});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"},m=(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}})),f=(0,u.d5)((e,t)=>{let n=(0,s.w)("Group",p,e),{classNames:a,className:u,style:f,styles:h,unstyled:g,children:v,gap:b,align:y,justify:x,wrap:w,grow:k,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:f,classes:d,classNames:a,styles:h,unstyled:g,vars:C,varsResolver:m});return(0,r.jsx)(l.x,{..._("root"),ref:t,variant:S,mod:[{grow:k},M],size:I,...T,children:E})});f.classes=d,f.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,...m}=(0,o.w)("Highlight",l,e),f=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,...m,__staticSelector:"Highlight",children:f.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:m,description:f,id:h,disabled:g,error:v,size:b,labelPosition:y="left",bodyElement:x="div",labelElement:w="label",variant:k,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:k,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:[m&&(0,r.jsx)(s.x,{component:w,htmlFor:"label"===w?h:void 0,...T("label"),"data-disabled":g||void 0,children:m}),f&&(0,r.jsx)(c.I.Description,{size:b,__inheritStyles:!1,...T("description"),children:f}),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),m=n(82027),f=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,m.d5)((e,t)=>{let n=(0,c.w)("InputDescription",g,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,size:m,__staticSelector:b,__inheritStyles:y=!0,variant:x,...w}=(0,c.w)("InputDescription",g,n),k=(0,f.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&&k?.getStyles||j;return(0,r.jsx)(d.x,{component:"p",ref:t,variant:x,size:m,...C("description",k?.getStyles?{className:i,style:a}:void 0),...w})});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)})`}})),w=(0,m.d5)((e,t)=>{let n=(0,c.w)("InputError",y,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,size:m,__staticSelector:g,__inheritStyles:v=!0,variant:b,...w}=n,k=(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,f.D)(),C=v&&j?.getStyles||k;return(0,r.jsx)(d.x,{component:"p",ref:t,variant:b,size:m,...C("error",j?.getStyles?{className:i,style:a}:void 0),...w})});w.classes=h,w.displayName="@mantine/core/InputError";let k={labelElement:"label"},j=(0,s.Z)((e,{size:t})=>({label:{"--input-label-size":(0,a.yv)(t),"--input-asterisk-color":void 0}})),C=(0,m.d5)((e,t)=>{let n=(0,c.w)("InputLabel",k,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,labelElement:m,size:g,required:v,htmlFor:b,onMouseDown:y,children:x,__staticSelector:w,variant:C,mod:S,...I}=(0,c.w)("InputLabel",k,n),M=(0,l.y)({name:["InputWrapper",w],props:n,classes:h,className:i,style:a,classNames:o,styles:s,unstyled:u,rootSelector:"label",vars:p,varsResolver:j}),T=(0,f.D)(),E=T?.getStyles||M;return(0,r.jsxs)(d.x,{...E("label",T?.getStyles?{className:i,style:a}:void 0),component:m,variant:C,size:g,ref:t,htmlFor:"label"===m?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,m.d5)((e,t)=>{let n=(0,c.w)("InputPlaceholder",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:u,vars:p,__staticSelector:m,variant:f,error:g,mod:v,...b}=(0,c.w)("InputPlaceholder",S,n),y=(0,l.y)({name:["InputPlaceholder",m],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:f,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,m.d5)((e,t)=>{let n=(0,c.w)("InputWrapper",T,e),{classNames:o,className:a,style:s,styles:u,unstyled:p,vars:m,size:g,variant:v,__staticSelector:y,inputContainer:x,inputWrapperOrder:k,label:j,error:S,description:I,labelProps:P,descriptionProps:R,errorProps:N,labelElement:_,children:B,withAsterisk:A,id:F,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:m,varsResolver:E}),O={size:g,variant:v,__staticSelector:y},Z=(0,M.M)(F),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 A?A: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(B)},"input"),ee=W&&(0,i.createElement)(w,{...N,...O,size:N?.size||O.size,key:"error",id:N?.id||V},S),et=k.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)(f.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}}(k,{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:m,__staticSelector:g,__stylesApiProps:v,size:b,wrapperProps:y,error:x,disabled:w,leftSection:k,leftSectionProps:j,leftSectionWidth:C,rightSection:S,rightSectionProps:I,rightSectionWidth:M,rightSectionPointerEvents:T,leftSectionPointerEvents:E,variant:P,vars:_,pointer:B,multiline:A,radius:F,id:L,withAria:D,withErrorStyles:$,mod:z,inputSize:H,...O}=n,{styleProps:Z,rest:V}=(0,u.c)(O),G=(0,f.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:m,disabled:w,"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:B,disabled:w,multiline:A,"data-with-right-section":!!S,"data-with-left-section":!!k},z],variant:P,size:b,children:[k&&(0,r.jsx)("div",{...j,"data-position":"left",...Y("section",{className:j?.className,style:j?.style}),children:k}),(0,r.jsx)(d.x,{component:"input",...V,...q,ref:t,required:m,mod:{disabled:w,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=w,_.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:m,__staticSelector:f,__stylesApiProps:h,errorProps:g,labelProps:v,descriptionProps:b,wrapperProps:y,id:x,size:w,style:k,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:f,__stylesApiProps:h||i,errorProps:g,labelProps:v,descriptionProps:b,unstyled:m,styles:d,size:w,style:k,inputContainer:j,inputWrapperOrder:C,withAsterisk:S,variant:I,id:x,mod:T,...y};return{...R,classNames:u,styles:d,unstyled:m,wrapperProps:{...N,...P},inputProps:{required:l,classNames:u,styles:d,unstyled:m,size:w,__staticSelector:f,__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 m}});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")}})),m=(0,l.d5)((e,t)=>{let n=(0,a.w)("Kbd",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:h,...g}=n,v=(0,s.y)({name:"Kbd",classes:u,props:n,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{component:"kbd",ref:t,...v("root"),...g})});m.classes=u,m.displayName="@mantine/core/Kbd"},12491:function(e,t,n){"use strict";n.d(t,{a:function(){return x}});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),m={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 f=(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsxs)(u.x,{component:"span",className:(0,p.Z)(m.barsLoader,e),...t,ref:n,children:[(0,r.jsx)("span",{className:m.bar}),(0,r.jsx)("span",{className:m.bar}),(0,r.jsx)("span",{className:m.bar})]}));f.displayName="@mantine/core/Bars";let h=(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsxs)(u.x,{component:"span",className:(0,p.Z)(m.dotsLoader,e),...t,ref:n,children:[(0,r.jsx)("span",{className:m.dot}),(0,r.jsx)("span",{className:m.dot}),(0,r.jsx)("span",{className:m.dot})]}));h.displayName="@mantine/core/Dots";let g=(0,o.forwardRef)(({className:e,...t},n)=>(0,r.jsx)(u.x,{component:"span",className:(0,p.Z)(m.ovalLoader,e),...t,ref:n}));g.displayName="@mantine/core/Oval";let v={bars:f,oval:g,dots:h},b={loaders:v,type:"oval"},y=(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}})),x=(0,d.d5)((e,t)=>{let n=(0,c.w)("Loader",b,e),{size:o,color:i,type:a,vars:s,className:d,style:p,classNames:f,styles:h,unstyled:g,loaders:v,variant:x,children:w,...k}=n,j=(0,l.y)({name:"Loader",props:n,classes:m,className:d,style:p,classNames:f,styles:h,unstyled:g,vars:s,varsResolver:y});return w?(0,r.jsx)(u.x,{...j("root"),ref:t,...k,children:w}):(0,r.jsx)(u.x,{...j("root"),ref:t,component:v[a],variant:x,size:o,...k})});x.defaultLoaders=v,x.classes=m,x.displayName="@mantine/core/Loader"},20368:function(e,t,n){"use strict";n.d(t,{v:function(){return f}});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"},m=(0,o.Z)((e,{color:t})=>({root:{"--mark-bg-dark":u({color:t,theme:e,defaultShade:5}),"--mark-bg-light":u({color:t,theme:e,defaultShade:2})}})),f=(0,c.d5)((e,t)=>{let n=(0,i.w)("Mark",p,e),{classNames:o,className:c,style:l,styles:u,unstyled:f,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:f,vars:h,varsResolver:m});return(0,r.jsx)(s.x,{component:"mark",ref:t,variant:v,...y("root"),...b})});f.classes=d,f.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[m,f]=(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.d5)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:s,...c}=(0,u.w)("MenuDivider",b,e),l=f();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),w=n(98498);let k={},j=(0,g.d5)((e,t)=>{let{classNames:n,className:i,style:a,styles:s,vars:c,onMouseEnter:l,onMouseLeave:d,onKeyDown:m,children:h,...g}=(0,u.w)("MenuDropdown",k,e),v=(0,o.useRef)(null),b=f(),y=(0,w.x)(m,e=>{("ArrowUp"===e.key||"ArrowDown"===e.key)&&(e.preventDefault(),v.current?.querySelectorAll("[data-menu-item]:not(:disabled)")[0]?.focus())}),j=(0,w.x)(l,()=>("hover"===b.trigger||"click-hover"===b.trigger)&&b.openDropdown()),C=(0,w.x)(d,()=>("hover"===b.trigger||"click-hover"===b.trigger)&&b.closeDropdown());return(0,r.jsxs)(p.J.Dropdown,{...g,onMouseEnter:j,onMouseLeave:C,role:"menu","aria-orientation":"vertical",ref:(0,x.Yx)(t,v),...b.getStyles("dropdown",{className:i,style:a,styles:s,classNames:n,withStaticClass:!1}),tabIndex:-1,"data-menu-dropdown":!0,onKeyDown:y,children:[(0,r.jsx)("div",{tabIndex:-1,"data-autofocus":!0,"data-mantine-stop-propagation":!0,style:{outline:0}}),h]})});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:m,children:h,disabled:g,...v}=(0,u.w)("MenuItem",P,e),b=f(),y=(0,I.rZ)(),{dir:k}=(0,T.gm)(),j=(0,o.useRef)(),M=b.getItemIndex(j.current),R=(0,w.x)(v.onMouseLeave,()=>b.setHovered(-1)),N=(0,w.x)(v.onMouseEnter,()=>b.setHovered(b.getItemIndex(j.current))),_=(0,w.x)(v.onClick,()=>{"boolean"==typeof d?d&&b.closeDropdownImmediately():b.closeOnItemClick&&b.closeDropdownImmediately()}),B=(0,w.x)(v.onFocus,()=>b.setHovered(b.getItemIndex(j.current))),A=l?y.variantColorResolver({color:l,theme:y,variant:"light"}):void 0,F=l?(0,S.E)({color:l,theme:y}):null;return(0,r.jsxs)(E.k,{...v,unstyled:b.unstyled,tabIndex:b.menuItemTabIndex,onFocus:B,...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,"data-mantine-stop-propagation":!0,onMouseEnter:N,onMouseLeave:R,onClick:_,onKeyDown:(0,C.R)({siblingSelector:"[data-menu-item]",parentSelector:"[data-menu-dropdown]",activateOnFocus:!1,loop:b.loop,dir:k,orientation:"vertical",onKeyDown:v.onKeyDown}),__vars:{"--menu-item-color":F?.isThemeColor&&F?.shade===void 0?`var(--mantine-color-${F.color}-6)`:A?.color,"--menu-item-hover":A?.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}),m&&(0,r.jsx)("div",{...b.getStyles("itemSection",{styles:s,classNames:n}),"data-position":"right",children:m})]})});R.classes=v,R.displayName="@mantine/core/MenuItem";let N={},_=(0,g.d5)((e,t)=>{let{classNames:n,className:o,style:i,styles:a,vars:s,...c}=(0,u.w)("MenuLabel",N,e),l=f();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 B=n(98399);let A={refProp:"ref"},F=(0,o.forwardRef)((e,t)=>{let{children:n,refProp:i,...a}=(0,u.w)("MenuTarget",A,e);if(!(0,B.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=f(),c=(0,w.x)(n.props.onClick,()=>{"click"===s.trigger?s.toggleDropdown():"click-hover"!==s.trigger||(s.setOpenedViaClick(!0),s.opened||s.openDropdown())}),l=(0,w.x)(n.props.onMouseEnter,()=>("hover"===s.trigger||"click-hover"===s.trigger)&&s.openDropdown()),d=(0,w.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})})});F.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:f,onClose:h,opened:g,defaultOpened:b,trapFocus:y,onChange:x,closeOnItemClick:w,loop:k,closeOnEscape:j,trigger:C,openDelay:S,closeDelay:I,classNames:M,styles:T,unstyled:E,variant:P,vars:R,menuItemTabIndex:N,keepMounted:_,...B}=t,A=(0,l.y)({name:"Menu",classes:v,props:t,classNames:M,styles:T,unstyled:E}),[F,{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||f?.()},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)(m,{value:{getStyles:A,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:F,setHovered:D,openedViaClick:O,setOpenedViaClick:Z,closeOnItemClick:w,closeDropdown:"click"===C?V:q,openDropdown:"click"===C?G:Y,closeDropdownImmediately:V,loop:k,trigger:C,unstyled:E,menuItemTabIndex:N},children:(0,r.jsx)(p.J,{...B,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=F,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.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:c,vars:u,...p}=(0,i.w)("ModalBody",d,e),m=l();return(0,r.jsx)(s.y,{ref:t,...m.getStyles("body",{classNames:n,style:a,styles:c,className:o}),...p})});p.classes=u,p.displayName="@mantine/core/ModalBody";var m=n(91403);let f={},h=(0,a.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalCloseButton",f,e),d=l();return(0,r.jsx)(m._,{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.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,children:u,...d}=(0,i.w)("ModalContent",y,e),p=l(),m=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)(m,{style:{maxHeight:p.fullScreen?"100dvh":`calc(100dvh - (${(0,g.h)(p.yOffset)} * 2))`},children:u})})});x.classes=u,x.displayName="@mantine/core/ModalContent";var w=n(79208);let k={},j=(0,a.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalHeader",k,e),d=l();return(0,r.jsx)(w.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.d5)((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:"fade-down"},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.d5)((e,t)=>{let n=(0,i.w)("ModalRoot",R,e),{classNames:o,className:a,style:s,styles:l,unstyled:d,vars:p,yOffset:m,scrollAreaComponent:f,radius:h,fullScreen:g,centered:v,xOffset:b,__staticSelector:y,...x}=n,w=(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:m,scrollAreaComponent:f,getStyles:w,fullScreen:g},children:(0,r.jsx)(P.e,{ref:t,...w("root"),"data-full-screen":g||void 0,"data-centered":v||void 0,unstyled:d,...x})})});_.classes=u,_.displayName="@mantine/core/ModalRoot";var B=n(92682);let A={},F=(0,a.d5)((e,t)=>{let{classNames:n,className:o,style:a,styles:s,vars:c,...u}=(0,i.w)("ModalTitle",A,e),d=l();return(0,r.jsx)(B.q,{ref:t,...d.getStyles("title",{classNames:n,style:a,styles:s,className:o}),...u})});F.classes=u,F.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.d5)((e,t)=>{let{title:n,withOverlay:o,overlayProps:a,withCloseButton:s,closeButtonProps:c,children:l,radius:u,...d}=(0,i.w)("Modal",L,e),m=!!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:[m&&(0,r.jsxs)(j,{children:[n&&(0,r.jsx)(F,{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=F,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),m=n(26565),f=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:w,portalProps:k,lockScroll:j,children:C,zIndex:S,shadow:I,padding:M,__vars:T,unstyled:E,removeScrollProps:P,...R},N)=>{let{_id:_,titleMounted:B,bodyMounted:A,shouldLockScroll:F,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,f.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,m.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}),{key:$,...z}=P||{};return(0,r.jsx)(l.q,{...k,withinPortal:w,children:(0,r.jsx)(u.i,{value:{opened:t,onClose:n,closeOnClickOutside:x,transitionProps:{...g,keepMounted:e},getTitleId:()=>`${_}-title`,getBodyId:()=>`${_}-body`,titleMounted:B,bodyMounted:A,setTitleMounted:L,setBodyMounted:D,trapFocus:v,closeOnEscape:b,zIndex:S,unstyled:E},children:(0,r.jsx)(i.Z,{enabled:F&&j,...z,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})},$)})})});h.displayName="@mantine/core/ModalBase"},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},m)=>{let f=(0,l.q)();return(0,r.jsx)(c.u,{mounted:f.opened,transition:"pop",...f.transitionProps,...e,children:e=>(0,r.jsx)("div",{...n,className:(0,i.Z)({[u.Z.inner]:!f.unstyled},n.className),children:(0,r.jsx)(a.i,{active:f.opened&&f.trapFocus,innerRef:m,children:(0,r.jsx)(s.X,{...p,component:"section",role:"dialog",tabIndex:-1,"aria-modal":!0,"aria-describedby":f.bodyMounted?f.getBodyId():void 0,"aria-labelledby":f.titleMounted?f.getTitleId():void 0,style:[d,e],className:(0,i.Z)({[u.Z.content]:!f.unstyled},t),unstyled:f.unstyled,children:p.children})})})})});d.displayName="@mantine/core/ModalBaseContent"},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.d5)((e,t)=>{let{data:n,children:i,size:d,error:p,rightSection:m,unstyled:f,...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:f,rightSection:m||(0,r.jsx)(s.d,{size:d,error:p,unstyled:f}),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),m={root:"m_a513464",icon:"m_a4ceffb",loader:"m_b0920b15",body:"m_a49ed24",title:"m_3feedf16",description:"m_3d733a3a",closeButton:"m_919a4d88"};let f={withCloseButton:!0},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.d5)((e,t)=>{let n=(0,s.w)("Notification",f,e),{className:o,color:i,radius:a,loading:u,withCloseButton:g,withBorder:v,title:b,icon:y,children:x,onClose:w,closeButtonProps:k,classNames:j,style:C,styles:S,unstyled:I,variant:M,vars:T,mod:E,...P}=n,R=(0,c.y)({name:"Notification",classes:m,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",...k,unstyled:I,onClick:w,...R("closeButton")})]})});g.classes=m,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),m={root:"m_9814e45f"};let f={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",f,e),{classNames:o,className:i,style:a,styles:s,unstyled:c,vars:p,fixed:g,center:v,children:b,radius:y,zIndex:x,gradient:w,blur:k,color:j,backgroundOpacity:C,mod:S,...I}=n,M=(0,u.y)({name:"Overlay",props:n,classes:m,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=m,g.displayName="@mantine/core/Overlay"},1198:function(e,t,n){"use strict";n.d(t,{X:function(){return m}});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)}})),m=(0,l.b)((e,t)=>{let n=(0,a.w)("Paper",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,withBorder:h,vars:g,radius:v,shadow:b,variant:y,mod:x,...w}=n,k=(0,s.y)({name:"Paper",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:g,varsResolver:p});return(0,r.jsx)(c.x,{ref:t,mod:[{"data-with-border":h},x],...k("root"),variant:y,...w})});m.classes=u,m.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),m=n(71916);let[f,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),w=n(82027),k=n(62086),j=n(10266),C=n(71517),S=n(96321),I={dropdown:"m_38a85659",arrow:"m_a31dc6c1"};let M={},T=(0,w.d5)((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,...m}=n,f=h(),w=(0,g.u)({opened:f.opened,shouldReturnFocus:f.returnFocus}),I=f.withRoles?{"aria-labelledby":f.getTargetId(),id:f.getDropdownId(),role:"dialog",tabIndex:-1}:{},T=(0,v.Yx)(t,f.floating);return f.disabled?null:(0,r.jsx)(C.q,{...f.portalProps,withinPortal:f.withinPortal,children:(0,r.jsx)(S.u,{mounted:f.opened,...f.transitionProps,transition:f.transitionProps?.transition||"fade",duration:f.transitionProps?.duration??150,keepMounted:f.keepMounted,exitDuration:"number"==typeof f.transitionProps?.exitDuration?f.transitionProps.exitDuration:f.transitionProps?.duration,children:e=>(0,r.jsx)(j.i,{active:f.trapFocus&&f.opened,innerRef:T,children:(0,r.jsxs)(x.x,{...I,...m,variant:l,onKeyDownCapture:function(e,t={active:!0}){return"function"==typeof e&&t.active?n=>{"Escape"===n.key&&(e(n),t.onTrigger?.())}:t.onKeyDown||y}(f.onClose,{active:f.closeOnEscape,onTrigger:w,onKeyDown:c}),"data-position":f.placement,"data-fixed":"fixed"===f.floatingStrategy||void 0,...f.getStyles("dropdown",{className:o,props:n,classNames:d,styles:p,style:[{...e,zIndex:f.zIndex,top:f.y??0,left:f.x??0,width:"target"===f.width?void 0:(0,b.h)(f.width)},i]}),children:[s,(0,r.jsx)(k.Y,{ref:f.arrowRef,arrowX:f.arrowX,arrowY:f.arrowY,visible:f.withArrow,position:f.placement,arrowSize:f.arrowSize,arrowRadius:f.arrowRadius,arrowOffset:f.arrowOffset,arrowPosition:f.arrowPosition,...f.getStyles("arrow",{props:n,classNames:d,styles:p})})]})})})})});T.classes=I,T.displayName="@mantine/core/PopoverDropdown";var E=n(40489),P=n(98399);let R={refProp:"ref",popupType:"dialog"},N=(0,w.d5)((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),B=n(75580),A=n(92416),F=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:w,arrowOffset:k,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:em}=(0,p.gm)(),ef=(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,F.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,B.uY)("boolean"==typeof n.shift?{limiter:(0,B.dr)(),padding:5}:{limiter:(0,B.dr)(),padding:5,...n.shift})),n.flip&&r.push("boolean"==typeof n.flip?(0,B.RR)():(0,B.RR)(n.flip)),n.inline&&r.push("boolean"==typeof n.inline?(0,B.Qo)():(0,B.Qo)(n.inline)),r.push((0,A.x7)({element:e.arrowRef,padding:e.arrowOffset})),(n.size||"target"===e.width)&&r.push((0,B.dp)({..."boolean"==typeof n.size?{}:n.size,apply({rects:r,availableWidth:o,availableHeight:i,...a}){let s=t(),c=s.refs.floating.current?.style??{};n.size&&("object"==typeof n.size&&n.size.apply?n.size.apply({rects:r,availableWidth:o,availableHeight:i,...a}):Object.assign(c,{maxWidth:`${o}px`,maxHeight:`${i}px`})),"target"===e.width&&Object.assign(c,{width:`${r.reference.width}px`})}})),r}(e,()=>r)});return(0,$.L)({opened:t,position:e.position,positionDependencies:e.positionDependencies||[],floating:r}),(0,D.l)(()=>{e.onPositionChange?.(r.placement)},[r.placement]),(0,D.l)(()=>{t?e.onOpen?.():e.onClose?.()},[t,e.onClose,e.onOpen]),{floating:r,controlled:"boolean"==typeof e.opened,opened:t,onClose:()=>{t&&n(!1)},onToggle:()=>n(!t)}}({middlewares:y,width:b,position:(0,m._)(em,s),offset:"number"==typeof c?c+(x?w/2:0):c,arrowRef:ec,arrowOffset:k,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)(f,{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:w,arrowOffset:k,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:()=>`${ef}-target`,getDropdownId:()=>`${ef}-dropdown`,withRoles:Q,targetProps:ea,__staticSelector:J,classNames:M,styles:T,unstyled:S,variant:en,keepMounted:er,getStyles:es,floatingStrategy:ei},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,m]=(0,o.useState)(!1),f=(0,o.useRef)(null);return((0,a.Y)(()=>(m(!0),f.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,f.current),!u&&f.current&&document.body.appendChild(f.current),()=>{!u&&f.current&&document.body.removeChild(f.current)}),[u]),p&&f.current)?(0,i.createPortal)((0,r.jsx)(r.Fragment,{children:n}),f.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,m]=(0,d.R)("ScrollArea.Root component was not found in tree");var f=n(7966),h=n(64261);function g(e,t){let n=(0,f.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=m(),[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=m(),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"},w=(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),[m,f]=(0,o.useState)(null),[h,g]=(0,o.useState)(null),[v,b]=(0,o.useState)(null),[w,k]=(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:m,onViewportChange:f,content:h,onContentChange:g,scrollbarX:v,onScrollbarXChange:b,scrollbarXEnabled:M,onScrollbarXEnabledChange:T,scrollbarY:w,onScrollbarYChange:k,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`}})})});w.displayName="@mantine/core/ScrollAreaRoot";var k=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=m(),[b,x]=(0,o.useState)(null),w=(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,f.W)(d),T=(0,f.W)(l),R=(0,k.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,f.W)(a),onThumbPointerUp:(0,f.W)(s),onThumbPositionChange:T,onThumbPointerDown:(0,f.W)(c)},children:(0,r.jsx)("div",{...h,ref:w,"data-mantine-scrollbar":!0,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",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,j.current=null})})})}),_=(0,o.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:i,style:a,...s}=e,c=m(),[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)}})}})});_.displayName="@mantine/core/ScrollAreaScrollbarX";let B=(0,o.forwardRef)((e,t)=>{let{sizes:n,onSizesChange:i,style:a,...s}=e,c=m(),[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.displayName="@mantine/core/ScrollAreaScrollbarY";let A=(0,o.forwardRef)((e,t)=>{let{orientation:n="vertical",...i}=e,{dir:a}=(0,j.gm)(),s=m(),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),f={...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)(_,{...f,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)(B,{...f,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.displayName="@mantine/core/ScrollAreaScrollbarVisible";let F=(0,o.forwardRef)((e,t)=>{let n=m(),{forceMount:i,...a}=e,[s,c]=(0,o.useState)(!1),l="horizontal"===e.orientation,u=(0,k.y)(()=>{if(n.viewport){let e=n.viewport.offsetWidth{let{forceMount:n,...i}=e,a=m(),[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)(F,{"data-state":s?"visible":"hidden",...i,ref:t}):null});L.displayName="@mantine/core/ScrollAreaScrollbarHover";let D=(0,o.forwardRef)((e,t)=>{let{forceMount:n,...i}=e,a=m(),s="horizontal"===e.orientation,[c,l]=(0,o.useState)("hidden"),u=(0,k.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)(A,{"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=m(),{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)(F,{...i,ref:t,forceMount:n}):"always"===a.type?(0,r.jsx)(A,{...i,ref:t}):null});$.displayName="@mantine/core/ScrollAreaScrollbar";let z=(0,o.forwardRef)((e,t)=>{let{style:n,...i}=e,a=m(),s=R(),{onThumbPositionChange:c}=s,l=(0,y.Yx)(t,e=>s.onThumbChange(e)),u=(0,o.useRef)(),d=(0,k.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)})});z.displayName="@mantine/core/ScrollAreaThumb";let 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});H.displayName="@mantine/core/ScrollAreaThumb";let O=(0,o.forwardRef)(({children:e,style:t,...n},o)=>{let i=m(),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.d5)((e,t)=>{let n=(0,s.w)("ScrollArea",V,e),{classNames:i,className:a,style:l,styles:u,unstyled:d,scrollbarSize:p,vars:m,type:f,scrollHideDelay:h,viewportProps:g,viewportRef:v,onScrollPositionChange:y,children:x,offsetScrollbars:k,scrollbars:j,onBottomReached:C,onTopReached:S,...I}=n,[M,T]=(0,o.useState)(!1),E=(0,c.y)({name:"ScrollArea",props:n,classes:Z,className:a,style:l,classNames:i,styles:u,unstyled:d,vars:m,varsResolver:G});return(0,r.jsxs)(w,{type:"never"===f?"always":f,scrollHideDelay:h,ref:t,scrollbars:j,...E("root"),...I,children:[(0,r.jsx)(O,{...g,...E("viewport",{style:g?.style}),ref:v,"data-offset-scrollbars":!0===k?"xy":k||void 0,"data-scrollbars":j||void 0,onScroll:e=>{g?.onScroll?.(e),y?.({x:e.currentTarget.scrollLeft,y:e.currentTarget.scrollTop});let{scrollTop:t,scrollHeight:n,clientHeight:r}=e.currentTarget;t-(n-r)>=0&&C?.(),0===t&&S?.()},children:x}),("xy"===j||"x"===j)&&(0,r.jsx)($,{...E("scrollbar"),orientation:"horizontal","data-hidden":"never"===f||void 0,forceMount:!0,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),children:(0,r.jsx)(H,{...E("thumb")})}),("xy"===j||"y"===j)&&(0,r.jsx)($,{...E("scrollbar"),orientation:"vertical","data-hidden":"never"===f||void 0,forceMount:!0,onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!1),children:(0,r.jsx)(H,{...E("thumb")})}),(0,r.jsx)(b,{...E("corner"),"data-hovered":M||void 0,"data-hidden":"never"===f||void 0})]})});W.displayName="@mantine/core/ScrollArea";let Y=(0,u.d5)((e,t)=>{let{children:n,classNames:o,styles:i,scrollbarSize:a,scrollHideDelay:c,type:u,dir:d,offsetScrollbars:p,viewportRef:m,onScrollPositionChange:f,unstyled:h,variant:g,viewportProps:v,scrollbars:b,style:y,vars:x,onBottomReached:w,onTopReached:k,...j}=(0,s.w)("ScrollAreaAutosize",V,e);return(0,r.jsx)(l.x,{...j,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:m,onScrollPositionChange:f,unstyled:h,variant:g,viewportProps:v,vars:x,scrollbars:b,onBottomReached:w,onTopReached:k,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 w}});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),m=n(38483),f=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)}})),w=(0,g.d5)((e,t)=>{let n=(0,m.w)("SegmentedControl",y,e),{classNames:c,className:l,style:u,styles:g,unstyled:w,vars:k,data:j,value:C,defaultValue:S,onChange:I,size:M,name:T,disabled:E,readOnly:P,fullWidth:R,orientation:N,radius:_,color:B,transitionDuration:A,transitionTimingFunction:F,variant:L,autoContrast:D,withItemsBorders:$,mod:z,...H}=n,O=(0,f.y)({name:"SegmentedControl",props:n,classes:b,className:l,style:u,classNames:c,styles:g,unstyled:w,vars:k,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!==B?(0,d.R)({color:B,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","data-disabled":E,children:["string"==typeof X&&(0,r.jsx)(v.G,{target:q[X],parent:W,component:"span",transitionDuration:"var(--sc-transition-duration)",...O("indicator")}),ee]})});w.classes=b,w.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),m=n(38483),f=n(46690),h=n(82027),g=n(89027),v=n(56867),b=n(10497),y=n(39172),x=n(77970),w=n(37748),k=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.d5)((e,t)=>{let n=(0,m.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:B,marks:A,label:F,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,f.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 F?F(es):F,el=N??(0,C.p)(R),eu=(0,o.useCallback)(({x:e})=>{if(!O){let t=(0,w.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,k.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,k.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,k.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,k.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:A,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:B,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:m,labelAlwaysOn:f,thumbLabel:h,onFocus:g,onBlur:v,showLabelOnHover:b,isHovered:y,children:x=null,disabled:w},k)=>{let{getStyles:j}=(0,s.I)(),[C,S]=(0,o.useState)(!1),I=f||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:k,__vars:{"--slider-thumb-offset":`${c}%`},...j("thumb",{focusable:!0}),mod:{dragging:u,disabled:w},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,...m,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 m=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:m})}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)(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 m}});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}})),m=(0,l.d5)((e,t)=>{let n=(0,a.w)("Stack",d,e),{classNames:o,className:i,style:l,styles:m,unstyled:f,vars:h,align:g,justify:v,gap:b,variant:y,...x}=n,w=(0,s.y)({name:"Stack",props:n,classes:u,className:i,style:l,classNames:o,styles:m,unstyled:f,vars:h,varsResolver:p});return(0,r.jsx)(c.x,{ref:t,...w("root"),variant:y,...x})});m.classes=u,m.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),m=n(28559),f=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 w={},k=(0,f.d5)((e,t)=>{let{value:n,defaultValue:o,onChange:a,size:s,wrapperProps:c,children:l,readOnly:d,...p}=(0,u.w)("SwitchGroup",w,e),[m,f]=(0,i.C)({value:n,defaultValue:o,finalValue:[],onChange:a});return(0,r.jsx)(v,{value:{value:m,onChange:e=>{let t=e.currentTarget.value;d||f(m.includes(t)?m.filter(e=>e!==t):[...m,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})})})});k.classes=y.I.Wrapper.classes,k.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,f.d5)((e,t)=>{let n=(0,u.w)("Switch",C,e),{classNames:a,className:s,style:c,styles:l,unstyled:f,vars:g,color:v,label:y,offLabel:x,onLabel:w,id:k,size:I,radius:M,wrapperProps:T,thumbIcon:E,checked:P,defaultChecked:R,onChange:N,labelPosition:_,description:B,error:A,disabled:F,variant:L,rootRef:D,mod:$,...z}=n,H=b(),O=I||H?.size,Z=(0,d.y)({name:"Switch",props:n,classes:j,className:s,style:c,classNames:a,styles:l,unstyled:f,vars:g,varsResolver:S}),{styleProps:V,rest:G}=(0,p.c)(z),W=(0,o.M)(k),Y=H?{checked:H.value.includes(G.value),onChange:H.onChange}:{},[q,K]=(0,i.C)({value:Y.checked??P,defaultValue:R,finalValue:!1});return(0,r.jsxs)(h.Z,{...Z("root"),__staticSelector:"Switch",__stylesApiProps:n,id:W,size:O,labelPosition:_,label:y,description:B,error:A,disabled:F,bodyElement:"label",labelElement:"span",classNames:a,styles:l,unstyled:f,"data-checked":Y.checked||void 0,variant:L,ref:D,mod:$,...V,...T,children:[(0,r.jsx)("input",{...G,disabled:F,checked:q,onChange:e=>{H?Y.onChange?.(e):N?.(e),K(e.currentTarget.checked)},id:W,ref:t,type:"checkbox",role:"switch",...Z("input")}),(0,r.jsxs)(m.x,{"aria-hidden":"true",mod:{error:A,"label-position":_,"without-labels":!w&&!x},...Z("track"),children:[(0,r.jsx)(m.x,{component:"span",mod:"reduce-motion",...Z("thumb"),children:E}),(0,r.jsx)("span",{...Z("trackLabel"),children:q?w:x})]})]})});I.classes={...j,...h.J},I.displayName="@mantine/core/Switch",I.Group=k},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,m]=(0,n(89106).R)("Table component was not found in the tree");var f={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.d5)((o,i)=>{let a=(0,c.w)(n,{},o),{classNames:s,className:l,style:d,styles:p,...f}=a,h=m();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}),...f})});return o.displayName=`@mantine/core/${n}`,o.classes=f,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"),w=h("tfoot"),k=h("caption",{captionSide:!0});function j({data:e}){return(0,r.jsxs)(r.Fragment,{children:[e.caption&&(0,r.jsx)(k,{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)(w,{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.d5)((e,t)=>{let n=(0,c.w)("TableScrollContainer",S,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:p,children:m,minWidth:h,type:g,...v}=n,b=(0,l.y)({name:"TableScrollContainer",classes:f,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:m})})});M.classes=f,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:m,stickyHeader:f})=>({table:{"--table-layout":t,"--table-caption-side":n,"--table-horizontal-spacing":(0,i.bG)(r),"--table-vertical-spacing":(0,i.bG)(a),"--table-border-color":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":f?(0,o.h)(m):void 0}})),P=(0,d.d5)((e,t)=>{let n=(0,c.w)("Table",T,e),{classNames:o,className:i,style:a,styles:s,unstyled:d,vars:m,horizontalSpacing:h,verticalSpacing:g,captionSide:v,stripedColor:b,highlightOnHoverColor:y,striped:x,highlightOnHover:w,withColumnBorders:k,withRowBorders:C,withTableBorder:S,borderColor:I,layout:M,variant:P,data:R,children:N,stickyHeader:_,stickyHeaderOffset:B,mod:A,...F}=n,L=(0,l.y)({name:"Table",props:n,className:i,style:a,classes:f,classNames:o,styles:s,unstyled:d,rootSelector:"table",vars:m,varsResolver:E});return(0,r.jsx)(p,{value:{getStyles:L,stickyHeader:_,striped:!0===x?"odd":x||void 0,highlightOnHover:w,withColumnBorders:k,withRowBorders:C,captionSide:v||"bottom"},children:(0,r.jsx)(u.x,{component:"table",variant:P,ref:t,mod:[{"data-with-table-border":S},A],...L("table"),...F,children:N||!!R&&(0,r.jsx)(j,{data:R})})})});P.classes=f,P.displayName="@mantine/core/Table",P.Td=v,P.Th=g,P.Tr=b,P.Thead=y,P.Tbody=x,P.Tfoot=w,P.Caption=k,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 m={inherit:!1},f=(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",m,e),{lineClamp:o,truncate:i,inline:a,inherit:s,gradient:d,span:h,__staticSelector:g,vars:v,className:b,style:y,classNames:x,styles:w,unstyled:k,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:w,unstyled:k,vars:v,varsResolver:f});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.d5)((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 h}});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"],d=["xs","sm","md","lg","xl"];var p={root:"m_8a5d1357"};let m={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)`}:d.includes(n)?{fontSize:`var(--mantine-font-size-${n})`,fontWeight:`var(--mantine-h${e}-font-weight)`,lineHeight:`var(--mantine-h${e}-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}}}),h=(0,c.d5)((e,t)=>{let n=(0,i.w)("Title",m,e),{classNames:o,className:c,style:l,styles:u,unstyled:d,order:h,vars:g,size:v,variant:b,lineClamp:y,textWrap:x,mod:w,...k}=n,j=(0,a.y)({name:"Title",props:n,classes:p,className:c,style:l,classNames:o,styles:u,unstyled:d,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},w],size:v,...k}):null});h.classes=p,h.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),m=n(46690),f=n(28559),h=n(82027),g=n(89027),v=n(71916),b=n(62086),y=n(71517),x=n(96321);let w={duration:100,transition:"fade"};var k=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,defaultOpened:!1,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.d5)((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:w,offset:P,position:R,multiline:N,zIndex:_,disabled:B,defaultOpened:A,variant:F,vars:L,portalProps:D,...$}=n,z=(0,k.rZ)(),H=(0,m.y)({name:"TooltipFloating",props:n,classes:M,className:d,style:u,classNames:h,styles:g,unstyled:v,rootSelector:"tooltip",vars:L,varsResolver:E}),{handleMouseMove:O,x:Z,y:V,opened:G,boundaryRef:W,floating:Y,setOpened:q}=function({offset:e,position:t,defaultOpened:n}){let[r,i]=(0,o.useState)(n),a=(0,o.useRef)(),{x:s,y:c,elements:l,refs:u,update:d,placement:p}=(0,C.YF)({placement:t,middleware:[(0,S.uY)({crossAxis:!0,padding:5,rootBoundary:"document"})]}),m=p.includes("right")?e:t.includes("left")?-1*e:0,f=p.includes("bottom")?e:t.includes("top")?-1*e:0,h=(0,o.useCallback)(({clientX:e,clientY:t})=>{u.setPositionReference({getBoundingClientRect:()=>({width:0,height:0,x:e,y:t,left:e+m,top:t+f,right:e,bottom:t})})},[l.reference]);return(0,o.useEffect)(()=>{if(u.floating.current){let e=a.current;e.addEventListener("mousemove",h);let t=(0,I.Kx)(u.floating.current);return t.forEach(e=>{e.addEventListener("scroll",d)}),()=>{e.removeEventListener("mousemove",h),t.forEach(e=>{e.removeEventListener("scroll",d)})}}},[l.reference,u.floating.current,d,h,r]),{handleMouseMove:h,x:s,y:c,opened:r,setOpened:i,boundaryRef:a,floating:u.setFloating}}({offset:P,position:R,defaultOpened:A});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 K=(0,a.Yx)(W,i.ref,t);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y.q,{...D,withinPortal:l,children:(0,r.jsx)(f.x,{...$,...H("tooltip",{style:{...(0,j.c)(u,z),zIndex:_,display:!B&&G?"block":"none",top:(V&&Math.round(V))??"",left:(Z&&Math.round(Z))??""}}),variant:F,ref:Y,mod:{multiline:N},children:w})}),(0,o.cloneElement)(i,{...i.props,[c]:K,onMouseEnter:e=>{i.props.onMouseEnter?.(e),O(e),q(!0)},onMouseLeave:e=>{i.props.onMouseLeave?.(e),q(!1)}})]})});P.classes=M,P.displayName="@mantine/core/TooltipFloating";let R=(0,o.createContext)(!1),N=R.Provider,_=()=>(0,o.useContext)(R),B={openDelay:0,closeDelay:0};function A(e){let{openDelay:t,closeDelay:n,children:o}=(0,p.w)("TooltipGroup",B,e);return(0,r.jsx)(N,{value:!0,children:(0,r.jsx)(C.e0,{delay:{open:t,close:n},children:o})})}A.displayName="@mantine/core/TooltipGroup",A.extend=e=>e;var F=n(84061),L=n(92416),D=n(66178),$=n(71978),z=n(52630);let H={position:"top",refProp:"ref",withinPortal:!0,inline:!1,defaultOpened:!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.d5)((e,t)=>{var n;let c=(0,p.w)("Tooltip",H,e),{children:l,position:u,refProp:d,label:h,openDelay:k,closeDelay:j,onPositionChange:I,opened:T,defaultOpened:E,withinPortal:P,radius:R,color:N,classNames:B,styles:A,unstyled:Z,style:V,className:G,withArrow:W,arrowSize:Y,arrowOffset:q,arrowRadius:K,arrowPosition:U,offset:X,transitionProps:J,multiline:Q,events:ee,zIndex:et,disabled:en,positionDependencies:er,onClick:eo,onMouseEnter:ei,onMouseLeave:ea,inline:es,variant:ec,keepMounted:el,vars:eu,portalProps:ed,mod:ep,floatingStrategy:em,...ef}=(0,p.w)("Tooltip",H,c),{dir:eh}=(0,g.gm)(),eg=(0,o.useRef)(null),ev=function(e){let[t,n]=(0,o.useState)(e.defaultOpened),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:m,refs:f,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,F.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)(m,{enabled:e.events?.hover,delay:i?s:{open:e.openDelay,close:e.closeDelay},mouseOnly:!e.events?.touch}),(0,C.KK)(m,{enabled:e.events?.focus,visibleOnly:!0}),(0,C.qs)(m,{role:"tooltip"}),(0,C.bQ)(m,{enabled:void 0===e.opened}),(0,C.Qu)(m,{id:a})]);(0,z.L)({opened:r,position:e.position,positionDependencies:e.positionDependencies,floating:{refs:f,update:h}}),(0,$.l)(()=>{e.onPositionChange?.(g)},[g]);let w=r&&c&&c!==a;return{x:d,y:p,arrowX:v,arrowY:b,reference:f.setReference,floating:f.setFloating,getFloatingProps:x,getReferenceProps:y,isGroupPhase:w,opened:r,placement:g}}({position:(0,v._)(eh,u),closeDelay:j,openDelay:k,onPositionChange:I,opened:T,defaultOpened:E,events:ee,arrowRef:eg,arrowOffset:q,offset:"number"==typeof X?X+(W?Y/2:0):X,positionDependencies:[...er,l],inline:es,strategy:em}),eb=(0,m.y)({name:"Tooltip",props:c,classes:M,className:G,style:V,classNames:B,styles:A,unstyled:Z,rootSelector:"tooltip",vars:eu,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 ey=(0,a.Yx)(ev.reference,l.ref,t),ex=(n={duration:100,transition:"fade"},{...w,...n,...J});return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(y.q,{...ed,withinPortal:P,children:(0,r.jsx)(x.u,{...ex,keepMounted:el,mounted:!en&&!!ev.opened,duration:ev.isGroupPhase?10:ex.duration,children:e=>(0,r.jsxs)(f.x,{...ef,"data-fixed":"fixed"===em||void 0,variant:ec,mod:[{multiline:Q},ep],...ev.getFloatingProps({ref:ev.floating,className:eb("tooltip").className,style:{...eb("tooltip").style,...e,zIndex:et,top:ev.y??0,left:ev.x??0}}),children:[h,(0,r.jsx)(b.Y,{ref:eg,arrowX:ev.arrowX,arrowY:ev.arrowY,visible:W,position:ev.placement,arrowSize:Y,arrowOffset:q,arrowRadius:K,arrowPosition:U,...eb("arrow")})]})})}),(0,o.cloneElement)(l,ev.getReferenceProps({onClick:eo,onMouseEnter:ei,onMouseLeave:ea,onMouseMove:c.onMouseMove,onPointerDown:c.onPointerDown,onPointerEnter:c.onPointerEnter,[d]:ey,className:(0,i.Z)(G,l.props.className),...l.props}))]})});Z.classes=M,Z.displayName="@mantine/core/Tooltip",Z.Floating=P,Z.Group=A},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:m,timingFunction:f="ease",onExit:h,onEntered:g,onEnter:v,onExited:b,enterDelay:y,exitDelay:x}){let{transitionDuration:w,transitionStatus:k,transitionTimingFunction:j}=function({duration:e,exitDuration:t,timingFunction:n,mounted:r,onEnter:o,onExit:i,onEntered:d,onExited:p,enterDelay:m,exitDelay:f}){let h=(0,u.rZ)(),g=(0,c.J)(),v=!!h.respectReducedMotion&&g,[b,y]=(0,a.useState)(v?0:e),[x,w]=(0,a.useState)(r?"entered":"exited"),k=(0,a.useRef)(-1),j=(0,a.useRef)(-1),C=(0,a.useRef)(-1),S=n=>{let r=n?o:i,a=n?d:p;window.clearTimeout(k.current);let c=v?0:n?e:t;y(c),0===c?("function"==typeof r&&r(),"function"==typeof a&&a(),w(n?"entered":"exited")):C.current=requestAnimationFrame(()=>{s.flushSync(()=>{w(n?"pre-entering":"pre-exiting")}),C.current=requestAnimationFrame(()=>{"function"==typeof r&&r(),w(n?"entering":"exiting"),k.current=window.setTimeout(()=>{"function"==typeof a&&a(),w(n?"entered":"exited")},c)})})},I=e=>{if(window.clearTimeout(j.current),"number"!=typeof(e?m:f)){S(e);return}j.current=window.setTimeout(()=>{S(e)},e?m:f)};return(0,l.l)(()=>{I(r)},[r]),(0,a.useEffect)(()=>()=>{window.clearTimeout(k.current),cancelAnimationFrame(C.current)},[]),{transitionDuration:b,transitionStatus:x,transitionTimingFunction:n||"ease"}}({mounted:p,exitDuration:d,duration:n,timingFunction:f,onExit:h,onEntered:g,onEnter:v,onExited:b,enterDelay:y,exitDelay:x});return 0===w?p?(0,r.jsx)(r.Fragment,{children:m({})}):e?m({display:"none"}):null:"exited"===k?e?m({display:"none"}):null:(0,r.jsx)(r.Fragment,{children:m(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:w,state:k,timingFunction:j}))})}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:m,styles:f,style:h,...g}=n,v=(0,i.y)({name:d,props:n,classes:c,className:s,style:h,classNames:m,styles:f,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.d5)((e,t)=>{let n=(0,o.w)("VisuallyHidden",l,e),{classNames:s,className:u,style:d,styles:p,unstyled:m,vars:f,...h}=n,g=(0,i.y)({name:"VisuallyHidden",classes:c,props:n,className:u,style:d,classNames:s,styles:p,unstyled:m});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 m=n(97072),f=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:w,darkHidden:k,renderRoot:j,__size:C,...S},I)=>{let M=(0,u.rZ)(),{styleProps:T,rest:E}=(0,m.c)(S),P=(0,l.dv)(),R=P?.()?.(T.sx),N=(0,g.m)(),_=(0,h.n)({styleProps:T,theme:M,data:f.p}),B={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":w,"mantine-dark-hidden":k,[`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(B):(0,r.jsx)(e||"div",{...B})]})});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:m,pt:f,pb:h,pl:g,pr:v,pe:b,ps:y,bd:x,bg:w,c:k,opacity:j,ff:C,fz:S,fw:I,lts:M,ta:T,lh:E,fs:P,tt:R,td:N,w:_,miw:B,maw:A,h:F,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:m,pt:f,pb:h,pl:g,pr:v,pe:b,ps:y,bd:x,bg:w,c:k,opacity:j,ff:C,fz:S,fw:I,lts:M,ta:T,lh:E,fs:P,tt:R,td:N,w:_,miw:B,maw:A,h:F,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 w}});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 m(e,t){return(Array.isArray(e)?e:[e]).reduce((e,t)=>`${t}{${e}}`,t)}var f=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,f.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?m(t,n):"",o=p(e.dark),i=p(e.light),a=o?":host"===t?m(`${t}([data-mantine-color-scheme="dark"])`,o):m(`${t}[data-mantine-color-scheme="dark"]`,o):"",s=i?":host"===t?m(`${t}([data-mantine-color-scheme="light"])`,i):m(`${t}[data-mantine-color-scheme="light"]`,i):"";return`${r}${a}${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 w({theme:e,children:t,getStyleNonce:n,withStaticClasses:a=!0,withGlobalClasses:s=!0,deduplicateCssVariables:c=!0,withCssVariables:p=!0,cssVariablesSelector:m=":root",classNamesPrefix:f="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:w,forceColorScheme:k,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:k,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:f,getStyleNonce:n,cssVariablesResolver:w,cssVariablesSelector:m,withStaticClasses:a,stylesTransform:j},children:(0,r.jsxs)(u.M2,{theme:e,children:[p&&(0,r.jsx)(b,{cssVariablesSelector:m,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)}}(),w.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,m=(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:m}}},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,{d5:function(){return s},ug:function(){return a},yR:function(){return i}});var r=n(52322),o=n(2784);function i(e){return e}function a(e){return t=>{let n=(0,o.forwardRef)((n,o)=>(0,r.jsx)(e,{...t,...n,ref:o}));return n.extend=e.extend,n.displayName=`WithProps(${e.displayName})`,n}}function s(e){let t=(0,o.forwardRef)(e);return t.extend=i,t.withProps=e=>{let n=(0,o.forwardRef)((n,o)=>(0,r.jsx)(t,{...e,...n,ref:o}));return n.extend=t.extend,n.displayName=`WithProps(${t.displayName})`,n},t}},33502:function(e,t,n){"use strict";n.d(t,{b:function(){return a}});var r=n(52322),o=n(2784),i=n(82027);function a(e){let t=(0,o.forwardRef)(e);return t.withProps=e=>{let n=(0,o.forwardRef)((n,o)=>(0,r.jsx)(t,{...e,...n,ref:o}));return n.extend=t.extend,n.displayName=`WithProps(${t.displayName})`,n},t.extend=i.yR,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:m,style:f,rootSelector:h="root",unstyled:g,classNames:v,styles:b,vars:y,varsResolver:x}){let w=(0,o.rZ)(),k=(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:m,props:f,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:f,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:f}),c({selector:r,stylesCtx:h,theme:e,classNames:b,props:f}),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:f,theme:e}),function({rootSelector:e,selector:t,className:n}){return e===t?n:void 0}({rootSelector:m,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:w,options:r,themeName:S,selector:e,classNamesPrefix:k,classNames:v,classes:t,unstyled:g,className:m,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:m,headless:f,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:m,selector:n,themeName:t,headless:f}),...a===n?u({style:c,theme:e}):null,...u({style:r?.style,theme:e})}}({theme:w,themeName:S,selector:e,options:r,props:n,stylesCtx:p,rootSelector:h,styles:b,style:f,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),m="rtl"===a?p:d,f="rtl"===a?d:p;switch(c.key){case"ArrowRight":"horizontal"===s&&(c.stopPropagation(),c.preventDefault(),l[m].focus(),i&&l[m].click());break;case"ArrowLeft":"horizontal"===s&&(c.stopPropagation(),c.preventDefault(),l[f].focus(),i&&l[f].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){if("number"==typeof e)return!0;if("string"==typeof e){if(e.startsWith("calc(")||e.startsWith("var(")||e.includes(" ")&&""!==e.trim())return!0;let t=/^[+-]?[0-9]+(\.[0-9]+)?(px|em|rem|ex|ch|lh|rlh|vw|vh|vmin|vmax|vb|vi|svw|svh|lvw|lvh|dvw|dvh|cm|mm|in|pt|pc|q|cqw|cqh|cqi|cqb|cqmin|cqmax|%)?$/;return e.trim().split(/\s+/).every(e=>t.test(e))}return!1}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:m=e=>(function(e,t="use-local-storage"){try{return JSON.stringify(e)}catch(e){throw Error(`@mantine/hooks ${t}: Failed to serialize the value`)}})(e,t)}){let f=(0,r.useCallback)(t=>{let n;try{n="undefined"==typeof window||!(e in window)||null===window[e]||!!t}catch(e){n=!0}if(n)return u;let r=s(a);return null!==r?p(r):u},[a,u]),[h,g]=(0,r.useState)(f(d)),v=(0,r.useCallback)(e=>{e instanceof Function?g(t=>{let r=e(t);return c(a,m(r)),window.dispatchEvent(new CustomEvent(n,{detail:{key:a,value:e(t)}})),r}):(c(a,m(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=f();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",m),document.addEventListener("touchmove",v),document.addEventListener("touchend",m)},d=()=>{document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",m),document.removeEventListener("touchmove",v),document.removeEventListener("touchend",m)},p=()=>{!s.current&&a.current&&(s.current=!0,"function"==typeof t?.onScrubStart&&t.onScrubStart(),u(!0),l())},m=()=>{s.current&&a.current&&(s.current=!1,u(!1),d(),setTimeout(()=>{"function"==typeof t?.onScrubEnd&&t.onScrubEnd()},0))},f=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",f),i.current?.addEventListener("touchstart",g,{passive:!1}),()=>{i.current&&(i.current.removeEventListener("mousedown",f),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:[],defaultPosition:"bottom-right",limit:5}),a=(e=i)=>(0,o.o)(e);function s(e,t){let n=e.getState(),r=function(e,t,n){let r=[],o=[],i={};for(let a of e){let e=a.position||t;i[e]=i[e]||0,i[e]+=1,i[e]<=n?o.push(a):r.push(a)}return{notifications:o,queue:r}}(t([...n.notifications,...n.queue]),n.defaultPosition,n.limit);e.setState({notifications:r.notifications,queue:r.queue,limit:n.limit,defaultPosition:n.defaultPosition})}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[m,f]=(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.d5)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,id:c,description:m,label:h,leftSection:v,rightSection:b,children:y,dimmedSections:x,highlightQuery:w,highlightColor:k,closeSpotlightOnTrigger:j,onClick:C,onMouseDown:S,keywords:I,vars:M,...T}=(0,a.w)("SpotlightAction",g,e),E=f(),P={classNames:i,styles:s},R=w&&"string"==typeof h?(0,r.jsx)(u.y,{component:"span",highlight:E.query,color:k,...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:m})]}),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.d5)((e,t)=>{let{className:n,style:o,styles:i,classNames:s,label:c,children:l,...u}=(0,a.w)("SpotlightActionsGroup",b,e),d=f();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),w=n(38405);let k={},j=(0,i.d5)((e,t)=>{let{className:n,style:o,id:i,children:s,vars:c,classNames:u,styles:d,...p}=(0,a.w)("SpotlightActionsList",k,e),m=f(),h=`mantine-${(0,x.useId)().replace(/:/g,"")}`,g=i||h;return(0,x.useEffect)(()=>(l.j5.setListId(g,m.store),()=>l.j5.setListId("",m.store)),[]),(0,r.jsx)(w.x.Autosize,{...m.getStyles("actionsList",{className:n,style:o,classNames:u,styles:d}),ref:t,type:"scroll",scrollbarSize:"var(--spotlight-actions-list-padding)",offsetScrollbars:"y",id:g,...p,children:s})});j.classes=h,j.displayName="@mantine/spotlight/SpotlightActionsList";let C={},S=(0,i.d5)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,...c}=(0,a.w)("SpotlightEmpty",C,e),l=f();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.d5)((e,t)=>{let{className:n,style:o,classNames:i,styles:s,...c}=(0,a.w)("SpotlightFooter",I,e),l=f();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),B=n(78297),A=n(71978);let F={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.d5)((e,t)=>{let n=(0,a.w)("SpotlightRoot",F,e),{classNames:o,className:i,style:s,styles:c,unstyled:u,vars:d,store:p,children:f,query:g,onQueryChange:v,transitionProps:b,clearQueryOnClose:y,shortcut:x,tagsToIgnore:w,triggerOnContentEditable:k,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,B.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),w,k),(0,A.l)(()=>{H?C?.():S?.()},[H]),j)?null:(0,r.jsx)(m,{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:f})})});L.classes=h,L.displayName="@mantine/spotlight/SpotlightRoot";var D=n(6941);let $={size:"lg"},z=(0,i.d5)((e,t)=>{let{classNames:n,styles:o,onKeyDown:i,onChange:s,vars:c,value:u,...d}=(0,a.w)("SpotlightSearch",$,e),p=f(),m=p.getStyles("search"),[h,g]=(0,x.useState)(!1);return(0,r.jsx)(D.I,{ref:t,classNames:[{input:m.className},n],styles:[{input:m.style},o],...d,value:u??p.query,onChange:e=>{p.setQuery(e.currentTarget.value),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.d5)((e,t)=>{let{searchProps:n,filter:o,query:i,onQueryChange:l,actions:u,nothingFound:d,highlightQuery:p,limit:m,...f}=(0,a.w)("Spotlight",H,e),[h,g]=(0,s.C)({value:i,defaultValue:"",finalValue:"",onChange:l}),b=(function e(t,n){if(!Array.isArray(t))return[];let r=0;return t.reduce((t,o)=>{if(r>=n)return t;if(c(o)){let i=e(o.actions,n-r);t.push({group:o.group,actions:i}),r+=i.length}else t.push(o),r+=1;return t},[])})(o(h,u),m).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,{...f,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 h},QP:function(){return a},US:function(){return v},j5:function(){return f},x9:function(){return g}});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,selected:e.opened?e.selected:-1}),e)}function d(e,t){t.updateState(t=>({...t,selected:e}))}function p(e,t=document){let n=t.querySelector(e);if(n)return n;let r=t instanceof ShadowRoot?t.host.children:t.children;for(let t=0;t({...t,listId:e}))},selectAction:m,selectNextAction:function(e){return m(e.getState().selected+1,e)},selectPreviousAction:function(e){return m(e.getState().selected-1,e)},triggerSelectedAction:function(e){let t=e.getState(),n=p(`#${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(()=>{m(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 h(){let e=i();return[e,{open:()=>c(e),close:()=>l(e),toggle:()=>u(e)}]}let[g,v]=h(),{open:b,close:y,toggle:x}=v},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 n?(0,r.jsx)(c.Q,{code:n,className:l.code,getFileIcon:s.g,withExpandButton:!0,defaultExpanded:t}):null}var d=n(40489);function p({className:e,...t}){return(0,r.jsx)("div",{className:(0,d.Z)("m_761fa02a",e),...t})}function m({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 f=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 w(e){return(0,x.j)(e.replace(/([a-z])([A-Z])/g,"$1 $2").toLowerCase())}var k=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 B={swatch:"m_5e1a038c",check:"m_f9decbb8",colorControl:"m_2f5f7bca"},A=n(12189),F=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:w(n),...o})},segmented:function({data:e,value:t,onChange:n,prop:o,transformLabel:i=!0,...a}){return(0,r.jsx)(k.I.Wrapper,{labelElement:"div",label:w(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,f.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:B.swatch,"aria-label":n,children:e===n&&(0,r.jsx)(M.n,{className:B.check})},n));return(0,r.jsx)(k.I.Wrapper,{labelElement:"div",label:w(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:B.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:w(n),placeholder:"Enter prop value",...o})},select:function({value:e,onChange:t,prop:n,data:o,...i}){return(0,r.jsx)(A.p,{value:e,onChange:e=>t(e.currentTarget.value),label:w(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)(k.I.Wrapper,{labelElement:"div",label:w(n),...o,children:(0,r.jsx)(F.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)(k.I.Wrapper,{labelElement:"div",label:w(n),...s,children:(0,r.jsx)(F.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),{}),[m,g]=(0,f.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:m[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,f.cloneElement)(n,m)}),(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:m})})]})}function O(e){return e?`.${e} { diff --git a/_next/static/chunks/pages/dates/date-time-picker-d4847175249474ec.js b/_next/static/chunks/pages/dates/date-time-picker-9773bb5f487b96ad.js similarity index 73% rename from _next/static/chunks/pages/dates/date-time-picker-d4847175249474ec.js rename to _next/static/chunks/pages/dates/date-time-picker-9773bb5f487b96ad.js index c039d75400c..feabbd0294a 100644 --- a/_next/static/chunks/pages/dates/date-time-picker-d4847175249474ec.js +++ b/_next/static/chunks/pages/dates/date-time-picker-9773bb5f487b96ad.js @@ -1,4 +1,4 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[64016],{28879:function(e){var t;t=function(){"use strict";var e="millisecond",t="second",n="minute",r="hour",i="week",a="month",s="quarter",o="year",u="date",l="Invalid Date",c=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,d=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,f=function(e,t,n){var r=String(e);return!r||r.length>=t?e:""+Array(t+1-r.length).join(n)+e},m="en",h={};h[m]={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var t=["th","st","nd","rd"],n=e%100;return"["+e+(t[(n-20)%10]||t[n]||"th")+"]"}};var p="$isDayjsObject",y=function(e){return e instanceof g||!(!e||!e[p])},v=function e(t,n,r){var i;if(!t)return m;if("string"==typeof t){var a=t.toLowerCase();h[a]&&(i=a),n&&(h[a]=n,i=a);var s=t.split("-");if(!i&&s.length>1)return e(s[0])}else{var o=t.name;h[o]=t,i=o}return!r&&i&&(m=i),i||!r&&m},D=function(e,t){if(y(e))return e.clone();var n="object"==typeof t?t:{};return n.date=e,n.args=arguments,new g(n)},$={s:f,z:function(e){var t=-e.utcOffset(),n=Math.abs(t);return(t<=0?"+":"-")+f(Math.floor(n/60),2,"0")+":"+f(n%60,2,"0")},m:function e(t,n){if(t.date()=0&&(a[d]=parseInt(c,10))}var f=a[3],m=a[0]+"-"+a[1]+"-"+a[2]+" "+(24===f?0:f)+":"+a[4]+":"+a[5]+":000",h=+t;return(i.utc(m).valueOf()-(h-=h%1e3))/6e4},u=r.prototype;u.tz=function(e,t){void 0===e&&(e=a);var n=this.utcOffset(),r=this.toDate(),s=r.toLocaleString("en-US",{timeZone:e}),o=Math.round((r-new Date(s))/1e3/60),u=i(s,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(-(15*Math.round(r.getTimezoneOffset()/15))-o,!0);if(t){var l=u.utcOffset();u=u.add(n-l,"minute")}return u.$x.$timezone=e,u},u.offsetName=function(e){var t=this.$x.$timezone||i.tz.guess(),n=s(this.valueOf(),t,{timeZoneName:e}).find(function(e){return"timezonename"===e.type.toLowerCase()});return n&&n.value};var l=u.startOf;u.startOf=function(e,t){if(!this.$x||!this.$x.$timezone)return l.call(this,e,t);var n=i(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return l.call(n,e,t).tz(this.$x.$timezone,!0)},i.tz=function(e,t,n){var r=n&&t,s=n||t||a,u=o(+i(),s);if("string"!=typeof e)return i(e).tz(s);var l=function(e,t,n){var r=e-60*t*1e3,i=o(r,n);if(t===i)return[r,t];var a=o(r-=60*(i-t)*1e3,n);return i===a?[r,i]:[e-60*Math.min(i,a)*1e3,Math.max(i,a)]}(i.utc(e,r).valueOf(),u,s),c=l[0],d=l[1],f=i(c).utcOffset(d);return f.$x.$timezone=s,f},i.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},i.tz.setDefault=function(e){a=e}}},e.exports=t()},10264:function(e){var t;t=function(){"use strict";var e="minute",t=/[+-]\d\d(?::?\d\d)?/g,n=/([+-]|\d\d)/g;return function(r,i,a){var s=i.prototype;a.utc=function(e){var t={date:e,utc:!0,args:arguments};return new i(t)},s.utc=function(t){var n=a(this.toDate(),{locale:this.$L,utc:!0});return t?n.add(this.utcOffset(),e):n},s.local=function(){return a(this.toDate(),{locale:this.$L,utc:!1})};var o=s.parse;s.parse=function(e){e.utc&&(this.$u=!0),this.$utils().u(e.$offset)||(this.$offset=e.$offset),o.call(this,e)};var u=s.init;s.init=function(){if(this.$u){var e=this.$d;this.$y=e.getUTCFullYear(),this.$M=e.getUTCMonth(),this.$D=e.getUTCDate(),this.$W=e.getUTCDay(),this.$H=e.getUTCHours(),this.$m=e.getUTCMinutes(),this.$s=e.getUTCSeconds(),this.$ms=e.getUTCMilliseconds()}else u.call(this)};var l=s.utcOffset;s.utcOffset=function(r,i){var a=this.$utils().u;if(a(r))return this.$u?0:a(this.$offset)?l.call(this):this.$offset;if("string"==typeof r&&null===(r=function(e){void 0===e&&(e="");var r=e.match(t);if(!r)return null;var i=(""+r[0]).match(n)||["-",0,0],a=i[0],s=60*+i[1]+ +i[2];return 0===s?0:"+"===a?s:-s}(r)))return this;var s=16>=Math.abs(r)?60*r:r,o=this;if(i)return o.$offset=s,o.$u=0===r,o;if(0!==r){var u=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(s+u,e)).$offset=s,o.$x.$localOffset=u}else o=this.utc();return o};var c=s.format;s.format=function(e){var t=e||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return c.call(this,t)},s.valueOf=function(){var e=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*e},s.isUTC=function(){return!!this.$u},s.toISOString=function(){return this.toDate().toISOString()},s.toString=function(){return this.toDate().toUTCString()};var d=s.toDate;s.toDate=function(e){return"s"===e&&this.$offset?a(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():d.call(this)};var f=s.diff;s.diff=function(e,t,n){if(e&&this.$u===e.$u)return f.call(this,e,t,n);var r=this.local(),i=a(e).local();return f.call(r,i,t,n)}}},e.exports=t()},66022:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/dates/date-time-picker",function(){return n(83424)}])},83424:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return v}});var r=n(52322),i=n(45392),a=n(59526);let s={type:"code",centered:!0,maxWidth:400,component:function(){return(0,r.jsx)(a.x,{label:"Pick date and time",placeholder:"Pick date and time"})},code:` +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[64016],{28879:function(e){var t;t=function(){"use strict";var e="millisecond",t="second",n="minute",r="hour",i="week",a="month",s="quarter",o="year",u="date",l="Invalid Date",c=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,d=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,f=function(e,t,n){var r=String(e);return!r||r.length>=t?e:""+Array(t+1-r.length).join(n)+e},m="en",h={};h[m]={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var t=["th","st","nd","rd"],n=e%100;return"["+e+(t[(n-20)%10]||t[n]||"th")+"]"}};var p="$isDayjsObject",y=function(e){return e instanceof $||!(!e||!e[p])},v=function e(t,n,r){var i;if(!t)return m;if("string"==typeof t){var a=t.toLowerCase();h[a]&&(i=a),n&&(h[a]=n,i=a);var s=t.split("-");if(!i&&s.length>1)return e(s[0])}else{var o=t.name;h[o]=t,i=o}return!r&&i&&(m=i),i||!r&&m},g=function(e,t){if(y(e))return e.clone();var n="object"==typeof t?t:{};return n.date=e,n.args=arguments,new $(n)},D={s:f,z:function(e){var t=-e.utcOffset(),n=Math.abs(t);return(t<=0?"+":"-")+f(Math.floor(n/60),2,"0")+":"+f(n%60,2,"0")},m:function e(t,n){if(t.date()=0&&(a[d]=parseInt(c,10))}var f=a[3],m=a[0]+"-"+a[1]+"-"+a[2]+" "+(24===f?0:f)+":"+a[4]+":"+a[5]+":000",h=+t;return(i.utc(m).valueOf()-(h-=h%1e3))/6e4},u=r.prototype;u.tz=function(e,t){void 0===e&&(e=a);var n=this.utcOffset(),r=this.toDate(),s=r.toLocaleString("en-US",{timeZone:e}),o=Math.round((r-new Date(s))/1e3/60),u=i(s,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(-(15*Math.round(r.getTimezoneOffset()/15))-o,!0);if(t){var l=u.utcOffset();u=u.add(n-l,"minute")}return u.$x.$timezone=e,u},u.offsetName=function(e){var t=this.$x.$timezone||i.tz.guess(),n=s(this.valueOf(),t,{timeZoneName:e}).find(function(e){return"timezonename"===e.type.toLowerCase()});return n&&n.value};var l=u.startOf;u.startOf=function(e,t){if(!this.$x||!this.$x.$timezone)return l.call(this,e,t);var n=i(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return l.call(n,e,t).tz(this.$x.$timezone,!0)},i.tz=function(e,t,n){var r=n&&t,s=n||t||a,u=o(+i(),s);if("string"!=typeof e)return i(e).tz(s);var l=function(e,t,n){var r=e-60*t*1e3,i=o(r,n);if(t===i)return[r,t];var a=o(r-=60*(i-t)*1e3,n);return i===a?[r,i]:[e-60*Math.min(i,a)*1e3,Math.max(i,a)]}(i.utc(e,r).valueOf(),u,s),c=l[0],d=l[1],f=i(c).utcOffset(d);return f.$x.$timezone=s,f},i.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},i.tz.setDefault=function(e){a=e}}},e.exports=t()},10264:function(e){var t;t=function(){"use strict";var e="minute",t=/[+-]\d\d(?::?\d\d)?/g,n=/([+-]|\d\d)/g;return function(r,i,a){var s=i.prototype;a.utc=function(e){var t={date:e,utc:!0,args:arguments};return new i(t)},s.utc=function(t){var n=a(this.toDate(),{locale:this.$L,utc:!0});return t?n.add(this.utcOffset(),e):n},s.local=function(){return a(this.toDate(),{locale:this.$L,utc:!1})};var o=s.parse;s.parse=function(e){e.utc&&(this.$u=!0),this.$utils().u(e.$offset)||(this.$offset=e.$offset),o.call(this,e)};var u=s.init;s.init=function(){if(this.$u){var e=this.$d;this.$y=e.getUTCFullYear(),this.$M=e.getUTCMonth(),this.$D=e.getUTCDate(),this.$W=e.getUTCDay(),this.$H=e.getUTCHours(),this.$m=e.getUTCMinutes(),this.$s=e.getUTCSeconds(),this.$ms=e.getUTCMilliseconds()}else u.call(this)};var l=s.utcOffset;s.utcOffset=function(r,i){var a=this.$utils().u;if(a(r))return this.$u?0:a(this.$offset)?l.call(this):this.$offset;if("string"==typeof r&&null===(r=function(e){void 0===e&&(e="");var r=e.match(t);if(!r)return null;var i=(""+r[0]).match(n)||["-",0,0],a=i[0],s=60*+i[1]+ +i[2];return 0===s?0:"+"===a?s:-s}(r)))return this;var s=16>=Math.abs(r)?60*r:r,o=this;if(i)return o.$offset=s,o.$u=0===r,o;if(0!==r){var u=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(s+u,e)).$offset=s,o.$x.$localOffset=u}else o=this.utc();return o};var c=s.format;s.format=function(e){var t=e||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return c.call(this,t)},s.valueOf=function(){var e=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*e},s.isUTC=function(){return!!this.$u},s.toISOString=function(){return this.toDate().toISOString()},s.toString=function(){return this.toDate().toUTCString()};var d=s.toDate;s.toDate=function(e){return"s"===e&&this.$offset?a(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():d.call(this)};var f=s.diff;s.diff=function(e,t,n){if(e&&this.$u===e.$u)return f.call(this,e,t,n);var r=this.local(),i=a(e).local();return f.call(r,i,t,n)}}},e.exports=t()},66022:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/dates/date-time-picker",function(){return n(83424)}])},83424:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return v}});var r=n(52322),i=n(45392),a=n(59526);let s={type:"code",centered:!0,maxWidth:400,component:function(){return(0,r.jsx)(a.x,{label:"Pick date and time",placeholder:"Pick date and time"})},code:` import { DateTimePicker } from '@mantine/dates'; function Demo() { @@ -65,4 +65,4 @@ function Demo() { /> ); } -`};var m=n(25071),h=n(15019);let p=(0,m.A)(h.us.DateTimePicker);function y(e){let t={a:"a",code:"code",h2:"h2",p:"p",...(0,i.a)(),...e.components},{Demo:n,GetElementRef:a,InputAccessibility:m,InputFeatures:h}=t;return n||D("Demo",!0),a||D("GetElementRef",!0),m||D("InputAccessibility",!0),h||D("InputFeatures",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"datepicker-props",children:"DatePicker props"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"DateTimePicker"})," supports most of the ",(0,r.jsx)(t.a,{href:"/dates/date-picker/",children:"DatePicker"})," props,\nread through ",(0,r.jsx)(t.a,{href:"/dates/date-picker/",children:"DatePicker"})," documentation to learn about all component features that are not listed on this page."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n,{data:s}),"\n",(0,r.jsx)(t.h2,{id:"with-seconds",children:"With seconds"}),"\n",(0,r.jsx)(n,{data:o}),"\n",(0,r.jsx)(t.h2,{id:"value-format",children:"Value format"}),"\n",(0,r.jsxs)(t.p,{children:["Use ",(0,r.jsx)(t.code,{children:"valueFormat"})," prop to change ",(0,r.jsx)(t.a,{href:"https://day.js.org/docs/en/display/format",children:"dayjs format"})," of value label:"]}),"\n",(0,r.jsx)(n,{data:u}),"\n",(0,r.jsx)(t.h2,{id:"disabled-state",children:"Disabled state"}),"\n",(0,r.jsx)(n,{data:l}),"\n",(0,r.jsx)(t.h2,{id:"input-props",children:"Input props"}),"\n",(0,r.jsx)(h,{component:"DateTimePicker",element:"button"}),"\n",(0,r.jsx)(n,{data:c}),"\n",(0,r.jsx)(t.h2,{id:"clearable",children:"Clearable"}),"\n",(0,r.jsxs)(t.p,{children:["Set ",(0,r.jsx)(t.code,{children:"clearable"})," prop to display clear button in the right section. Note that if you set ",(0,r.jsx)(t.code,{children:"rightSection"}),"\nprop, clear button will not be displayed."]}),"\n",(0,r.jsx)(n,{data:d}),"\n",(0,r.jsx)(t.h2,{id:"open-picker-in-modal",children:"Open picker in modal"}),"\n",(0,r.jsxs)(t.p,{children:["By default, picker is rendered inside ",(0,r.jsx)(t.a,{href:"/core/popover/",children:"Popover"}),".\nYou can change that to ",(0,r.jsx)(t.a,{href:"/core/modal/",children:"Modal"})," by setting ",(0,r.jsx)(t.code,{children:'dropdownType="modal"'}),":"]}),"\n",(0,r.jsx)(n,{data:f}),"\n",(0,r.jsx)(a,{component:"DateTimePicker",refType:"button",package:"@mantine/dates"}),"\n",(0,r.jsx)(m,{component:"DateTimePicker",packageName:"@mantine/dates"})]})}function v(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(p,{...e,children:(0,r.jsx)(y,{...e})})}function D(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},76528:function(e,t,n){"use strict";n.d(t,{Mt:function(){return r},nW:function(){return i},pc:function(){return a}});let r=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],i=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],a=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},9882:function(e,t,n){"use strict";function r(e){let{maxLevel:t,minLevel:n,defaultLevel:r,level:i,onLevelChange:a,nextIcon:s,previousIcon:o,date:u,defaultDate:l,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:m,onYearSelect:h,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:D,onPreviousMonth:$,onNextYear:g,onPreviousYear:x,onNextDecade:b,onPreviousDecade:k,withCellSpacing:M,highlightToday:S,__updateDateOnYearSelect:T,__updateDateOnMonthSelect:j,firstDayOfWeek:w,weekdayFormat:P,weekendDays:O,getDayProps:_,excludeDate:C,renderDay:Y,hideOutsideDates:V,hideWeekdays:z,getDayAriaLabel:H,monthLabelFormat:I,monthsListFormat:N,getMonthControlProps:A,yearLabelFormat:W,yearsListFormat:L,getYearControlProps:U,decadeLabelFormat:F,allowSingleDateInRange:Z,allowDeselect:B,minDate:E,maxDate:J,locale:R,...q}=e;return{calendarProps:{maxLevel:t,minLevel:n,defaultLevel:r,level:i,onLevelChange:a,nextIcon:s,previousIcon:o,date:u,defaultDate:l,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:m,onYearSelect:h,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:D,onPreviousMonth:$,onNextYear:g,onPreviousYear:x,onNextDecade:b,onPreviousDecade:k,withCellSpacing:M,highlightToday:S,__updateDateOnYearSelect:T,__updateDateOnMonthSelect:j,firstDayOfWeek:w,weekdayFormat:P,weekendDays:O,getDayProps:_,excludeDate:C,renderDay:Y,hideOutsideDates:V,hideWeekdays:z,getDayAriaLabel:H,monthLabelFormat:I,monthsListFormat:N,getMonthControlProps:A,yearLabelFormat:W,yearsListFormat:L,getYearControlProps:U,decadeLabelFormat:F,allowSingleDateInRange:Z,allowDeselect:B,minDate:E,maxDate:J,locale:R},others:q}}n.d(t,{M:function(){return r}})},95488:function(e,t,n){"use strict";n.d(t,{M:function(){return f}});var r=n(52322),i=n(82027),a=n(38483),s=n(51477),o=n(82083),u=n(46766);n(28879);var l=n(51235);n(2784);var c=n(11204);let d={type:"default",defaultLevel:"month",numberOfColumns:1},f=(0,i.d5)((e,t)=>{let n=(0,a.w)("DatePicker",d,e),{classNames:i,styles:f,vars:m,type:h,defaultValue:p,value:y,onChange:v,__staticSelector:D,getDayProps:$,allowSingleDateInRange:g,allowDeselect:x,onMouseLeave:b,numberOfColumns:k,hideOutsideDates:M,__onDayMouseEnter:S,__onDayClick:T,__timezoneApplied:j,...w}=n,{onDateChange:P,onRootMouseLeave:O,onHoveredDateChange:_,getControlProps:C}=(0,o.D)({type:h,level:"day",allowDeselect:x,allowSingleDateInRange:g,value:y,defaultValue:p,onChange:v,onMouseLeave:b,applyTimezone:!j}),{resolvedClassNames:Y,resolvedStyles:V}=(0,s.h)({classNames:i,styles:f,props:n}),z=(0,u.e)();return(0,r.jsx)(c.f,{ref:t,minLevel:"month",classNames:Y,styles:V,__staticSelector:D||"DatePicker",onMouseLeave:O,numberOfColumns:k,hideOutsideDates:M??1!==k,__onDayMouseEnter:(e,t)=>{_(t),S?.(e,t)},__onDayClick:(e,t)=>{P(t),T?.(e,t)},getDayProps:e=>({...C(e),...$?.(e)}),...w,date:(0,l.w)("add",w.date,z.getTimezone(),j),__timezoneApplied:!0})});f.classes=c.f.classes,f.displayName="@mantine/dates/DatePicker"},59526:function(e,t,n){"use strict";n.d(t,{x:function(){return S}});var r=n(52322),i=n(28879),a=n(2784),s=n(82027),o=n(38483),u=n(46690),l=n(51477),c=n(54813),d=n(40284),f=n(70837),m=n(3900),h=n(71978),p=n(93141),y=n(46766),v=n(57888),D=n(51235),$=n(9882),g=n(95488),x=n(71686),b=n(35963),k={timeWrapper:"m_208d2562",timeInput:"m_62ee059"};let M={dropdownType:"popover"},S=(0,s.d5)((e,t)=>{let n=(0,o.w)("DateTimePicker",M,e),{value:s,defaultValue:S,onChange:T,valueFormat:j,locale:w,classNames:P,styles:O,unstyled:_,timeInputProps:C,submitButtonProps:Y,withSeconds:V,level:z,defaultLevel:H,size:I,variant:N,dropdownType:A,vars:W,minDate:L,maxDate:U,...F}=n,Z=(0,u.y)({name:"DateTimePicker",classes:k,props:n,classNames:P,styles:O,unstyled:_,vars:W}),{resolvedClassNames:B,resolvedStyles:E}=(0,l.h)({classNames:P,styles:O,props:n}),J=(0,a.useRef)(),R=(0,f.Yx)(J,C?.ref),{calendarProps:{allowSingleDateInRange:q,...K},others:X}=(0,$.M)(F),G=(0,y.e)(),[Q,ee]=(0,p.l)({type:"default",value:s,defaultValue:S,onChange:T}),et=e=>e?i(e).format(V?"HH:mm:ss":"HH:mm"):"",[en,er]=(0,a.useState)(et(Q)),[ei,ea]=(0,a.useState)(z||H||"month"),[es,eo]=(0,m.q)(!1),eu=Q?i(Q).locale(G.getLocale(w)).format(j||(V?"DD/MM/YYYY HH:mm:ss":"DD/MM/YYYY HH:mm")):"";(0,h.l)(()=>{es||er(et(Q))},[Q,es]),(0,h.l)(()=>{es&&ea("month")},[es]);let el=L?i(L).format("HH:mm:ss"):null,ec=U?i(U).format("HH:mm:ss"):null,ed="popover"===A;return(0,r.jsxs)(x.i,{formattedValue:eu,dropdownOpened:es,dropdownHandlers:eo,classNames:B,styles:E,unstyled:_,ref:t,onClear:()=>ee(null),shouldClear:!!Q,value:Q,size:I,variant:N,dropdownType:A,...X,type:"default",__staticSelector:"DateTimePicker",children:[(0,r.jsx)(g.M,{...K,maxDate:U,minDate:L,size:I,variant:N,type:"default",value:Q,defaultDate:Q,onChange:e=>{e&&ee((0,v.o)(Q,e)),J.current?.focus()},locale:w,classNames:B,styles:E,unstyled:_,__staticSelector:"DateTimePicker",__stopPropagation:ed,level:z,defaultLevel:H,onLevelChange:e=>{ea(e),K.onLevelChange?.(e)},__timezoneApplied:!0}),"month"===ei&&(0,r.jsxs)("div",{...Z("timeWrapper"),children:[(0,r.jsx)(b.M,{value:en,withSeconds:V,ref:R,unstyled:_,minTime:Q&&L&&Q.toDateString()===L.toDateString()&&null!=el?el:void 0,maxTime:Q&&U&&Q.toDateString()===U.toDateString()&&null!=ec?ec:void 0,...C,...Z("timeInput",{className:C?.className,style:C?.style}),onChange:e=>{C?.onChange?.(e);let t=e.currentTarget.value;if(er(t),t){let[e,n,r]=t.split(":").map(Number),i=(0,D.w)("add",new Date,G.getTimezone());i.setHours(e),i.setMinutes(n),i.setSeconds(r||0),ee((0,v.o)(i,Q||(0,D.w)("add",new Date,G.getTimezone())))}},onKeyDown:e=>{C?.onKeyDown?.(e),"Enter"===e.key&&(e.preventDefault(),eo.close())},size:I,"data-mantine-stop-propagation":ed||void 0}),(0,r.jsx)(c.A,{variant:"default",size:`input-${I||"sm"}`,...Z("submitButton",{className:Y?.className,style:Y?.style}),unstyled:_,"data-mantine-stop-propagation":ed||void 0,children:(0,r.jsx)(d.n,{size:"30%"}),...Y,onClick:e=>{Y?.onClick?.(e),eo.close()}})]})]})});S.classes={...k,...x.i.classes,...g.M.classes},S.displayName="@mantine/dates/DateTimePicker"},20228:function(e,t,n){"use strict";n.d(t,{n:function(){return s}});var r=n(52322);n(28879);var i=n(51235),a=n(46766);function s({value:e,type:t,name:n,form:s}){return(0,r.jsx)("input",{type:"hidden",value:function(e,t){let n=(0,a.e)(),r=e=>(0,i.w)("remove",e,n.getTimezone()).toISOString();if("range"===t&&Array.isArray(e)){let[t,n]=e;return t?n?`${r(t)} \u2013 ${r(n)}`:`${r(t)} \u2013`:""}return"multiple"===t&&Array.isArray(e)?e.map(e=>e&&r(e)).filter(Boolean).join(", "):!Array.isArray(e)&&e?r(e):""}(e,t),name:n,form:s})}s.displayName="@mantine/dates/HiddenDatesInput"},71686:function(e,t,n){"use strict";n.d(t,{i:function(){return h}});var r=n(52322),i=n(40489),a=n(82027),s=n(7140),o=n(2670),u=n(78222),l=n(6941),c=n(50205),d=n(20228),f={input:"m_6fa5e2aa"};let m={},h=(0,a.d5)((e,t)=>{let{inputProps:n,wrapperProps:a,placeholder:h,classNames:p,styles:y,unstyled:v,popoverProps:D,modalProps:$,dropdownType:g,children:x,formattedValue:b,dropdownHandlers:k,dropdownOpened:M,onClick:S,clearable:T,onClear:j,clearButtonProps:w,rightSection:P,shouldClear:O,readOnly:_,disabled:C,value:Y,name:V,form:z,type:H,...I}=(0,s.k)("PickerInputBase",m,e),N=P||(T&&O&&!_&&!C?(0,r.jsx)(o.P,{variant:"transparent",onClick:j,unstyled:v,size:n.size||"sm",...w}):null),A=()=>{"range"===H&&Array.isArray(Y)&&Y[0]&&!Y[1]&&j(),k.close()};return(0,r.jsxs)(r.Fragment,{children:["modal"===g&&!_&&(0,r.jsx)(u.u,{opened:M,onClose:A,withCloseButton:!1,size:"auto","data-dates-modal":!0,unstyled:v,...$,children:x}),(0,r.jsx)(l.I.Wrapper,{...a,children:(0,r.jsxs)(c.J,{position:"bottom-start",opened:M,trapFocus:!0,returnFocus:!0,unstyled:v,...D,disabled:D?.disabled||"modal"===g||_,onClose:()=>{D?.onClose?.(),A()},children:[(0,r.jsx)(c.J.Target,{children:(0,r.jsx)(l.I,{"data-dates-input":!0,"data-read-only":_||void 0,disabled:C,component:"button",type:"button",multiline:!0,onClick:e=>{S?.(e),k.toggle()},rightSection:N,...n,ref:t,classNames:{...p,input:(0,i.Z)(f.input,p?.input)},...I,children:b||(0,r.jsx)(l.I.Placeholder,{error:n.error,unstyled:v,className:p?.placeholder,style:y?.placeholder,children:h})})}),(0,r.jsx)(c.J.Dropdown,{"data-dates-dropdown":!0,children:x})]})}),(0,r.jsx)(d.n,{value:Y,name:V,form:z,type:H})]})});h.classes=f,h.displayName="@mantine/dates/PickerInputBase"},35963:function(e,t,n){"use strict";n.d(t,{M:function(){return c}});var r=n(52322),i=n(40489),a=n(82027),s=n(38483),o=n(51477),u=n(73063);let l={},c=(0,a.d5)((e,t)=>{let n=(0,s.w)("TimeInput",l,e),{classNames:a,styles:c,unstyled:d,vars:f,withSeconds:m,minTime:h,maxTime:p,value:y,onChange:v,...D}=n,{resolvedClassNames:$,resolvedStyles:g}=(0,o.h)({classNames:a,styles:c,props:n}),x=e=>{if(void 0!==h||void 0!==p){let[t,n,r]=e.split(":").map(Number);if(h){let[e,i,a]=h.split(":").map(Number);if(te||t===e&&n>i||m&&t===e&&n===i&&r>a)return 1}}return 0};return(0,r.jsx)(u.M,{classNames:{...$,input:(0,i.Z)("m_468e7eda",$?.input)},styles:g,unstyled:d,ref:t,value:y,...D,step:m?1:60,onChange:v,onBlur:e=>{if(n.onBlur?.(e),void 0!==h||void 0!==p){let t=e.currentTarget.value;if(t){let r=x(t);1===r?(e.currentTarget.value=p,n.onChange?.(e)):-1===r&&(e.currentTarget.value=h,n.onChange?.(e))}}},type:"time",__staticSelector:"TimeInput"})});c.classes=u.M.classes,c.displayName="@mantine/dates/TimeInput"},82083:function(e,t,n){"use strict";n.d(t,{D:function(){return o}});var r=n(28879),i=n(2784),a=n(93141);function s(e,t){let n=[...t].sort((e,t)=>e.getTime()-t.getTime());return r(n[0]).startOf("day").subtract(1,"ms").isBefore(e)&&r(n[1]).endOf("day").add(1,"ms").isAfter(e)}function o({type:e,level:t,value:n,defaultValue:o,onChange:u,allowSingleDateInRange:l,allowDeselect:c,onMouseLeave:d,applyTimezone:f=!0}){let[m,h]=(0,a.l)({type:e,value:n,defaultValue:o,onChange:u,applyTimezone:f}),[p,y]=(0,i.useState)("range"===e&&m[0]&&!m[1]?m[0]:null),[v,D]=(0,i.useState)(null),$=e=>p instanceof Date&&v instanceof Date?s(e,[v,p]):m[0]instanceof Date&&m[1]instanceof Date&&s(e,m),g="range"===e?e=>{d?.(e),D(null)}:d,x=e=>m[0]instanceof Date&&!!r(e).isSame(m[0],t)&&!(v&&r(v).isBefore(m[0])),b=e=>m[1]instanceof Date?r(e).isSame(m[1],t):m[0]instanceof Date&&!!v&&r(v).isBefore(m[0])&&r(e).isSame(m[0],t),k="range"===e&&p?D:()=>{};return(0,i.useEffect)(()=>{if("range"!==e)return;let t=null==m[0]&&null==m[1],n=null!=m[0]&&null!=m[1];(t||n)&&(y(null),D(null))},[m]),{onDateChange:n=>{if("range"===e){if(p instanceof Date&&!m[1]){if(r(n).isSame(p,t)&&!l){y(null),D(null),h([null,null]);return}let e=[n,p];e.sort((e,t)=>e.getTime()-t.getTime()),h(e),D(null),y(null);return}if(m[0]&&!m[1]&&r(n).isSame(m[0],t)&&!l){y(null),D(null),h([null,null]);return}h([n,null]),D(null),y(n);return}if("multiple"===e){m.some(e=>r(e).isSame(n,t))?h(m.filter(e=>!r(e).isSame(n,t))):h([...m,n]);return}m&&c&&r(n).isSame(m,t)?h(null):h(n)},onRootMouseLeave:g,onHoveredDateChange:k,getControlProps:n=>{if("range"===e)return{selected:m.some(e=>e&&r(e).isSame(n,t)),inRange:$(n),firstInRange:x(n),lastInRange:b(n),"data-autofocus":!!m[0]&&r(m[0]).isSame(n,t)||void 0};if("multiple"===e)return{selected:m.some(e=>e&&r(e).isSame(n,t)),"data-autofocus":!!m[0]&&r(m[0]).isSame(n,t)||void 0};let i=r(m).isSame(n,t);return{selected:i,"data-autofocus":i||void 0}},_value:m,setValue:h}}},57888:function(e,t,n){"use strict";function r(e,t){if(!e||!t)return t;let n=e.getHours(),r=e.getMinutes(),i=e.getSeconds(),a=e.getMilliseconds(),s=new Date(t);return s.setHours(n),s.setMinutes(r),s.setSeconds(i),s.setMilliseconds(a),s}n.d(t,{o:function(){return r}})},3900:function(e,t,n){"use strict";n.d(t,{q:function(){return i}});var r=n(2784);function i(e=!1,t){let{onOpen:n,onClose:i}=t||{},[a,s]=(0,r.useState)(e),o=(0,r.useCallback)(()=>{s(e=>e||(n?.(),!0))},[n]),u=(0,r.useCallback)(()=>{s(e=>e?(i?.(),!1):e)},[i]),l=(0,r.useCallback)(()=>{a?u():o()},[u,o,a]);return[a,{open:o,close:u,toggle:l}]}}},function(e){e.O(0,[61177,66748,11340,11204,92888,49774,40179],function(){return e(e.s=66022)}),_N_E=e.O()}]); \ No newline at end of file +`};var m=n(25071),h=n(15019);let p=(0,m.A)(h.us.DateTimePicker);function y(e){let t={a:"a",code:"code",h2:"h2",p:"p",...(0,i.a)(),...e.components},{Demo:n,GetElementRef:a,InputAccessibility:m,InputFeatures:h}=t;return n||g("Demo",!0),a||g("GetElementRef",!0),m||g("InputAccessibility",!0),h||g("InputFeatures",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"datepicker-props",children:"DatePicker props"}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"DateTimePicker"})," supports most of the ",(0,r.jsx)(t.a,{href:"/dates/date-picker/",children:"DatePicker"})," props,\nread through ",(0,r.jsx)(t.a,{href:"/dates/date-picker/",children:"DatePicker"})," documentation to learn about all component features that are not listed on this page."]}),"\n",(0,r.jsx)(t.h2,{id:"usage",children:"Usage"}),"\n",(0,r.jsx)(n,{data:s}),"\n",(0,r.jsx)(t.h2,{id:"with-seconds",children:"With seconds"}),"\n",(0,r.jsx)(n,{data:o}),"\n",(0,r.jsx)(t.h2,{id:"value-format",children:"Value format"}),"\n",(0,r.jsxs)(t.p,{children:["Use ",(0,r.jsx)(t.code,{children:"valueFormat"})," prop to change ",(0,r.jsx)(t.a,{href:"https://day.js.org/docs/en/display/format",children:"dayjs format"})," of value label:"]}),"\n",(0,r.jsx)(n,{data:u}),"\n",(0,r.jsx)(t.h2,{id:"disabled-state",children:"Disabled state"}),"\n",(0,r.jsx)(n,{data:l}),"\n",(0,r.jsx)(t.h2,{id:"input-props",children:"Input props"}),"\n",(0,r.jsx)(h,{component:"DateTimePicker",element:"button"}),"\n",(0,r.jsx)(n,{data:c}),"\n",(0,r.jsx)(t.h2,{id:"clearable",children:"Clearable"}),"\n",(0,r.jsxs)(t.p,{children:["Set ",(0,r.jsx)(t.code,{children:"clearable"})," prop to display clear button in the right section. Note that if you set ",(0,r.jsx)(t.code,{children:"rightSection"}),"\nprop, clear button will not be displayed."]}),"\n",(0,r.jsx)(n,{data:d}),"\n",(0,r.jsx)(t.h2,{id:"open-picker-in-modal",children:"Open picker in modal"}),"\n",(0,r.jsxs)(t.p,{children:["By default, picker is rendered inside ",(0,r.jsx)(t.a,{href:"/core/popover/",children:"Popover"}),".\nYou can change that to ",(0,r.jsx)(t.a,{href:"/core/modal/",children:"Modal"})," by setting ",(0,r.jsx)(t.code,{children:'dropdownType="modal"'}),":"]}),"\n",(0,r.jsx)(n,{data:f}),"\n",(0,r.jsx)(a,{component:"DateTimePicker",refType:"button",package:"@mantine/dates"}),"\n",(0,r.jsx)(m,{component:"DateTimePicker",packageName:"@mantine/dates"})]})}function v(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(p,{...e,children:(0,r.jsx)(y,{...e})})}function g(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},76528:function(e,t,n){"use strict";n.d(t,{Mt:function(){return r},nW:function(){return i},pc:function(){return a}});let r=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"boolean",prop:"disabled",initialValue:!1,libraryValue:!1},{type:"boolean",prop:"error",initialValue:!1,libraryValue:!1}],i=[{type:"string",prop:"label",initialValue:"Input label",libraryValue:null},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:null},{type:"string",prop:"error",initialValue:"Input error",libraryValue:null},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"}],a=[{type:"segmented",prop:"variant",data:["default","filled","unstyled"],initialValue:"default",libraryValue:"default"},{type:"size",prop:"size",initialValue:"sm",libraryValue:"sm"},{type:"size",prop:"radius",initialValue:"sm",libraryValue:"sm"},{type:"string",prop:"label",initialValue:"Input label",libraryValue:""},{type:"boolean",prop:"withAsterisk",initialValue:!1,libraryValue:!1},{type:"string",prop:"description",initialValue:"Input description",libraryValue:""},{type:"string",prop:"error",initialValue:"",libraryValue:""}]},9882:function(e,t,n){"use strict";function r(e){let{maxLevel:t,minLevel:n,defaultLevel:r,level:i,onLevelChange:a,nextIcon:s,previousIcon:o,date:u,defaultDate:l,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:m,onYearSelect:h,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:g,onPreviousMonth:D,onNextYear:$,onPreviousYear:x,onNextDecade:b,onPreviousDecade:k,withCellSpacing:M,highlightToday:S,__updateDateOnYearSelect:T,__updateDateOnMonthSelect:j,firstDayOfWeek:w,weekdayFormat:P,weekendDays:O,getDayProps:_,excludeDate:C,renderDay:Y,hideOutsideDates:V,hideWeekdays:z,getDayAriaLabel:H,monthLabelFormat:I,monthsListFormat:N,getMonthControlProps:A,yearLabelFormat:W,yearsListFormat:L,getYearControlProps:U,decadeLabelFormat:F,allowSingleDateInRange:Z,allowDeselect:B,minDate:E,maxDate:J,locale:R,...q}=e;return{calendarProps:{maxLevel:t,minLevel:n,defaultLevel:r,level:i,onLevelChange:a,nextIcon:s,previousIcon:o,date:u,defaultDate:l,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:m,onYearSelect:h,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:g,onPreviousMonth:D,onNextYear:$,onPreviousYear:x,onNextDecade:b,onPreviousDecade:k,withCellSpacing:M,highlightToday:S,__updateDateOnYearSelect:T,__updateDateOnMonthSelect:j,firstDayOfWeek:w,weekdayFormat:P,weekendDays:O,getDayProps:_,excludeDate:C,renderDay:Y,hideOutsideDates:V,hideWeekdays:z,getDayAriaLabel:H,monthLabelFormat:I,monthsListFormat:N,getMonthControlProps:A,yearLabelFormat:W,yearsListFormat:L,getYearControlProps:U,decadeLabelFormat:F,allowSingleDateInRange:Z,allowDeselect:B,minDate:E,maxDate:J,locale:R},others:q}}n.d(t,{M:function(){return r}})},95488:function(e,t,n){"use strict";n.d(t,{M:function(){return f}});var r=n(52322),i=n(82027),a=n(38483),s=n(51477),o=n(82083),u=n(46766);n(28879);var l=n(51235);n(2784);var c=n(11204);let d={type:"default",defaultLevel:"month",numberOfColumns:1},f=(0,i.d5)((e,t)=>{let n=(0,a.w)("DatePicker",d,e),{classNames:i,styles:f,vars:m,type:h,defaultValue:p,value:y,onChange:v,__staticSelector:g,getDayProps:D,allowSingleDateInRange:$,allowDeselect:x,onMouseLeave:b,numberOfColumns:k,hideOutsideDates:M,__onDayMouseEnter:S,__onDayClick:T,__timezoneApplied:j,...w}=n,{onDateChange:P,onRootMouseLeave:O,onHoveredDateChange:_,getControlProps:C}=(0,o.D)({type:h,level:"day",allowDeselect:x,allowSingleDateInRange:$,value:y,defaultValue:p,onChange:v,onMouseLeave:b,applyTimezone:!j}),{resolvedClassNames:Y,resolvedStyles:V}=(0,s.h)({classNames:i,styles:f,props:n}),z=(0,u.e)();return(0,r.jsx)(c.f,{ref:t,minLevel:"month",classNames:Y,styles:V,__staticSelector:g||"DatePicker",onMouseLeave:O,numberOfColumns:k,hideOutsideDates:M??1!==k,__onDayMouseEnter:(e,t)=>{_(t),S?.(e,t)},__onDayClick:(e,t)=>{P(t),T?.(e,t)},getDayProps:e=>({...C(e),...D?.(e)}),...w,date:(0,l.w)("add",w.date,z.getTimezone(),j),__timezoneApplied:!0})});f.classes=c.f.classes,f.displayName="@mantine/dates/DatePicker"},59526:function(e,t,n){"use strict";n.d(t,{x:function(){return S}});var r=n(52322),i=n(28879),a=n(2784),s=n(82027),o=n(38483),u=n(46690),l=n(51477),c=n(54813),d=n(40284),f=n(70837),m=n(3900),h=n(71978),p=n(93141),y=n(46766),v=n(57888),g=n(51235),D=n(9882),$=n(95488),x=n(71686),b=n(35963),k={timeWrapper:"m_208d2562",timeInput:"m_62ee059"};let M={dropdownType:"popover"},S=(0,s.d5)((e,t)=>{let n=(0,o.w)("DateTimePicker",M,e),{value:s,defaultValue:S,onChange:T,valueFormat:j,locale:w,classNames:P,styles:O,unstyled:_,timeInputProps:C,submitButtonProps:Y,withSeconds:V,level:z,defaultLevel:H,size:I,variant:N,dropdownType:A,vars:W,minDate:L,maxDate:U,...F}=n,Z=(0,u.y)({name:"DateTimePicker",classes:k,props:n,classNames:P,styles:O,unstyled:_,vars:W}),{resolvedClassNames:B,resolvedStyles:E}=(0,l.h)({classNames:P,styles:O,props:n}),J=(0,a.useRef)(),R=(0,f.Yx)(J,C?.ref),{calendarProps:{allowSingleDateInRange:q,...K},others:X}=(0,D.M)(F),G=(0,y.e)(),[Q,ee]=(0,p.l)({type:"default",value:s,defaultValue:S,onChange:T}),et=e=>e?i(e).format(V?"HH:mm:ss":"HH:mm"):"",[en,er]=(0,a.useState)(et(Q)),[ei,ea]=(0,a.useState)(z||H||"month"),[es,eo]=(0,m.q)(!1),eu=Q?i(Q).locale(G.getLocale(w)).format(j||(V?"DD/MM/YYYY HH:mm:ss":"DD/MM/YYYY HH:mm")):"";(0,h.l)(()=>{es||er(et(Q))},[Q,es]),(0,h.l)(()=>{es&&ea("month")},[es]);let el=L?i(L).format("HH:mm:ss"):null,ec=U?i(U).format("HH:mm:ss"):null,ed="popover"===A;return(0,r.jsxs)(x.i,{formattedValue:eu,dropdownOpened:es,dropdownHandlers:eo,classNames:B,styles:E,unstyled:_,ref:t,onClear:()=>ee(null),shouldClear:!!Q,value:Q,size:I,variant:N,dropdownType:A,...X,type:"default",__staticSelector:"DateTimePicker",children:[(0,r.jsx)($.M,{...K,maxDate:U,minDate:L,size:I,variant:N,type:"default",value:Q,defaultDate:Q,onChange:e=>{e&&ee((0,v.o)(Q,e)),J.current?.focus()},locale:w,classNames:B,styles:E,unstyled:_,__staticSelector:"DateTimePicker",__stopPropagation:ed,level:z,defaultLevel:H,onLevelChange:e=>{ea(e),K.onLevelChange?.(e)},__timezoneApplied:!0}),"month"===ei&&(0,r.jsxs)("div",{...Z("timeWrapper"),children:[(0,r.jsx)(b.M,{value:en,withSeconds:V,ref:R,unstyled:_,minTime:Q&&L&&Q.toDateString()===L.toDateString()&&null!=el?el:void 0,maxTime:Q&&U&&Q.toDateString()===U.toDateString()&&null!=ec?ec:void 0,...C,...Z("timeInput",{className:C?.className,style:C?.style}),onChange:e=>{C?.onChange?.(e);let t=e.currentTarget.value;if(er(t),t){let[e,n,r]=t.split(":").map(Number),i=(0,g.w)("add",new Date,G.getTimezone());i.setHours(e),i.setMinutes(n),i.setSeconds(r||0),ee((0,v.o)(i,Q||(0,g.w)("add",new Date,G.getTimezone())))}},onKeyDown:e=>{C?.onKeyDown?.(e),"Enter"===e.key&&(e.preventDefault(),eo.close())},size:I,"data-mantine-stop-propagation":ed||void 0}),(0,r.jsx)(c.A,{variant:"default",size:`input-${I||"sm"}`,...Z("submitButton",{className:Y?.className,style:Y?.style}),unstyled:_,"data-mantine-stop-propagation":ed||void 0,children:(0,r.jsx)(d.n,{size:"30%"}),...Y,onClick:e=>{Y?.onClick?.(e),eo.close()}})]})]})});S.classes={...k,...x.i.classes,...$.M.classes},S.displayName="@mantine/dates/DateTimePicker"},20228:function(e,t,n){"use strict";n.d(t,{n:function(){return s}});var r=n(52322);n(28879);var i=n(51235),a=n(46766);function s({value:e,type:t,name:n,form:s}){return(0,r.jsx)("input",{type:"hidden",value:function(e,t){let n=(0,a.e)(),r=e=>(0,i.w)("remove",e,n.getTimezone()).toISOString();if("range"===t&&Array.isArray(e)){let[t,n]=e;return t?n?`${r(t)} \u2013 ${r(n)}`:`${r(t)} \u2013`:""}return"multiple"===t&&Array.isArray(e)?e.map(e=>e&&r(e)).filter(Boolean).join(", "):!Array.isArray(e)&&e?r(e):""}(e,t),name:n,form:s})}s.displayName="@mantine/dates/HiddenDatesInput"},71686:function(e,t,n){"use strict";n.d(t,{i:function(){return h}});var r=n(52322),i=n(40489),a=n(82027),s=n(7140),o=n(2670),u=n(78222),l=n(6941),c=n(50205),d=n(20228),f={input:"m_6fa5e2aa"};let m={},h=(0,a.d5)((e,t)=>{let{inputProps:n,wrapperProps:a,placeholder:h,classNames:p,styles:y,unstyled:v,popoverProps:g,modalProps:D,dropdownType:$,children:x,formattedValue:b,dropdownHandlers:k,dropdownOpened:M,onClick:S,clearable:T,onClear:j,clearButtonProps:w,rightSection:P,shouldClear:O,readOnly:_,disabled:C,value:Y,name:V,form:z,type:H,...I}=(0,s.k)("PickerInputBase",m,e),N=P||(T&&O&&!_&&!C?(0,r.jsx)(o.P,{variant:"transparent",onClick:j,unstyled:v,size:n.size||"sm",...w}):null),A=()=>{"range"===H&&Array.isArray(Y)&&Y[0]&&!Y[1]&&j(),k.close()};return(0,r.jsxs)(r.Fragment,{children:["modal"===$&&!_&&(0,r.jsx)(u.u,{opened:M,onClose:A,withCloseButton:!1,size:"auto","data-dates-modal":!0,unstyled:v,...D,children:x}),(0,r.jsx)(l.I.Wrapper,{...a,children:(0,r.jsxs)(c.J,{position:"bottom-start",opened:M,trapFocus:!0,returnFocus:!0,unstyled:v,...g,disabled:g?.disabled||"modal"===$||_,onChange:e=>{e||(g?.onClose?.(),A())},children:[(0,r.jsx)(c.J.Target,{children:(0,r.jsx)(l.I,{"data-dates-input":!0,"data-read-only":_||void 0,disabled:C,component:"button",type:"button",multiline:!0,onClick:e=>{S?.(e),k.toggle()},rightSection:N,...n,ref:t,classNames:{...p,input:(0,i.Z)(f.input,p?.input)},...I,children:b||(0,r.jsx)(l.I.Placeholder,{error:n.error,unstyled:v,className:p?.placeholder,style:y?.placeholder,children:h})})}),(0,r.jsx)(c.J.Dropdown,{"data-dates-dropdown":!0,children:x})]})}),(0,r.jsx)(d.n,{value:Y,name:V,form:z,type:H})]})});h.classes=f,h.displayName="@mantine/dates/PickerInputBase"},35963:function(e,t,n){"use strict";n.d(t,{M:function(){return c}});var r=n(52322),i=n(40489),a=n(82027),s=n(38483),o=n(51477),u=n(73063);let l={},c=(0,a.d5)((e,t)=>{let n=(0,s.w)("TimeInput",l,e),{classNames:a,styles:c,unstyled:d,vars:f,withSeconds:m,minTime:h,maxTime:p,value:y,onChange:v,...g}=n,{resolvedClassNames:D,resolvedStyles:$}=(0,o.h)({classNames:a,styles:c,props:n}),x=e=>{if(void 0!==h||void 0!==p){let[t,n,r]=e.split(":").map(Number);if(h){let[e,i,a]=h.split(":").map(Number);if(te||t===e&&n>i||m&&t===e&&n===i&&r>a)return 1}}return 0};return(0,r.jsx)(u.M,{classNames:{...D,input:(0,i.Z)("m_468e7eda",D?.input)},styles:$,unstyled:d,ref:t,value:y,...g,step:m?1:60,onChange:v,onBlur:e=>{if(n.onBlur?.(e),void 0!==h||void 0!==p){let t=e.currentTarget.value;if(t){let r=x(t);1===r?(e.currentTarget.value=p,n.onChange?.(e)):-1===r&&(e.currentTarget.value=h,n.onChange?.(e))}}},type:"time",__staticSelector:"TimeInput"})});c.classes=u.M.classes,c.displayName="@mantine/dates/TimeInput"},82083:function(e,t,n){"use strict";n.d(t,{D:function(){return o}});var r=n(28879),i=n(2784),a=n(93141);function s(e,t){let n=[...t].sort((e,t)=>e.getTime()-t.getTime());return r(n[0]).startOf("day").subtract(1,"ms").isBefore(e)&&r(n[1]).endOf("day").add(1,"ms").isAfter(e)}function o({type:e,level:t,value:n,defaultValue:o,onChange:u,allowSingleDateInRange:l,allowDeselect:c,onMouseLeave:d,applyTimezone:f=!0}){let[m,h]=(0,a.l)({type:e,value:n,defaultValue:o,onChange:u,applyTimezone:f}),[p,y]=(0,i.useState)("range"===e&&m[0]&&!m[1]?m[0]:null),[v,g]=(0,i.useState)(null),D=e=>p instanceof Date&&v instanceof Date?s(e,[v,p]):m[0]instanceof Date&&m[1]instanceof Date&&s(e,m),$="range"===e?e=>{d?.(e),g(null)}:d,x=e=>m[0]instanceof Date&&!!r(e).isSame(m[0],t)&&!(v&&r(v).isBefore(m[0])),b=e=>m[1]instanceof Date?r(e).isSame(m[1],t):m[0]instanceof Date&&!!v&&r(v).isBefore(m[0])&&r(e).isSame(m[0],t),k="range"===e&&p?g:()=>{};return(0,i.useEffect)(()=>{if("range"!==e)return;let t=null==m[0]&&null==m[1],n=null!=m[0]&&null!=m[1];(t||n)&&(y(null),g(null))},[m]),{onDateChange:n=>{if("range"===e){if(p instanceof Date&&!m[1]){if(r(n).isSame(p,t)&&!l){y(null),g(null),h([null,null]);return}let e=[n,p];e.sort((e,t)=>e.getTime()-t.getTime()),h(e),g(null),y(null);return}if(m[0]&&!m[1]&&r(n).isSame(m[0],t)&&!l){y(null),g(null),h([null,null]);return}h([n,null]),g(null),y(n);return}if("multiple"===e){m.some(e=>r(e).isSame(n,t))?h(m.filter(e=>!r(e).isSame(n,t))):h([...m,n]);return}m&&c&&r(n).isSame(m,t)?h(null):h(n)},onRootMouseLeave:$,onHoveredDateChange:k,getControlProps:n=>{if("range"===e)return{selected:m.some(e=>e&&r(e).isSame(n,t)),inRange:D(n),firstInRange:x(n),lastInRange:b(n),"data-autofocus":!!m[0]&&r(m[0]).isSame(n,t)||void 0};if("multiple"===e)return{selected:m.some(e=>e&&r(e).isSame(n,t)),"data-autofocus":!!m[0]&&r(m[0]).isSame(n,t)||void 0};let i=r(m).isSame(n,t);return{selected:i,"data-autofocus":i||void 0}},_value:m,setValue:h}}},57888:function(e,t,n){"use strict";function r(e,t){if(!e||!t)return t;let n=e.getHours(),r=e.getMinutes(),i=e.getSeconds(),a=e.getMilliseconds(),s=new Date(t);return s.setHours(n),s.setMinutes(r),s.setSeconds(i),s.setMilliseconds(a),s}n.d(t,{o:function(){return r}})},3900:function(e,t,n){"use strict";n.d(t,{q:function(){return i}});var r=n(2784);function i(e=!1,t){let{onOpen:n,onClose:i}=t||{},[a,s]=(0,r.useState)(e),o=(0,r.useCallback)(()=>{s(e=>e||(n?.(),!0))},[n]),u=(0,r.useCallback)(()=>{s(e=>e?(i?.(),!1):e)},[i]),l=(0,r.useCallback)(()=>{a?u():o()},[u,o,a]);return[a,{open:o,close:u,toggle:l}]}}},function(e){e.O(0,[61177,66748,11340,11204,92888,49774,40179],function(){return e(e.s=66022)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/dates/month-picker-input-8ddcea75b3345e88.js b/_next/static/chunks/pages/dates/month-picker-input-708d369fcbcdea9f.js similarity index 86% rename from _next/static/chunks/pages/dates/month-picker-input-8ddcea75b3345e88.js rename to _next/static/chunks/pages/dates/month-picker-input-708d369fcbcdea9f.js index f113741d0f9..c87b92d7229 100644 --- a/_next/static/chunks/pages/dates/month-picker-input-8ddcea75b3345e88.js +++ b/_next/static/chunks/pages/dates/month-picker-input-708d369fcbcdea9f.js @@ -166,4 +166,4 @@ function Demo() { /> ); } -`,y=({type:e,date:t,locale:n,format:r})=>{if("multiple"===e&&Array.isArray(t)){if(1===t.length)return m(t[0]).locale(n).format(r);if(t.length>1)return`${t.length} dates selected`}return""};function v(e){return{usage:{type:"code",centered:!0,maxWidth:400,code:h(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},multiple:{type:"code",centered:!0,maxWidth:400,code:d(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([]);return(0,r.jsx)(e,{type:"multiple",label:"Pick dates",placeholder:"Pick dates",value:t,onChange:n})}},range:{type:"code",centered:!0,maxWidth:400,code:f(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([null,null]);return(0,r.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:i(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:c(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{dropdownType:"modal",label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},icon:{type:"code",centered:!0,maxWidth:400,code:u(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{leftSection:(0,r.jsx)(o.Z,{style:{width:(0,l.h)(18),height:(0,l.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:a(e.displayName.replace("@mantine/dates/","")),component:()=>(0,r.jsx)(e,{clearable:!0,defaultValue:new Date,label:"Pick date",placeholder:"Pick date"})},valueFormatter:{type:"code",centered:!0,maxWidth:400,code:p(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([]);return(0,r.jsx)(e,{label:"Pick 2 dates or more",placeholder:"Pick 2 dates or more",value:t,onChange:n,type:"multiple",valueFormatter:y})}}}}},9882:function(e,t,n){"use strict";function r(e){let{maxLevel:t,minLevel:n,defaultLevel:r,level:a,onLevelChange:i,nextIcon:s,previousIcon:o,date:l,defaultDate:u,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:h,onYearSelect:m,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:$,onPreviousMonth:g,onNextYear:x,onPreviousYear:D,onNextDecade:M,onPreviousDecade:S,withCellSpacing:k,highlightToday:b,__updateDateOnYearSelect:j,__updateDateOnMonthSelect:P,firstDayOfWeek:w,weekdayFormat:O,weekendDays:C,getDayProps:T,excludeDate:Y,renderDay:_,hideOutsideDates:I,hideWeekdays:V,getDayAriaLabel:N,monthLabelFormat:z,monthsListFormat:A,getMonthControlProps:F,yearLabelFormat:W,yearsListFormat:H,getYearControlProps:L,decadeLabelFormat:U,allowSingleDateInRange:E,allowDeselect:Z,minDate:B,maxDate:J,locale:R,...q}=e;return{calendarProps:{maxLevel:t,minLevel:n,defaultLevel:r,level:a,onLevelChange:i,nextIcon:s,previousIcon:o,date:l,defaultDate:u,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:h,onYearSelect:m,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:$,onPreviousMonth:g,onNextYear:x,onPreviousYear:D,onNextDecade:M,onPreviousDecade:S,withCellSpacing:k,highlightToday:b,__updateDateOnYearSelect:j,__updateDateOnMonthSelect:P,firstDayOfWeek:w,weekdayFormat:O,weekendDays:C,getDayProps:T,excludeDate:Y,renderDay:_,hideOutsideDates:I,hideWeekdays:V,getDayAriaLabel:N,monthLabelFormat:z,monthsListFormat:A,getMonthControlProps:F,yearLabelFormat:W,yearsListFormat:H,getYearControlProps:L,decadeLabelFormat:U,allowSingleDateInRange:E,allowDeselect:Z,minDate:B,maxDate:J,locale:R},others:q}}n.d(t,{M:function(){return r}})},20228:function(e,t,n){"use strict";n.d(t,{n:function(){return s}});var r=n(52322);n(28879);var a=n(51235),i=n(46766);function s({value:e,type:t,name:n,form:s}){return(0,r.jsx)("input",{type:"hidden",value:function(e,t){let n=(0,i.e)(),r=e=>(0,a.w)("remove",e,n.getTimezone()).toISOString();if("range"===t&&Array.isArray(e)){let[t,n]=e;return t?n?`${r(t)} \u2013 ${r(n)}`:`${r(t)} \u2013`:""}return"multiple"===t&&Array.isArray(e)?e.map(e=>e&&r(e)).filter(Boolean).join(", "):!Array.isArray(e)&&e?r(e):""}(e,t),name:n,form:s})}s.displayName="@mantine/dates/HiddenDatesInput"},87871:function(e,t,n){"use strict";n.d(t,{l:function(){return f}});var r=n(52322),a=n(82027),i=n(38483),s=n(51477),o=n(82083),l=n(46766);n(28879);var u=n(51235);n(2784);var c=n(11204);let d={type:"default"},f=(0,a.d5)((e,t)=>{let n=(0,i.w)("MonthPicker",d,e),{classNames:a,styles:f,vars:h,type:m,defaultValue:p,value:y,onChange:v,__staticSelector:$,getMonthControlProps:g,allowSingleDateInRange:x,allowDeselect:D,onMouseLeave:M,onMonthSelect:S,__updateDateOnMonthSelect:k,__timezoneApplied:b,onLevelChange:j,...P}=n,{onDateChange:w,onRootMouseLeave:O,onHoveredDateChange:C,getControlProps:T}=(0,o.D)({type:m,level:"month",allowDeselect:D,allowSingleDateInRange:x,value:y,defaultValue:p,onChange:v,onMouseLeave:M,applyTimezone:!b}),{resolvedClassNames:Y,resolvedStyles:_}=(0,s.h)({classNames:a,styles:f,props:n}),I=(0,l.e)();return(0,r.jsx)(c.f,{ref:t,minLevel:"year",__updateDateOnMonthSelect:k??!1,__staticSelector:$||"MonthPicker",onMouseLeave:O,onMonthMouseEnter:(e,t)=>C(t),onMonthSelect:e=>{w(e),S?.(e)},getMonthControlProps:e=>({...T(e),...g?.(e)}),classNames:Y,styles:_,onLevelChange:j,...P,date:(0,u.w)("add",P.date,I.getTimezone(),b)})});f.classes=c.f.classes,f.displayName="@mantine/dates/MonthPicker"},71082:function(e,t,n){"use strict";n.d(t,{J:function(){return p}});var r=n(52322),a=n(82027),i=n(38483),s=n(51477);n(28879),n(2784);var o=n(46766),l=n(93893),u=n(51235),c=n(26005),d=n(9882),f=n(87871),h=n(71686);let m={type:"default",valueFormat:"MMMM YYYY",closeOnChange:!0,sortDates:!0,dropdownType:"popover"},p=(0,a.d5)((e,t)=>{let n=(0,i.w)("MonthPickerInput",m,e),{type:a,value:p,defaultValue:y,onChange:v,valueFormat:$,labelSeparator:g,locale:x,classNames:D,styles:M,unstyled:S,closeOnChange:k,size:b,variant:j,dropdownType:P,sortDates:w,minDate:O,maxDate:C,vars:T,valueFormatter:Y,..._}=n,{resolvedClassNames:I,resolvedStyles:V}=(0,s.h)({classNames:D,styles:M,props:n}),{calendarProps:N,others:z}=(0,d.M)(_),{_value:A,setValue:F,formattedValue:W,dropdownHandlers:H,dropdownOpened:L,onClear:U,shouldClear:E}=(0,c.u)({type:a,value:p,defaultValue:y,onChange:v,locale:x,format:$,labelSeparator:g,closeOnChange:k,sortDates:w,valueFormatter:Y}),Z=(0,o.e)();return(0,r.jsx)(h.i,{formattedValue:W,dropdownOpened:L,dropdownHandlers:H,classNames:I,styles:V,unstyled:S,ref:t,onClear:U,shouldClear:E,value:A,size:b,variant:j,dropdownType:P,...z,type:a,__staticSelector:"MonthPickerInput",children:(0,r.jsx)(f.l,{...N,date:(0,u.w)("add",N.date,Z.getTimezone()),size:b,variant:j,type:a,value:A,defaultDate:Array.isArray(A)?A[0]||(0,l.S)({maxDate:C,minDate:O}):A||(0,l.S)({maxDate:C,minDate:O}),onChange:F,locale:x,classNames:I,styles:V,unstyled:S,__staticSelector:"MonthPickerInput",__stopPropagation:"popover"===P,minDate:O,maxDate:C,__timezoneApplied:!0})})});p.classes={...h.i.classes,...f.l.classes},p.displayName="@mantine/dates/MonthPickerInput"},71686:function(e,t,n){"use strict";n.d(t,{i:function(){return m}});var r=n(52322),a=n(40489),i=n(82027),s=n(7140),o=n(2670),l=n(78222),u=n(6941),c=n(50205),d=n(20228),f={input:"m_6fa5e2aa"};let h={},m=(0,i.d5)((e,t)=>{let{inputProps:n,wrapperProps:i,placeholder:m,classNames:p,styles:y,unstyled:v,popoverProps:$,modalProps:g,dropdownType:x,children:D,formattedValue:M,dropdownHandlers:S,dropdownOpened:k,onClick:b,clearable:j,onClear:P,clearButtonProps:w,rightSection:O,shouldClear:C,readOnly:T,disabled:Y,value:_,name:I,form:V,type:N,...z}=(0,s.k)("PickerInputBase",h,e),A=O||(j&&C&&!T&&!Y?(0,r.jsx)(o.P,{variant:"transparent",onClick:P,unstyled:v,size:n.size||"sm",...w}):null),F=()=>{"range"===N&&Array.isArray(_)&&_[0]&&!_[1]&&P(),S.close()};return(0,r.jsxs)(r.Fragment,{children:["modal"===x&&!T&&(0,r.jsx)(l.u,{opened:k,onClose:F,withCloseButton:!1,size:"auto","data-dates-modal":!0,unstyled:v,...g,children:D}),(0,r.jsx)(u.I.Wrapper,{...i,children:(0,r.jsxs)(c.J,{position:"bottom-start",opened:k,trapFocus:!0,returnFocus:!0,unstyled:v,...$,disabled:$?.disabled||"modal"===x||T,onClose:()=>{$?.onClose?.(),F()},children:[(0,r.jsx)(c.J.Target,{children:(0,r.jsx)(u.I,{"data-dates-input":!0,"data-read-only":T||void 0,disabled:Y,component:"button",type:"button",multiline:!0,onClick:e=>{b?.(e),S.toggle()},rightSection:A,...n,ref:t,classNames:{...p,input:(0,a.Z)(f.input,p?.input)},...z,children:M||(0,r.jsx)(u.I.Placeholder,{error:n.error,unstyled:v,className:p?.placeholder,style:y?.placeholder,children:m})})}),(0,r.jsx)(c.J.Dropdown,{"data-dates-dropdown":!0,children:D})]})}),(0,r.jsx)(d.n,{value:_,name:I,form:V,type:N})]})});m.classes=f,m.displayName="@mantine/dates/PickerInputBase"},26005:function(e,t,n){"use strict";n.d(t,{u:function(){return o}});var r=n(3900),a=n(46766),i=n(28879),s=n(93141);function o({type:e,value:t,defaultValue:n,onChange:o,locale:l,format:u,closeOnChange:c,sortDates:d,labelSeparator:f,valueFormatter:h}){let m=(0,a.e)(),[p,y]=(0,r.q)(!1),[v,$]=(0,s.l)({type:e,value:t,defaultValue:n,onChange:o}),g=function({formatter:e,...t}){return(e||function({type:e,date:t,locale:n,format:r,labelSeparator:a}){let s=e=>i(e).locale(n).format(r);if("default"===e)return null===t?"":s(t);if("multiple"===e)return t.map(s).join(", ");if("range"===e&&Array.isArray(t)){if(t[0]&&t[1])return`${s(t[0])} ${a} ${s(t[1])}`;if(t[0])return`${s(t[0])} ${a} `}return""})(t)}({type:e,date:v,locale:m.getLocale(l),format:u,labelSeparator:m.getLabelSeparator(f),formatter:h}),x=t=>{c&&("default"===e&&y.close(),"range"===e&&t[0]&&t[1]&&y.close()),d&&"multiple"===e?$([...t].sort((e,t)=>e.getTime()-t.getTime())):$(t)},D="range"===e?!!v[0]:"multiple"===e?v.length>0:null!==v;return{_value:v,setValue:x,onClear:()=>x("range"===e?[null,null]:"multiple"===e?[]:null),shouldClear:D,formattedValue:g,dropdownOpened:p,dropdownHandlers:y}}},82083:function(e,t,n){"use strict";n.d(t,{D:function(){return o}});var r=n(28879),a=n(2784),i=n(93141);function s(e,t){let n=[...t].sort((e,t)=>e.getTime()-t.getTime());return r(n[0]).startOf("day").subtract(1,"ms").isBefore(e)&&r(n[1]).endOf("day").add(1,"ms").isAfter(e)}function o({type:e,level:t,value:n,defaultValue:o,onChange:l,allowSingleDateInRange:u,allowDeselect:c,onMouseLeave:d,applyTimezone:f=!0}){let[h,m]=(0,i.l)({type:e,value:n,defaultValue:o,onChange:l,applyTimezone:f}),[p,y]=(0,a.useState)("range"===e&&h[0]&&!h[1]?h[0]:null),[v,$]=(0,a.useState)(null),g=e=>p instanceof Date&&v instanceof Date?s(e,[v,p]):h[0]instanceof Date&&h[1]instanceof Date&&s(e,h),x="range"===e?e=>{d?.(e),$(null)}:d,D=e=>h[0]instanceof Date&&!!r(e).isSame(h[0],t)&&!(v&&r(v).isBefore(h[0])),M=e=>h[1]instanceof Date?r(e).isSame(h[1],t):h[0]instanceof Date&&!!v&&r(v).isBefore(h[0])&&r(e).isSame(h[0],t),S="range"===e&&p?$:()=>{};return(0,a.useEffect)(()=>{if("range"!==e)return;let t=null==h[0]&&null==h[1],n=null!=h[0]&&null!=h[1];(t||n)&&(y(null),$(null))},[h]),{onDateChange:n=>{if("range"===e){if(p instanceof Date&&!h[1]){if(r(n).isSame(p,t)&&!u){y(null),$(null),m([null,null]);return}let e=[n,p];e.sort((e,t)=>e.getTime()-t.getTime()),m(e),$(null),y(null);return}if(h[0]&&!h[1]&&r(n).isSame(h[0],t)&&!u){y(null),$(null),m([null,null]);return}m([n,null]),$(null),y(n);return}if("multiple"===e){h.some(e=>r(e).isSame(n,t))?m(h.filter(e=>!r(e).isSame(n,t))):m([...h,n]);return}h&&c&&r(n).isSame(h,t)?m(null):m(n)},onRootMouseLeave:x,onHoveredDateChange:S,getControlProps:n=>{if("range"===e)return{selected:h.some(e=>e&&r(e).isSame(n,t)),inRange:g(n),firstInRange:D(n),lastInRange:M(n),"data-autofocus":!!h[0]&&r(h[0]).isSame(n,t)||void 0};if("multiple"===e)return{selected:h.some(e=>e&&r(e).isSame(n,t)),"data-autofocus":!!h[0]&&r(h[0]).isSame(n,t)||void 0};let a=r(h).isSame(n,t);return{selected:a,"data-autofocus":a||void 0}},_value:h,setValue:m}}},93893:function(e,t,n){"use strict";n.d(t,{S:function(){return i}});var r=n(28879),a=n(51235);function i({minDate:e,maxDate:t,timezone:n}){let i=(0,a.w)("add",new Date,n);return e||t?e&&r(i).isBefore(e)?e:t&&r(i).isAfter(t)?t:i:i}},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,s]=(0,r.useState)(e),o=(0,r.useCallback)(()=>{s(e=>e||(n?.(),!0))},[n]),l=(0,r.useCallback)(()=>{s(e=>e?(a?.(),!1):e)},[a]),u=(0,r.useCallback)(()=>{i?l():o()},[l,o,i]);return[i,{open:o,close:l,toggle:u}]}}},function(e){e.O(0,[61177,66748,11340,11204,92888,49774,40179],function(){return e(e.s=67300)}),_N_E=e.O()}]); \ No newline at end of file +`,y=({type:e,date:t,locale:n,format:r})=>{if("multiple"===e&&Array.isArray(t)){if(1===t.length)return m(t[0]).locale(n).format(r);if(t.length>1)return`${t.length} dates selected`}return""};function v(e){return{usage:{type:"code",centered:!0,maxWidth:400,code:h(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},multiple:{type:"code",centered:!0,maxWidth:400,code:d(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([]);return(0,r.jsx)(e,{type:"multiple",label:"Pick dates",placeholder:"Pick dates",value:t,onChange:n})}},range:{type:"code",centered:!0,maxWidth:400,code:f(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([null,null]);return(0,r.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:i(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:c(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{dropdownType:"modal",label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},icon:{type:"code",centered:!0,maxWidth:400,code:u(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{leftSection:(0,r.jsx)(o.Z,{style:{width:(0,l.h)(18),height:(0,l.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:a(e.displayName.replace("@mantine/dates/","")),component:()=>(0,r.jsx)(e,{clearable:!0,defaultValue:new Date,label:"Pick date",placeholder:"Pick date"})},valueFormatter:{type:"code",centered:!0,maxWidth:400,code:p(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([]);return(0,r.jsx)(e,{label:"Pick 2 dates or more",placeholder:"Pick 2 dates or more",value:t,onChange:n,type:"multiple",valueFormatter:y})}}}}},9882:function(e,t,n){"use strict";function r(e){let{maxLevel:t,minLevel:n,defaultLevel:r,level:a,onLevelChange:i,nextIcon:s,previousIcon:o,date:l,defaultDate:u,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:h,onYearSelect:m,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:$,onPreviousMonth:g,onNextYear:x,onPreviousYear:D,onNextDecade:M,onPreviousDecade:S,withCellSpacing:k,highlightToday:b,__updateDateOnYearSelect:j,__updateDateOnMonthSelect:P,firstDayOfWeek:w,weekdayFormat:O,weekendDays:C,getDayProps:T,excludeDate:Y,renderDay:_,hideOutsideDates:I,hideWeekdays:V,getDayAriaLabel:N,monthLabelFormat:z,monthsListFormat:A,getMonthControlProps:F,yearLabelFormat:W,yearsListFormat:H,getYearControlProps:L,decadeLabelFormat:U,allowSingleDateInRange:E,allowDeselect:Z,minDate:B,maxDate:J,locale:R,...q}=e;return{calendarProps:{maxLevel:t,minLevel:n,defaultLevel:r,level:a,onLevelChange:i,nextIcon:s,previousIcon:o,date:l,defaultDate:u,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:h,onYearSelect:m,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:v,onNextMonth:$,onPreviousMonth:g,onNextYear:x,onPreviousYear:D,onNextDecade:M,onPreviousDecade:S,withCellSpacing:k,highlightToday:b,__updateDateOnYearSelect:j,__updateDateOnMonthSelect:P,firstDayOfWeek:w,weekdayFormat:O,weekendDays:C,getDayProps:T,excludeDate:Y,renderDay:_,hideOutsideDates:I,hideWeekdays:V,getDayAriaLabel:N,monthLabelFormat:z,monthsListFormat:A,getMonthControlProps:F,yearLabelFormat:W,yearsListFormat:H,getYearControlProps:L,decadeLabelFormat:U,allowSingleDateInRange:E,allowDeselect:Z,minDate:B,maxDate:J,locale:R},others:q}}n.d(t,{M:function(){return r}})},20228:function(e,t,n){"use strict";n.d(t,{n:function(){return s}});var r=n(52322);n(28879);var a=n(51235),i=n(46766);function s({value:e,type:t,name:n,form:s}){return(0,r.jsx)("input",{type:"hidden",value:function(e,t){let n=(0,i.e)(),r=e=>(0,a.w)("remove",e,n.getTimezone()).toISOString();if("range"===t&&Array.isArray(e)){let[t,n]=e;return t?n?`${r(t)} \u2013 ${r(n)}`:`${r(t)} \u2013`:""}return"multiple"===t&&Array.isArray(e)?e.map(e=>e&&r(e)).filter(Boolean).join(", "):!Array.isArray(e)&&e?r(e):""}(e,t),name:n,form:s})}s.displayName="@mantine/dates/HiddenDatesInput"},87871:function(e,t,n){"use strict";n.d(t,{l:function(){return f}});var r=n(52322),a=n(82027),i=n(38483),s=n(51477),o=n(82083),l=n(46766);n(28879);var u=n(51235);n(2784);var c=n(11204);let d={type:"default"},f=(0,a.d5)((e,t)=>{let n=(0,i.w)("MonthPicker",d,e),{classNames:a,styles:f,vars:h,type:m,defaultValue:p,value:y,onChange:v,__staticSelector:$,getMonthControlProps:g,allowSingleDateInRange:x,allowDeselect:D,onMouseLeave:M,onMonthSelect:S,__updateDateOnMonthSelect:k,__timezoneApplied:b,onLevelChange:j,...P}=n,{onDateChange:w,onRootMouseLeave:O,onHoveredDateChange:C,getControlProps:T}=(0,o.D)({type:m,level:"month",allowDeselect:D,allowSingleDateInRange:x,value:y,defaultValue:p,onChange:v,onMouseLeave:M,applyTimezone:!b}),{resolvedClassNames:Y,resolvedStyles:_}=(0,s.h)({classNames:a,styles:f,props:n}),I=(0,l.e)();return(0,r.jsx)(c.f,{ref:t,minLevel:"year",__updateDateOnMonthSelect:k??!1,__staticSelector:$||"MonthPicker",onMouseLeave:O,onMonthMouseEnter:(e,t)=>C(t),onMonthSelect:e=>{w(e),S?.(e)},getMonthControlProps:e=>({...T(e),...g?.(e)}),classNames:Y,styles:_,onLevelChange:j,...P,date:(0,u.w)("add",P.date,I.getTimezone(),b)})});f.classes=c.f.classes,f.displayName="@mantine/dates/MonthPicker"},71082:function(e,t,n){"use strict";n.d(t,{J:function(){return p}});var r=n(52322),a=n(82027),i=n(38483),s=n(51477);n(28879),n(2784);var o=n(46766),l=n(93893),u=n(51235),c=n(26005),d=n(9882),f=n(87871),h=n(71686);let m={type:"default",valueFormat:"MMMM YYYY",closeOnChange:!0,sortDates:!0,dropdownType:"popover"},p=(0,a.d5)((e,t)=>{let n=(0,i.w)("MonthPickerInput",m,e),{type:a,value:p,defaultValue:y,onChange:v,valueFormat:$,labelSeparator:g,locale:x,classNames:D,styles:M,unstyled:S,closeOnChange:k,size:b,variant:j,dropdownType:P,sortDates:w,minDate:O,maxDate:C,vars:T,valueFormatter:Y,..._}=n,{resolvedClassNames:I,resolvedStyles:V}=(0,s.h)({classNames:D,styles:M,props:n}),{calendarProps:N,others:z}=(0,d.M)(_),{_value:A,setValue:F,formattedValue:W,dropdownHandlers:H,dropdownOpened:L,onClear:U,shouldClear:E}=(0,c.u)({type:a,value:p,defaultValue:y,onChange:v,locale:x,format:$,labelSeparator:g,closeOnChange:k,sortDates:w,valueFormatter:Y}),Z=(0,o.e)();return(0,r.jsx)(h.i,{formattedValue:W,dropdownOpened:L,dropdownHandlers:H,classNames:I,styles:V,unstyled:S,ref:t,onClear:U,shouldClear:E,value:A,size:b,variant:j,dropdownType:P,...z,type:a,__staticSelector:"MonthPickerInput",children:(0,r.jsx)(f.l,{...N,date:(0,u.w)("add",N.date,Z.getTimezone()),size:b,variant:j,type:a,value:A,defaultDate:Array.isArray(A)?A[0]||(0,l.S)({maxDate:C,minDate:O}):A||(0,l.S)({maxDate:C,minDate:O}),onChange:F,locale:x,classNames:I,styles:V,unstyled:S,__staticSelector:"MonthPickerInput",__stopPropagation:"popover"===P,minDate:O,maxDate:C,__timezoneApplied:!0})})});p.classes={...h.i.classes,...f.l.classes},p.displayName="@mantine/dates/MonthPickerInput"},71686:function(e,t,n){"use strict";n.d(t,{i:function(){return m}});var r=n(52322),a=n(40489),i=n(82027),s=n(7140),o=n(2670),l=n(78222),u=n(6941),c=n(50205),d=n(20228),f={input:"m_6fa5e2aa"};let h={},m=(0,i.d5)((e,t)=>{let{inputProps:n,wrapperProps:i,placeholder:m,classNames:p,styles:y,unstyled:v,popoverProps:$,modalProps:g,dropdownType:x,children:D,formattedValue:M,dropdownHandlers:S,dropdownOpened:k,onClick:b,clearable:j,onClear:P,clearButtonProps:w,rightSection:O,shouldClear:C,readOnly:T,disabled:Y,value:_,name:I,form:V,type:N,...z}=(0,s.k)("PickerInputBase",h,e),A=O||(j&&C&&!T&&!Y?(0,r.jsx)(o.P,{variant:"transparent",onClick:P,unstyled:v,size:n.size||"sm",...w}):null),F=()=>{"range"===N&&Array.isArray(_)&&_[0]&&!_[1]&&P(),S.close()};return(0,r.jsxs)(r.Fragment,{children:["modal"===x&&!T&&(0,r.jsx)(l.u,{opened:k,onClose:F,withCloseButton:!1,size:"auto","data-dates-modal":!0,unstyled:v,...g,children:D}),(0,r.jsx)(u.I.Wrapper,{...i,children:(0,r.jsxs)(c.J,{position:"bottom-start",opened:k,trapFocus:!0,returnFocus:!0,unstyled:v,...$,disabled:$?.disabled||"modal"===x||T,onChange:e=>{e||($?.onClose?.(),F())},children:[(0,r.jsx)(c.J.Target,{children:(0,r.jsx)(u.I,{"data-dates-input":!0,"data-read-only":T||void 0,disabled:Y,component:"button",type:"button",multiline:!0,onClick:e=>{b?.(e),S.toggle()},rightSection:A,...n,ref:t,classNames:{...p,input:(0,a.Z)(f.input,p?.input)},...z,children:M||(0,r.jsx)(u.I.Placeholder,{error:n.error,unstyled:v,className:p?.placeholder,style:y?.placeholder,children:m})})}),(0,r.jsx)(c.J.Dropdown,{"data-dates-dropdown":!0,children:D})]})}),(0,r.jsx)(d.n,{value:_,name:I,form:V,type:N})]})});m.classes=f,m.displayName="@mantine/dates/PickerInputBase"},26005:function(e,t,n){"use strict";n.d(t,{u:function(){return o}});var r=n(3900),a=n(46766),i=n(28879),s=n(93141);function o({type:e,value:t,defaultValue:n,onChange:o,locale:l,format:u,closeOnChange:c,sortDates:d,labelSeparator:f,valueFormatter:h}){let m=(0,a.e)(),[p,y]=(0,r.q)(!1),[v,$]=(0,s.l)({type:e,value:t,defaultValue:n,onChange:o}),g=function({formatter:e,...t}){return(e||function({type:e,date:t,locale:n,format:r,labelSeparator:a}){let s=e=>i(e).locale(n).format(r);if("default"===e)return null===t?"":s(t);if("multiple"===e)return t.map(s).join(", ");if("range"===e&&Array.isArray(t)){if(t[0]&&t[1])return`${s(t[0])} ${a} ${s(t[1])}`;if(t[0])return`${s(t[0])} ${a} `}return""})(t)}({type:e,date:v,locale:m.getLocale(l),format:u,labelSeparator:m.getLabelSeparator(f),formatter:h}),x=t=>{c&&("default"===e&&y.close(),"range"===e&&t[0]&&t[1]&&y.close()),d&&"multiple"===e?$([...t].sort((e,t)=>e.getTime()-t.getTime())):$(t)},D="range"===e?!!v[0]:"multiple"===e?v.length>0:null!==v;return{_value:v,setValue:x,onClear:()=>x("range"===e?[null,null]:"multiple"===e?[]:null),shouldClear:D,formattedValue:g,dropdownOpened:p,dropdownHandlers:y}}},82083:function(e,t,n){"use strict";n.d(t,{D:function(){return o}});var r=n(28879),a=n(2784),i=n(93141);function s(e,t){let n=[...t].sort((e,t)=>e.getTime()-t.getTime());return r(n[0]).startOf("day").subtract(1,"ms").isBefore(e)&&r(n[1]).endOf("day").add(1,"ms").isAfter(e)}function o({type:e,level:t,value:n,defaultValue:o,onChange:l,allowSingleDateInRange:u,allowDeselect:c,onMouseLeave:d,applyTimezone:f=!0}){let[h,m]=(0,i.l)({type:e,value:n,defaultValue:o,onChange:l,applyTimezone:f}),[p,y]=(0,a.useState)("range"===e&&h[0]&&!h[1]?h[0]:null),[v,$]=(0,a.useState)(null),g=e=>p instanceof Date&&v instanceof Date?s(e,[v,p]):h[0]instanceof Date&&h[1]instanceof Date&&s(e,h),x="range"===e?e=>{d?.(e),$(null)}:d,D=e=>h[0]instanceof Date&&!!r(e).isSame(h[0],t)&&!(v&&r(v).isBefore(h[0])),M=e=>h[1]instanceof Date?r(e).isSame(h[1],t):h[0]instanceof Date&&!!v&&r(v).isBefore(h[0])&&r(e).isSame(h[0],t),S="range"===e&&p?$:()=>{};return(0,a.useEffect)(()=>{if("range"!==e)return;let t=null==h[0]&&null==h[1],n=null!=h[0]&&null!=h[1];(t||n)&&(y(null),$(null))},[h]),{onDateChange:n=>{if("range"===e){if(p instanceof Date&&!h[1]){if(r(n).isSame(p,t)&&!u){y(null),$(null),m([null,null]);return}let e=[n,p];e.sort((e,t)=>e.getTime()-t.getTime()),m(e),$(null),y(null);return}if(h[0]&&!h[1]&&r(n).isSame(h[0],t)&&!u){y(null),$(null),m([null,null]);return}m([n,null]),$(null),y(n);return}if("multiple"===e){h.some(e=>r(e).isSame(n,t))?m(h.filter(e=>!r(e).isSame(n,t))):m([...h,n]);return}h&&c&&r(n).isSame(h,t)?m(null):m(n)},onRootMouseLeave:x,onHoveredDateChange:S,getControlProps:n=>{if("range"===e)return{selected:h.some(e=>e&&r(e).isSame(n,t)),inRange:g(n),firstInRange:D(n),lastInRange:M(n),"data-autofocus":!!h[0]&&r(h[0]).isSame(n,t)||void 0};if("multiple"===e)return{selected:h.some(e=>e&&r(e).isSame(n,t)),"data-autofocus":!!h[0]&&r(h[0]).isSame(n,t)||void 0};let a=r(h).isSame(n,t);return{selected:a,"data-autofocus":a||void 0}},_value:h,setValue:m}}},93893:function(e,t,n){"use strict";n.d(t,{S:function(){return i}});var r=n(28879),a=n(51235);function i({minDate:e,maxDate:t,timezone:n}){let i=(0,a.w)("add",new Date,n);return e||t?e&&r(i).isBefore(e)?e:t&&r(i).isAfter(t)?t:i:i}},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,s]=(0,r.useState)(e),o=(0,r.useCallback)(()=>{s(e=>e||(n?.(),!0))},[n]),l=(0,r.useCallback)(()=>{s(e=>e?(a?.(),!1):e)},[a]),u=(0,r.useCallback)(()=>{i?l():o()},[l,o,i]);return[i,{open:o,close:l,toggle:u}]}}},function(e){e.O(0,[61177,66748,11340,11204,92888,49774,40179],function(){return e(e.s=67300)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/dates/year-picker-input-2bda76567cfcae0b.js b/_next/static/chunks/pages/dates/year-picker-input-8a2d23fedd16630b.js similarity index 82% rename from _next/static/chunks/pages/dates/year-picker-input-2bda76567cfcae0b.js rename to _next/static/chunks/pages/dates/year-picker-input-8a2d23fedd16630b.js index 3ff99d85cf8..1e83ff96e4d 100644 --- a/_next/static/chunks/pages/dates/year-picker-input-2bda76567cfcae0b.js +++ b/_next/static/chunks/pages/dates/year-picker-input-8a2d23fedd16630b.js @@ -161,4 +161,4 @@ function Demo() { /> ); } -`,y=({type:e,date:t,locale:n,format:r})=>{if("multiple"===e&&Array.isArray(t)){if(1===t.length)return m(t[0]).locale(n).format(r);if(t.length>1)return`${t.length} dates selected`}return""};function g(e){return{usage:{type:"code",centered:!0,maxWidth:400,code:h(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},multiple:{type:"code",centered:!0,maxWidth:400,code:d(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([]);return(0,r.jsx)(e,{type:"multiple",label:"Pick dates",placeholder:"Pick dates",value:t,onChange:n})}},range:{type:"code",centered:!0,maxWidth:400,code:f(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([null,null]);return(0,r.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:i(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:c(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{dropdownType:"modal",label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},icon:{type:"code",centered:!0,maxWidth:400,code:u(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{leftSection:(0,r.jsx)(o.Z,{style:{width:(0,l.h)(18),height:(0,l.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:a(e.displayName.replace("@mantine/dates/","")),component:()=>(0,r.jsx)(e,{clearable:!0,defaultValue:new Date,label:"Pick date",placeholder:"Pick date"})},valueFormatter:{type:"code",centered:!0,maxWidth:400,code:p(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([]);return(0,r.jsx)(e,{label:"Pick 2 dates or more",placeholder:"Pick 2 dates or more",value:t,onChange:n,type:"multiple",valueFormatter:y})}}}}},9882:function(e,t,n){"use strict";function r(e){let{maxLevel:t,minLevel:n,defaultLevel:r,level:a,onLevelChange:i,nextIcon:s,previousIcon:o,date:l,defaultDate:u,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:h,onYearSelect:m,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:g,onNextMonth:v,onPreviousMonth:$,onNextYear:x,onPreviousYear:D,onNextDecade:S,onPreviousDecade:k,withCellSpacing:b,highlightToday:j,__updateDateOnYearSelect:P,__updateDateOnMonthSelect:w,firstDayOfWeek:M,weekdayFormat:Y,weekendDays:O,getDayProps:C,excludeDate:T,renderDay:_,hideOutsideDates:I,hideWeekdays:V,getDayAriaLabel:z,monthLabelFormat:N,monthsListFormat:A,getMonthControlProps:F,yearLabelFormat:W,yearsListFormat:H,getYearControlProps:L,decadeLabelFormat:U,allowSingleDateInRange:E,allowDeselect:Z,minDate:B,maxDate:J,locale:q,...R}=e;return{calendarProps:{maxLevel:t,minLevel:n,defaultLevel:r,level:a,onLevelChange:i,nextIcon:s,previousIcon:o,date:l,defaultDate:u,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:h,onYearSelect:m,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:g,onNextMonth:v,onPreviousMonth:$,onNextYear:x,onPreviousYear:D,onNextDecade:S,onPreviousDecade:k,withCellSpacing:b,highlightToday:j,__updateDateOnYearSelect:P,__updateDateOnMonthSelect:w,firstDayOfWeek:M,weekdayFormat:Y,weekendDays:O,getDayProps:C,excludeDate:T,renderDay:_,hideOutsideDates:I,hideWeekdays:V,getDayAriaLabel:z,monthLabelFormat:N,monthsListFormat:A,getMonthControlProps:F,yearLabelFormat:W,yearsListFormat:H,getYearControlProps:L,decadeLabelFormat:U,allowSingleDateInRange:E,allowDeselect:Z,minDate:B,maxDate:J,locale:q},others:R}}n.d(t,{M:function(){return r}})},20228:function(e,t,n){"use strict";n.d(t,{n:function(){return s}});var r=n(52322);n(28879);var a=n(51235),i=n(46766);function s({value:e,type:t,name:n,form:s}){return(0,r.jsx)("input",{type:"hidden",value:function(e,t){let n=(0,i.e)(),r=e=>(0,a.w)("remove",e,n.getTimezone()).toISOString();if("range"===t&&Array.isArray(e)){let[t,n]=e;return t?n?`${r(t)} \u2013 ${r(n)}`:`${r(t)} \u2013`:""}return"multiple"===t&&Array.isArray(e)?e.map(e=>e&&r(e)).filter(Boolean).join(", "):!Array.isArray(e)&&e?r(e):""}(e,t),name:n,form:s})}s.displayName="@mantine/dates/HiddenDatesInput"},71686:function(e,t,n){"use strict";n.d(t,{i:function(){return m}});var r=n(52322),a=n(40489),i=n(82027),s=n(7140),o=n(2670),l=n(78222),u=n(6941),c=n(50205),d=n(20228),f={input:"m_6fa5e2aa"};let h={},m=(0,i.d5)((e,t)=>{let{inputProps:n,wrapperProps:i,placeholder:m,classNames:p,styles:y,unstyled:g,popoverProps:v,modalProps:$,dropdownType:x,children:D,formattedValue:S,dropdownHandlers:k,dropdownOpened:b,onClick:j,clearable:P,onClear:w,clearButtonProps:M,rightSection:Y,shouldClear:O,readOnly:C,disabled:T,value:_,name:I,form:V,type:z,...N}=(0,s.k)("PickerInputBase",h,e),A=Y||(P&&O&&!C&&!T?(0,r.jsx)(o.P,{variant:"transparent",onClick:w,unstyled:g,size:n.size||"sm",...M}):null),F=()=>{"range"===z&&Array.isArray(_)&&_[0]&&!_[1]&&w(),k.close()};return(0,r.jsxs)(r.Fragment,{children:["modal"===x&&!C&&(0,r.jsx)(l.u,{opened:b,onClose:F,withCloseButton:!1,size:"auto","data-dates-modal":!0,unstyled:g,...$,children:D}),(0,r.jsx)(u.I.Wrapper,{...i,children:(0,r.jsxs)(c.J,{position:"bottom-start",opened:b,trapFocus:!0,returnFocus:!0,unstyled:g,...v,disabled:v?.disabled||"modal"===x||C,onClose:()=>{v?.onClose?.(),F()},children:[(0,r.jsx)(c.J.Target,{children:(0,r.jsx)(u.I,{"data-dates-input":!0,"data-read-only":C||void 0,disabled:T,component:"button",type:"button",multiline:!0,onClick:e=>{j?.(e),k.toggle()},rightSection:A,...n,ref:t,classNames:{...p,input:(0,a.Z)(f.input,p?.input)},...N,children:S||(0,r.jsx)(u.I.Placeholder,{error:n.error,unstyled:g,className:p?.placeholder,style:y?.placeholder,children:m})})}),(0,r.jsx)(c.J.Dropdown,{"data-dates-dropdown":!0,children:D})]})}),(0,r.jsx)(d.n,{value:_,name:I,form:V,type:z})]})});m.classes=f,m.displayName="@mantine/dates/PickerInputBase"},98071:function(e,t,n){"use strict";n.d(t,{q:function(){return f}});var r=n(52322),a=n(82027),i=n(38483),s=n(51477),o=n(82083),l=n(46766);n(28879);var u=n(51235);n(2784);var c=n(11204);let d={type:"default"},f=(0,a.d5)((e,t)=>{let n=(0,i.w)("YearPicker",d,e),{classNames:a,styles:f,vars:h,type:m,defaultValue:p,value:y,onChange:g,__staticSelector:v,getYearControlProps:$,allowSingleDateInRange:x,allowDeselect:D,onMouseLeave:S,onYearSelect:k,__updateDateOnYearSelect:b,__timezoneApplied:j,...P}=n,{onDateChange:w,onRootMouseLeave:M,onHoveredDateChange:Y,getControlProps:O}=(0,o.D)({type:m,level:"year",allowDeselect:D,allowSingleDateInRange:x,value:y,defaultValue:p,onChange:g,onMouseLeave:S,applyTimezone:!j}),{resolvedClassNames:C,resolvedStyles:T}=(0,s.h)({classNames:a,styles:f,props:n}),_=(0,l.e)();return(0,r.jsx)(c.f,{ref:t,minLevel:"decade",__updateDateOnYearSelect:b??!1,__staticSelector:v||"YearPicker",onMouseLeave:M,onYearMouseEnter:(e,t)=>Y(t),onYearSelect:e=>{w(e),k?.(e)},getYearControlProps:e=>({...O(e),...$?.(e)}),classNames:C,styles:T,...P,date:(0,u.w)("add",P.date,_.getTimezone(),j),__timezoneApplied:!0})});f.classes=c.f.classes,f.displayName="@mantine/dates/YearPicker"},26005:function(e,t,n){"use strict";n.d(t,{u:function(){return o}});var r=n(3900),a=n(46766),i=n(28879),s=n(93141);function o({type:e,value:t,defaultValue:n,onChange:o,locale:l,format:u,closeOnChange:c,sortDates:d,labelSeparator:f,valueFormatter:h}){let m=(0,a.e)(),[p,y]=(0,r.q)(!1),[g,v]=(0,s.l)({type:e,value:t,defaultValue:n,onChange:o}),$=function({formatter:e,...t}){return(e||function({type:e,date:t,locale:n,format:r,labelSeparator:a}){let s=e=>i(e).locale(n).format(r);if("default"===e)return null===t?"":s(t);if("multiple"===e)return t.map(s).join(", ");if("range"===e&&Array.isArray(t)){if(t[0]&&t[1])return`${s(t[0])} ${a} ${s(t[1])}`;if(t[0])return`${s(t[0])} ${a} `}return""})(t)}({type:e,date:g,locale:m.getLocale(l),format:u,labelSeparator:m.getLabelSeparator(f),formatter:h}),x=t=>{c&&("default"===e&&y.close(),"range"===e&&t[0]&&t[1]&&y.close()),d&&"multiple"===e?v([...t].sort((e,t)=>e.getTime()-t.getTime())):v(t)},D="range"===e?!!g[0]:"multiple"===e?g.length>0:null!==g;return{_value:g,setValue:x,onClear:()=>x("range"===e?[null,null]:"multiple"===e?[]:null),shouldClear:D,formattedValue:$,dropdownOpened:p,dropdownHandlers:y}}},82083:function(e,t,n){"use strict";n.d(t,{D:function(){return o}});var r=n(28879),a=n(2784),i=n(93141);function s(e,t){let n=[...t].sort((e,t)=>e.getTime()-t.getTime());return r(n[0]).startOf("day").subtract(1,"ms").isBefore(e)&&r(n[1]).endOf("day").add(1,"ms").isAfter(e)}function o({type:e,level:t,value:n,defaultValue:o,onChange:l,allowSingleDateInRange:u,allowDeselect:c,onMouseLeave:d,applyTimezone:f=!0}){let[h,m]=(0,i.l)({type:e,value:n,defaultValue:o,onChange:l,applyTimezone:f}),[p,y]=(0,a.useState)("range"===e&&h[0]&&!h[1]?h[0]:null),[g,v]=(0,a.useState)(null),$=e=>p instanceof Date&&g instanceof Date?s(e,[g,p]):h[0]instanceof Date&&h[1]instanceof Date&&s(e,h),x="range"===e?e=>{d?.(e),v(null)}:d,D=e=>h[0]instanceof Date&&!!r(e).isSame(h[0],t)&&!(g&&r(g).isBefore(h[0])),S=e=>h[1]instanceof Date?r(e).isSame(h[1],t):h[0]instanceof Date&&!!g&&r(g).isBefore(h[0])&&r(e).isSame(h[0],t),k="range"===e&&p?v:()=>{};return(0,a.useEffect)(()=>{if("range"!==e)return;let t=null==h[0]&&null==h[1],n=null!=h[0]&&null!=h[1];(t||n)&&(y(null),v(null))},[h]),{onDateChange:n=>{if("range"===e){if(p instanceof Date&&!h[1]){if(r(n).isSame(p,t)&&!u){y(null),v(null),m([null,null]);return}let e=[n,p];e.sort((e,t)=>e.getTime()-t.getTime()),m(e),v(null),y(null);return}if(h[0]&&!h[1]&&r(n).isSame(h[0],t)&&!u){y(null),v(null),m([null,null]);return}m([n,null]),v(null),y(n);return}if("multiple"===e){h.some(e=>r(e).isSame(n,t))?m(h.filter(e=>!r(e).isSame(n,t))):m([...h,n]);return}h&&c&&r(n).isSame(h,t)?m(null):m(n)},onRootMouseLeave:x,onHoveredDateChange:k,getControlProps:n=>{if("range"===e)return{selected:h.some(e=>e&&r(e).isSame(n,t)),inRange:$(n),firstInRange:D(n),lastInRange:S(n),"data-autofocus":!!h[0]&&r(h[0]).isSame(n,t)||void 0};if("multiple"===e)return{selected:h.some(e=>e&&r(e).isSame(n,t)),"data-autofocus":!!h[0]&&r(h[0]).isSame(n,t)||void 0};let a=r(h).isSame(n,t);return{selected:a,"data-autofocus":a||void 0}},_value:h,setValue:m}}},93893:function(e,t,n){"use strict";n.d(t,{S:function(){return i}});var r=n(28879),a=n(51235);function i({minDate:e,maxDate:t,timezone:n}){let i=(0,a.w)("add",new Date,n);return e||t?e&&r(i).isBefore(e)?e:t&&r(i).isAfter(t)?t:i:i}},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,s]=(0,r.useState)(e),o=(0,r.useCallback)(()=>{s(e=>e||(n?.(),!0))},[n]),l=(0,r.useCallback)(()=>{s(e=>e?(a?.(),!1):e)},[a]),u=(0,r.useCallback)(()=>{i?l():o()},[l,o,i]);return[i,{open:o,close:l,toggle:u}]}}},function(e){e.O(0,[61177,66748,11340,11204,92888,49774,40179],function(){return e(e.s=26798)}),_N_E=e.O()}]); \ No newline at end of file +`,y=({type:e,date:t,locale:n,format:r})=>{if("multiple"===e&&Array.isArray(t)){if(1===t.length)return m(t[0]).locale(n).format(r);if(t.length>1)return`${t.length} dates selected`}return""};function g(e){return{usage:{type:"code",centered:!0,maxWidth:400,code:h(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},multiple:{type:"code",centered:!0,maxWidth:400,code:d(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([]);return(0,r.jsx)(e,{type:"multiple",label:"Pick dates",placeholder:"Pick dates",value:t,onChange:n})}},range:{type:"code",centered:!0,maxWidth:400,code:f(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([null,null]);return(0,r.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:i(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:c(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{dropdownType:"modal",label:"Pick date",placeholder:"Pick date",value:t,onChange:n})}},icon:{type:"code",centered:!0,maxWidth:400,code:u(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)(null);return(0,r.jsx)(e,{leftSection:(0,r.jsx)(o.Z,{style:{width:(0,l.h)(18),height:(0,l.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:a(e.displayName.replace("@mantine/dates/","")),component:()=>(0,r.jsx)(e,{clearable:!0,defaultValue:new Date,label:"Pick date",placeholder:"Pick date"})},valueFormatter:{type:"code",centered:!0,maxWidth:400,code:p(e.displayName.replace("@mantine/dates/","")),component:()=>{let[t,n]=(0,s.useState)([]);return(0,r.jsx)(e,{label:"Pick 2 dates or more",placeholder:"Pick 2 dates or more",value:t,onChange:n,type:"multiple",valueFormatter:y})}}}}},9882:function(e,t,n){"use strict";function r(e){let{maxLevel:t,minLevel:n,defaultLevel:r,level:a,onLevelChange:i,nextIcon:s,previousIcon:o,date:l,defaultDate:u,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:h,onYearSelect:m,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:g,onNextMonth:v,onPreviousMonth:$,onNextYear:x,onPreviousYear:D,onNextDecade:S,onPreviousDecade:k,withCellSpacing:b,highlightToday:j,__updateDateOnYearSelect:P,__updateDateOnMonthSelect:w,firstDayOfWeek:M,weekdayFormat:Y,weekendDays:O,getDayProps:C,excludeDate:T,renderDay:_,hideOutsideDates:I,hideWeekdays:V,getDayAriaLabel:z,monthLabelFormat:N,monthsListFormat:A,getMonthControlProps:F,yearLabelFormat:W,yearsListFormat:H,getYearControlProps:L,decadeLabelFormat:U,allowSingleDateInRange:E,allowDeselect:Z,minDate:B,maxDate:J,locale:q,...R}=e;return{calendarProps:{maxLevel:t,minLevel:n,defaultLevel:r,level:a,onLevelChange:i,nextIcon:s,previousIcon:o,date:l,defaultDate:u,onDateChange:c,numberOfColumns:d,columnsToScroll:f,ariaLabels:h,onYearSelect:m,onMonthSelect:p,onYearMouseEnter:y,onMonthMouseEnter:g,onNextMonth:v,onPreviousMonth:$,onNextYear:x,onPreviousYear:D,onNextDecade:S,onPreviousDecade:k,withCellSpacing:b,highlightToday:j,__updateDateOnYearSelect:P,__updateDateOnMonthSelect:w,firstDayOfWeek:M,weekdayFormat:Y,weekendDays:O,getDayProps:C,excludeDate:T,renderDay:_,hideOutsideDates:I,hideWeekdays:V,getDayAriaLabel:z,monthLabelFormat:N,monthsListFormat:A,getMonthControlProps:F,yearLabelFormat:W,yearsListFormat:H,getYearControlProps:L,decadeLabelFormat:U,allowSingleDateInRange:E,allowDeselect:Z,minDate:B,maxDate:J,locale:q},others:R}}n.d(t,{M:function(){return r}})},20228:function(e,t,n){"use strict";n.d(t,{n:function(){return s}});var r=n(52322);n(28879);var a=n(51235),i=n(46766);function s({value:e,type:t,name:n,form:s}){return(0,r.jsx)("input",{type:"hidden",value:function(e,t){let n=(0,i.e)(),r=e=>(0,a.w)("remove",e,n.getTimezone()).toISOString();if("range"===t&&Array.isArray(e)){let[t,n]=e;return t?n?`${r(t)} \u2013 ${r(n)}`:`${r(t)} \u2013`:""}return"multiple"===t&&Array.isArray(e)?e.map(e=>e&&r(e)).filter(Boolean).join(", "):!Array.isArray(e)&&e?r(e):""}(e,t),name:n,form:s})}s.displayName="@mantine/dates/HiddenDatesInput"},71686:function(e,t,n){"use strict";n.d(t,{i:function(){return m}});var r=n(52322),a=n(40489),i=n(82027),s=n(7140),o=n(2670),l=n(78222),u=n(6941),c=n(50205),d=n(20228),f={input:"m_6fa5e2aa"};let h={},m=(0,i.d5)((e,t)=>{let{inputProps:n,wrapperProps:i,placeholder:m,classNames:p,styles:y,unstyled:g,popoverProps:v,modalProps:$,dropdownType:x,children:D,formattedValue:S,dropdownHandlers:k,dropdownOpened:b,onClick:j,clearable:P,onClear:w,clearButtonProps:M,rightSection:Y,shouldClear:O,readOnly:C,disabled:T,value:_,name:I,form:V,type:z,...N}=(0,s.k)("PickerInputBase",h,e),A=Y||(P&&O&&!C&&!T?(0,r.jsx)(o.P,{variant:"transparent",onClick:w,unstyled:g,size:n.size||"sm",...M}):null),F=()=>{"range"===z&&Array.isArray(_)&&_[0]&&!_[1]&&w(),k.close()};return(0,r.jsxs)(r.Fragment,{children:["modal"===x&&!C&&(0,r.jsx)(l.u,{opened:b,onClose:F,withCloseButton:!1,size:"auto","data-dates-modal":!0,unstyled:g,...$,children:D}),(0,r.jsx)(u.I.Wrapper,{...i,children:(0,r.jsxs)(c.J,{position:"bottom-start",opened:b,trapFocus:!0,returnFocus:!0,unstyled:g,...v,disabled:v?.disabled||"modal"===x||C,onChange:e=>{e||(v?.onClose?.(),F())},children:[(0,r.jsx)(c.J.Target,{children:(0,r.jsx)(u.I,{"data-dates-input":!0,"data-read-only":C||void 0,disabled:T,component:"button",type:"button",multiline:!0,onClick:e=>{j?.(e),k.toggle()},rightSection:A,...n,ref:t,classNames:{...p,input:(0,a.Z)(f.input,p?.input)},...N,children:S||(0,r.jsx)(u.I.Placeholder,{error:n.error,unstyled:g,className:p?.placeholder,style:y?.placeholder,children:m})})}),(0,r.jsx)(c.J.Dropdown,{"data-dates-dropdown":!0,children:D})]})}),(0,r.jsx)(d.n,{value:_,name:I,form:V,type:z})]})});m.classes=f,m.displayName="@mantine/dates/PickerInputBase"},98071:function(e,t,n){"use strict";n.d(t,{q:function(){return f}});var r=n(52322),a=n(82027),i=n(38483),s=n(51477),o=n(82083),l=n(46766);n(28879);var u=n(51235);n(2784);var c=n(11204);let d={type:"default"},f=(0,a.d5)((e,t)=>{let n=(0,i.w)("YearPicker",d,e),{classNames:a,styles:f,vars:h,type:m,defaultValue:p,value:y,onChange:g,__staticSelector:v,getYearControlProps:$,allowSingleDateInRange:x,allowDeselect:D,onMouseLeave:S,onYearSelect:k,__updateDateOnYearSelect:b,__timezoneApplied:j,...P}=n,{onDateChange:w,onRootMouseLeave:M,onHoveredDateChange:Y,getControlProps:O}=(0,o.D)({type:m,level:"year",allowDeselect:D,allowSingleDateInRange:x,value:y,defaultValue:p,onChange:g,onMouseLeave:S,applyTimezone:!j}),{resolvedClassNames:C,resolvedStyles:T}=(0,s.h)({classNames:a,styles:f,props:n}),_=(0,l.e)();return(0,r.jsx)(c.f,{ref:t,minLevel:"decade",__updateDateOnYearSelect:b??!1,__staticSelector:v||"YearPicker",onMouseLeave:M,onYearMouseEnter:(e,t)=>Y(t),onYearSelect:e=>{w(e),k?.(e)},getYearControlProps:e=>({...O(e),...$?.(e)}),classNames:C,styles:T,...P,date:(0,u.w)("add",P.date,_.getTimezone(),j),__timezoneApplied:!0})});f.classes=c.f.classes,f.displayName="@mantine/dates/YearPicker"},26005:function(e,t,n){"use strict";n.d(t,{u:function(){return o}});var r=n(3900),a=n(46766),i=n(28879),s=n(93141);function o({type:e,value:t,defaultValue:n,onChange:o,locale:l,format:u,closeOnChange:c,sortDates:d,labelSeparator:f,valueFormatter:h}){let m=(0,a.e)(),[p,y]=(0,r.q)(!1),[g,v]=(0,s.l)({type:e,value:t,defaultValue:n,onChange:o}),$=function({formatter:e,...t}){return(e||function({type:e,date:t,locale:n,format:r,labelSeparator:a}){let s=e=>i(e).locale(n).format(r);if("default"===e)return null===t?"":s(t);if("multiple"===e)return t.map(s).join(", ");if("range"===e&&Array.isArray(t)){if(t[0]&&t[1])return`${s(t[0])} ${a} ${s(t[1])}`;if(t[0])return`${s(t[0])} ${a} `}return""})(t)}({type:e,date:g,locale:m.getLocale(l),format:u,labelSeparator:m.getLabelSeparator(f),formatter:h}),x=t=>{c&&("default"===e&&y.close(),"range"===e&&t[0]&&t[1]&&y.close()),d&&"multiple"===e?v([...t].sort((e,t)=>e.getTime()-t.getTime())):v(t)},D="range"===e?!!g[0]:"multiple"===e?g.length>0:null!==g;return{_value:g,setValue:x,onClear:()=>x("range"===e?[null,null]:"multiple"===e?[]:null),shouldClear:D,formattedValue:$,dropdownOpened:p,dropdownHandlers:y}}},82083:function(e,t,n){"use strict";n.d(t,{D:function(){return o}});var r=n(28879),a=n(2784),i=n(93141);function s(e,t){let n=[...t].sort((e,t)=>e.getTime()-t.getTime());return r(n[0]).startOf("day").subtract(1,"ms").isBefore(e)&&r(n[1]).endOf("day").add(1,"ms").isAfter(e)}function o({type:e,level:t,value:n,defaultValue:o,onChange:l,allowSingleDateInRange:u,allowDeselect:c,onMouseLeave:d,applyTimezone:f=!0}){let[h,m]=(0,i.l)({type:e,value:n,defaultValue:o,onChange:l,applyTimezone:f}),[p,y]=(0,a.useState)("range"===e&&h[0]&&!h[1]?h[0]:null),[g,v]=(0,a.useState)(null),$=e=>p instanceof Date&&g instanceof Date?s(e,[g,p]):h[0]instanceof Date&&h[1]instanceof Date&&s(e,h),x="range"===e?e=>{d?.(e),v(null)}:d,D=e=>h[0]instanceof Date&&!!r(e).isSame(h[0],t)&&!(g&&r(g).isBefore(h[0])),S=e=>h[1]instanceof Date?r(e).isSame(h[1],t):h[0]instanceof Date&&!!g&&r(g).isBefore(h[0])&&r(e).isSame(h[0],t),k="range"===e&&p?v:()=>{};return(0,a.useEffect)(()=>{if("range"!==e)return;let t=null==h[0]&&null==h[1],n=null!=h[0]&&null!=h[1];(t||n)&&(y(null),v(null))},[h]),{onDateChange:n=>{if("range"===e){if(p instanceof Date&&!h[1]){if(r(n).isSame(p,t)&&!u){y(null),v(null),m([null,null]);return}let e=[n,p];e.sort((e,t)=>e.getTime()-t.getTime()),m(e),v(null),y(null);return}if(h[0]&&!h[1]&&r(n).isSame(h[0],t)&&!u){y(null),v(null),m([null,null]);return}m([n,null]),v(null),y(n);return}if("multiple"===e){h.some(e=>r(e).isSame(n,t))?m(h.filter(e=>!r(e).isSame(n,t))):m([...h,n]);return}h&&c&&r(n).isSame(h,t)?m(null):m(n)},onRootMouseLeave:x,onHoveredDateChange:k,getControlProps:n=>{if("range"===e)return{selected:h.some(e=>e&&r(e).isSame(n,t)),inRange:$(n),firstInRange:D(n),lastInRange:S(n),"data-autofocus":!!h[0]&&r(h[0]).isSame(n,t)||void 0};if("multiple"===e)return{selected:h.some(e=>e&&r(e).isSame(n,t)),"data-autofocus":!!h[0]&&r(h[0]).isSame(n,t)||void 0};let a=r(h).isSame(n,t);return{selected:a,"data-autofocus":a||void 0}},_value:h,setValue:m}}},93893:function(e,t,n){"use strict";n.d(t,{S:function(){return i}});var r=n(28879),a=n(51235);function i({minDate:e,maxDate:t,timezone:n}){let i=(0,a.w)("add",new Date,n);return e||t?e&&r(i).isBefore(e)?e:t&&r(i).isAfter(t)?t:i:i}},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,s]=(0,r.useState)(e),o=(0,r.useCallback)(()=>{s(e=>e||(n?.(),!0))},[n]),l=(0,r.useCallback)(()=>{s(e=>e?(a?.(),!1):e)},[a]),u=(0,r.useCallback)(()=>{i?l():o()},[l,o,i]);return[i,{open:o,close:l,toggle:u}]}}},function(e){e.O(0,[61177,66748,11340,11204,92888,49774,40179],function(){return e(e.s=26798)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/guides/next-42adb0503dcd5c6a.js b/_next/static/chunks/pages/guides/next-42adb0503dcd5c6a.js deleted file mode 100644 index aca9f4c5da4..00000000000 --- a/_next/static/chunks/pages/guides/next-42adb0503dcd5c6a.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[62469],{9714:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/next",function(){return o(2458)}])},2458:function(e,n,o){"use strict";o.r(n),o.d(n,{default:function(){return c}});var t=o(52322),r=o(45392),s=o(25071),i=o(15019);let p=(0,s.A)(i.us.NextJs);function a(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...e.components},{GetTemplates:o,InstallScript:s,NpmScript:i,PackagesInstallation:p}=n;return o||l("GetTemplates",!0),s||l("InstallScript",!0),i||l("NpmScript",!0),p||l("PackagesInstallation",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"usage-with-nextjs",children:"Usage with Next.js"}),"\n",(0,t.jsx)(o,{type:"next"}),"\n",(0,t.jsx)(n.h2,{id:"generate-new-application",children:"Generate new application"}),"\n",(0,t.jsxs)(n.p,{children:["Follow ",(0,t.jsx)(n.a,{href:"https://nextjs.org/docs/pages/api-reference/create-next-app",children:"create-next-app"})," guide to\ncreate new Next.js application:"]}),"\n",(0,t.jsx)(i,{yarnScript:"yarn create next-app --typescript",npmScript:"npx create-next-app@latest --typescript"}),"\n",(0,t.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,t.jsx)(p,{}),"\n",(0,t.jsx)(n.h2,{id:"postcss-setup",children:"PostCSS setup"}),"\n",(0,t.jsxs)(n.p,{children:["Install PostCSS plugins and ",(0,t.jsx)(n.a,{href:"/styles/postcss-preset",children:"postcss-preset-mantine"}),":"]}),"\n",(0,t.jsx)(s,{packages:"postcss postcss-preset-mantine postcss-simple-vars",dev:!0}),"\n",(0,t.jsxs)(n.p,{children:["Create ",(0,t.jsx)(n.code,{children:"postcss.config.cjs"})," file at the root of your application with the following content:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"module.exports = {\n plugins: {\n 'postcss-preset-mantine': {},\n 'postcss-simple-vars': {\n variables: {\n 'mantine-breakpoint-xs': '36em',\n 'mantine-breakpoint-sm': '48em',\n 'mantine-breakpoint-md': '62em',\n 'mantine-breakpoint-lg': '75em',\n 'mantine-breakpoint-xl': '88em',\n },\n },\n },\n};\n"})}),"\n",(0,t.jsx)(n.h2,{id:"setup-with-pages-router",children:"Setup with pages router"}),"\n",(0,t.jsxs)(n.p,{children:["Add styles imports and ",(0,t.jsx)(n.a,{href:"/theming/mantine-provider",children:"MantineProvider"})," to the ",(0,t.jsx)(n.code,{children:"pages/_app.tsx"})," file:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// Import styles of packages that you've installed.\n// All packages except `@mantine/hooks` require styles imports\nimport '@mantine/core/styles.css';\n\nimport type { AppProps } from 'next/app';\nimport { createTheme, MantineProvider } from '@mantine/core';\n\nconst theme = createTheme({\n /** Put your mantine theme override here */\n});\n\nexport default function App({ Component, pageProps }: AppProps) {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Create ",(0,t.jsx)(n.code,{children:"pages/_document.tsx"})," file with ",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"ColorSchemeScript"})," component.\nNote that it is required even if you use only one color scheme in your application."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Head, Html, Main, NextScript } from 'next/document';\nimport { ColorSchemeScript } from '@mantine/core';\n\nexport default function Document() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n}\n"})}),"\n",(0,t.jsx)(n.p,{children:"All set! Start development server:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run dev\n"})}),"\n",(0,t.jsx)(n.h2,{id:"setup-with-app-router",children:"Setup with app router"}),"\n",(0,t.jsxs)(n.p,{children:["Add ",(0,t.jsx)(n.a,{href:"/theming/mantine-provider",children:"MantineProvider"}),", ",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"ColorSchemeScript"}),"\nand styles imports to the ",(0,t.jsx)(n.code,{children:"app/layout.tsx"})," file:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// Import styles of packages that you've installed.\n// All packages except `@mantine/hooks` require styles imports\nimport '@mantine/core/styles.css';\n\nimport { ColorSchemeScript, MantineProvider } from '@mantine/core';\n\nexport const metadata = {\n title: 'My Mantine app',\n description: 'I have followed setup instructions carefully',\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n \n \n {children}\n \n \n );\n}\n"})}),"\n",(0,t.jsx)(n.p,{children:"All set! Start development server:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run dev\n"})}),"\n",(0,t.jsx)(n.h2,{id:"app--pages-router-together",children:"app + pages router together"}),"\n",(0,t.jsxs)(n.p,{children:["If you use both app and pages router in one application, you need to setup both ",(0,t.jsx)(n.code,{children:"pages/_app.tsx"}),"\nand ",(0,t.jsx)(n.code,{children:"app/layout.tsx"})," files as described above."]}),"\n",(0,t.jsx)(n.h2,{id:"nextjs-link-with-polymorphic-components",children:"Next.js Link with polymorphic components"}),"\n",(0,t.jsxs)(n.p,{children:["Next.js ",(0,t.jsx)(n.code,{children:"Link"})," does not work in the same way as other similar components in all Next.js versions."]}),"\n",(0,t.jsx)(n.p,{children:"With Next.js 12 and below:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import Link from 'next/link';\nimport { Button } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,t.jsx)(n.p,{children:"With Next.js 13 and above:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import Link from 'next/link';\nimport { Button } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n );\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"server-components",children:"Server components"}),"\n",(0,t.jsxs)(n.p,{children:["All Mantine components use ",(0,t.jsx)(n.code,{children:"useContext"})," hook to support ",(0,t.jsx)(n.a,{href:"/theming/default-props",children:"default props"}),"\nand ",(0,t.jsx)(n.a,{href:"/styles/styles-api",children:"Styles API"}),". Mantine components cannot be used as server components.\nIt means that components will render both on the server and client."]}),"\n",(0,t.jsxs)(n.p,{children:["Entry points of all ",(0,t.jsx)(n.code,{children:"@mantine/*"})," packages (",(0,t.jsx)(n.code,{children:"index.js"})," files) have ",(0,t.jsx)(n.code,{children:"'use client';"})," directive at the\ntop of the file – you do not need to add ",(0,t.jsx)(n.code,{children:"'use client';"})," to your pages/layouts/components."]}),"\n",(0,t.jsx)(n.h2,{id:"compound-components-in-server-components",children:"Compound components in server components"}),"\n",(0,t.jsxs)(n.p,{children:["Some components like ",(0,t.jsx)(n.a,{href:"/core/popover",children:"Popover"})," have associated compound components (",(0,t.jsx)(n.code,{children:"Component.XXX"}),"),\nwhere ",(0,t.jsx)(n.code,{children:"XXX"})," is a compound component name. Compound components cannot be used in server components.\nInstead, use ",(0,t.jsx)(n.code,{children:"ComponentXXX"})," syntax or add ",(0,t.jsx)(n.code,{children:"'use client';"})," directive to the top of the file."]}),"\n",(0,t.jsx)(n.p,{children:"Example that will not work in server components:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\n// This will throw an error\nexport default function Page() {\n return (\n \n Target\n Dropdown\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Example with ",(0,t.jsx)(n.code,{children:"'use client';"})," directive:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"'use client';\n\nimport { Popover } from '@mantine/core';\n\n// No error\nexport default function Page() {\n return (\n \n Target\n Dropdown\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Example with ",(0,t.jsx)(n.code,{children:"ComponentXXX"})," syntax:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import {\n Popover,\n PopoverDropdown,\n PopoverTarget,\n} from '@mantine/core';\n\n// No error\nexport default function Page() {\n return (\n \n Trigger\n Dropdown\n \n );\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"app-router-tree-shaking",children:"app router tree shaking"}),"\n",(0,t.jsxs)(n.p,{children:["To enable tree shaking with app router, enable experimental ",(0,t.jsx)(n.code,{children:"optimizePackageImports"})," feature in\nyour ",(0,t.jsx)(n.code,{children:"next.config.mjs"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"export default {\n // ...other configuration\n experimental: {\n optimizePackageImports: ['@mantine/core', '@mantine/hooks'],\n },\n};\n"})})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(p,{...e,children:(0,t.jsx)(a,{...e})})}function l(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=9714)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/guides/next-8f6faa0f438214b2.js b/_next/static/chunks/pages/guides/next-8f6faa0f438214b2.js new file mode 100644 index 00000000000..ddf0698e5b5 --- /dev/null +++ b/_next/static/chunks/pages/guides/next-8f6faa0f438214b2.js @@ -0,0 +1 @@ +(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[62469],{9714:function(e,n,o){(window.__NEXT_P=window.__NEXT_P||[]).push(["/guides/next",function(){return o(2458)}])},2458:function(e,n,o){"use strict";o.r(n),o.d(n,{default:function(){return c}});var t=o(52322),r=o(45392),s=o(25071),i=o(15019);let p=(0,s.A)(i.us.NextJs);function a(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...e.components},{GetTemplates:o,InstallScript:s,NpmScript:i,PackagesInstallation:p}=n;return o||l("GetTemplates",!0),s||l("InstallScript",!0),i||l("NpmScript",!0),p||l("PackagesInstallation",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.h1,{id:"usage-with-nextjs",children:"Usage with Next.js"}),"\n",(0,t.jsx)(o,{type:"next"}),"\n",(0,t.jsx)(n.h2,{id:"generate-new-application",children:"Generate new application"}),"\n",(0,t.jsxs)(n.p,{children:["Follow ",(0,t.jsx)(n.a,{href:"https://nextjs.org/docs/pages/api-reference/create-next-app",children:"create-next-app"})," guide to\ncreate new Next.js application:"]}),"\n",(0,t.jsx)(i,{yarnScript:"yarn create next-app --typescript",npmScript:"npx create-next-app@latest --typescript"}),"\n",(0,t.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,t.jsx)(p,{}),"\n",(0,t.jsx)(n.h2,{id:"postcss-setup",children:"PostCSS setup"}),"\n",(0,t.jsxs)(n.p,{children:["Install PostCSS plugins and ",(0,t.jsx)(n.a,{href:"/styles/postcss-preset",children:"postcss-preset-mantine"}),":"]}),"\n",(0,t.jsx)(s,{packages:"postcss postcss-preset-mantine postcss-simple-vars",dev:!0}),"\n",(0,t.jsxs)(n.p,{children:["Create ",(0,t.jsx)(n.code,{children:"postcss.config.cjs"})," file at the root of your application with the following content:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"module.exports = {\n plugins: {\n 'postcss-preset-mantine': {},\n 'postcss-simple-vars': {\n variables: {\n 'mantine-breakpoint-xs': '36em',\n 'mantine-breakpoint-sm': '48em',\n 'mantine-breakpoint-md': '62em',\n 'mantine-breakpoint-lg': '75em',\n 'mantine-breakpoint-xl': '88em',\n },\n },\n },\n};\n"})}),"\n",(0,t.jsx)(n.h2,{id:"setup-with-pages-router",children:"Setup with pages router"}),"\n",(0,t.jsxs)(n.p,{children:["Add styles imports and ",(0,t.jsx)(n.a,{href:"/theming/mantine-provider",children:"MantineProvider"})," to the ",(0,t.jsx)(n.code,{children:"pages/_app.tsx"})," file:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// Import styles of packages that you've installed.\n// All packages except `@mantine/hooks` require styles imports\nimport '@mantine/core/styles.css';\n\nimport type { AppProps } from 'next/app';\nimport { createTheme, MantineProvider } from '@mantine/core';\n\nconst theme = createTheme({\n /** Put your mantine theme override here */\n});\n\nexport default function App({ Component, pageProps }: AppProps) {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Create ",(0,t.jsx)(n.code,{children:"pages/_document.tsx"})," file with ",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"ColorSchemeScript"})," component.\nNote that it is required even if you use only one color scheme in your application."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Head, Html, Main, NextScript } from 'next/document';\nimport { ColorSchemeScript } from '@mantine/core';\n\nexport default function Document() {\n return (\n \n \n \n \n \n
\n \n \n \n );\n}\n"})}),"\n",(0,t.jsx)(n.p,{children:"All set! Start development server:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run dev\n"})}),"\n",(0,t.jsx)(n.h2,{id:"setup-with-app-router",children:"Setup with app router"}),"\n",(0,t.jsxs)(n.p,{children:["Add ",(0,t.jsx)(n.a,{href:"/theming/mantine-provider",children:"MantineProvider"}),", ",(0,t.jsx)(n.a,{href:"/theming/color-schemes",children:"ColorSchemeScript"}),"\nand styles imports to the ",(0,t.jsx)(n.code,{children:"app/layout.tsx"})," file:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"// Import styles of packages that you've installed.\n// All packages except `@mantine/hooks` require styles imports\nimport '@mantine/core/styles.css';\n\nimport { ColorSchemeScript, MantineProvider } from '@mantine/core';\n\nexport const metadata = {\n title: 'My Mantine app',\n description: 'I have followed setup instructions carefully',\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n \n \n \n \n {children}\n \n \n );\n}\n"})}),"\n",(0,t.jsx)(n.p,{children:"All set! Start development server:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm run dev\n"})}),"\n",(0,t.jsx)(n.h2,{id:"app--pages-router-together",children:"app + pages router together"}),"\n",(0,t.jsxs)(n.p,{children:["If you use both app and pages router in one application, you need to setup both ",(0,t.jsx)(n.code,{children:"pages/_app.tsx"}),"\nand ",(0,t.jsx)(n.code,{children:"app/layout.tsx"})," files as described above."]}),"\n",(0,t.jsx)(n.h2,{id:"nextjs-link-with-polymorphic-components",children:"Next.js Link with polymorphic components"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import Link from 'next/link';\nimport { Button } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n );\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"server-components",children:"Server components"}),"\n",(0,t.jsxs)(n.p,{children:["All Mantine components use ",(0,t.jsx)(n.code,{children:"useContext"})," hook to support ",(0,t.jsx)(n.a,{href:"/theming/default-props",children:"default props"}),"\nand ",(0,t.jsx)(n.a,{href:"/styles/styles-api",children:"Styles API"}),". Mantine components cannot be used as server components.\nIt means that components will render both on the server and client."]}),"\n",(0,t.jsxs)(n.p,{children:["Entry points of all ",(0,t.jsx)(n.code,{children:"@mantine/*"})," packages (",(0,t.jsx)(n.code,{children:"index.js"})," files) have ",(0,t.jsx)(n.code,{children:"'use client';"})," directive at the\ntop of the file – you do not need to add ",(0,t.jsx)(n.code,{children:"'use client';"})," to your pages/layouts/components."]}),"\n",(0,t.jsx)(n.h2,{id:"compound-components-in-server-components",children:"Compound components in server components"}),"\n",(0,t.jsxs)(n.p,{children:["Some components like ",(0,t.jsx)(n.a,{href:"/core/popover",children:"Popover"})," have associated compound components (",(0,t.jsx)(n.code,{children:"Component.XXX"}),"),\nwhere ",(0,t.jsx)(n.code,{children:"XXX"})," is a compound component name. Compound components cannot be used in server components.\nInstead, use ",(0,t.jsx)(n.code,{children:"ComponentXXX"})," syntax or add ",(0,t.jsx)(n.code,{children:"'use client';"})," directive to the top of the file."]}),"\n",(0,t.jsx)(n.p,{children:"Example that will not work in server components:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import { Popover } from '@mantine/core';\n\n// This will throw an error\nexport default function Page() {\n return (\n \n Target\n Dropdown\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Example with ",(0,t.jsx)(n.code,{children:"'use client';"})," directive:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"'use client';\n\nimport { Popover } from '@mantine/core';\n\n// No error\nexport default function Page() {\n return (\n \n Target\n Dropdown\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Example with ",(0,t.jsx)(n.code,{children:"ComponentXXX"})," syntax:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"import {\n Popover,\n PopoverDropdown,\n PopoverTarget,\n} from '@mantine/core';\n\n// No error\nexport default function Page() {\n return (\n \n Trigger\n Dropdown\n \n );\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"app-router-tree-shaking",children:"app router tree shaking"}),"\n",(0,t.jsxs)(n.p,{children:["To enable tree shaking with app router, enable experimental ",(0,t.jsx)(n.code,{children:"optimizePackageImports"})," feature in\nyour ",(0,t.jsx)(n.code,{children:"next.config.mjs"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-tsx",children:"export default {\n // ...other configuration\n experimental: {\n optimizePackageImports: ['@mantine/core', '@mantine/hooks'],\n },\n};\n"})}),"\n",(0,t.jsx)(n.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,t.jsxs)(n.p,{children:["If you have any issues with Mantine in your Next.js application, please check\n",(0,t.jsx)(n.a,{href:"https://help.mantine.dev/q/server-components",children:"Help Center article"})," that covers\nmost common issues with app router and server components."]})]})}function c(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(p,{...e,children:(0,t.jsx)(a,{...e})})}function l(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}},function(e){e.O(0,[61177,66748,11340,92888,49774,40179],function(){return e(e.s=9714)}),_N_E=e.O()}]); \ No newline at end of file diff --git a/_next/static/chunks/pages/styles/css-files-list-c857e0178ecda28b.js b/_next/static/chunks/pages/styles/css-files-list-7a6c288d9484dc58.js similarity index 85% rename from _next/static/chunks/pages/styles/css-files-list-c857e0178ecda28b.js rename to _next/static/chunks/pages/styles/css-files-list-7a6c288d9484dc58.js index 5ac111be41a..aa180bee1d1 100644 --- a/_next/static/chunks/pages/styles/css-files-list-c857e0178ecda28b.js +++ b/_next/static/chunks/pages/styles/css-files-list-7a6c288d9484dc58.js @@ -1 +1 @@ -(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","Affix.css","Alert.css","Anchor.css","AspectRatio.css","AppShell.css","Avatar.css","BackgroundImage.css","Blockquote.css","Badge.css","Breadcrumbs.css","Burger.css","Button.css","Card.css","Center.css","Checkbox.css","Chip.css","Code.css","CloseButton.css","ColorPicker.css","ColorInput.css","ColorSwatch.css","Container.css","Combobox.css","Dialog.css","Divider.css","Drawer.css","Fieldset.css","Flex.css","FloatingIndicator.css","Grid.css","Group.css","Image.css","InlineInput.css","Input.css","Indicator.css","Kbd.css","List.css","Mark.css","LoadingOverlay.css","Loader.css","Menu.css","Modal.css","ModalBase.css","NavLink.css","Notification.css","NumberInput.css","Paper.css","Pagination.css","Overlay.css","Pill.css","PillsInput.css","Popover.css","PinInput.css","Progress.css","PasswordInput.css","RingProgress.css","Rating.css","Radio.css","ScrollArea.css","SegmentedControl.css","SemiCircleProgress.css","SimpleGrid.css","Skeleton.css","Slider.css","Spoiler.css","Stack.css","Stepper.css","Switch.css","Table.css","Tabs.css","Text.css","ThemeIcon.css","Title.css","Timeline.css","Tooltip.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/InlineInput.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}});var t=(0,n(73681).Z)("outline","copy","IconCopy",[["path",{d:"M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z",key:"svg-0"}],["path",{d:"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",key:"svg-1"}]])}},function(s){s.O(0,[61177,66748,11340,92888,49774,40179],function(){return s(s.s=3962)}),_N_E=s.O()}]); \ No newline at end of file +(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","Affix.css","Anchor.css","Alert.css","AspectRatio.css","AppShell.css","BackgroundImage.css","Avatar.css","Badge.css","Blockquote.css","Breadcrumbs.css","Burger.css","Button.css","Center.css","Card.css","Checkbox.css","CloseButton.css","Chip.css","Code.css","ColorInput.css","ColorPicker.css","ColorSwatch.css","Container.css","Combobox.css","Dialog.css","Divider.css","Drawer.css","Fieldset.css","Flex.css","FloatingIndicator.css","Group.css","Grid.css","Indicator.css","Input.css","InlineInput.css","Image.css","Kbd.css","Loader.css","List.css","LoadingOverlay.css","Mark.css","Menu.css","Modal.css","ModalBase.css","NavLink.css","NumberInput.css","Notification.css","Overlay.css","Pagination.css","Pill.css","Paper.css","PasswordInput.css","PillsInput.css","PinInput.css","Radio.css","Popover.css","Progress.css","Rating.css","RingProgress.css","ScrollArea.css","SegmentedControl.css","SemiCircleProgress.css","Skeleton.css","SimpleGrid.css","Slider.css","Spoiler.css","Stack.css","Stepper.css","Switch.css","Table.css","Tabs.css","Text.css","ThemeIcon.css","Timeline.css","Title.css","Tooltip.css","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/InlineInput.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}});var t=(0,n(73681).Z)("outline","copy","IconCopy",[["path",{d:"M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z",key:"svg-0"}],["path",{d:"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",key:"svg-1"}]])}},function(s){s.O(0,[61177,66748,11340,92888,49774,40179],function(){return s(s.s=3962)}),_N_E=s.O()}]); \ No newline at end of file diff --git a/_next/static/vJ5oG_rs2ZeLBCul9jcuK/_buildManifest.js b/_next/static/d_34EqhCvHopvGy1yGXA8/_buildManifest.js similarity index 97% rename from _next/static/vJ5oG_rs2ZeLBCul9jcuK/_buildManifest.js rename to _next/static/d_34EqhCvHopvGy1yGXA8/_buildManifest.js index 553eeedb263..ddece42de40 100644 --- a/_next/static/vJ5oG_rs2ZeLBCul9jcuK/_buildManifest.js +++ b/_next/static/d_34EqhCvHopvGy1yGXA8/_buildManifest.js @@ -1 +1 @@ -self.__BUILD_MANIFEST=function(s,e,c,t,a,o,i,r,u,h,n,d,p,k,g,l,b,f,j,m,y,v,x,w,z,_,q,I,B,F,A,D,E,L,M,N,S,T,U,C,P,G){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[f,j,m,y,v,F,"static/chunks/50864-e4c7b69a7e252055.js",s,a,i,r,n,x,w,A,D,"static/css/ae6de2a1a6f5a03d.css","static/chunks/pages/index-c30fad092e72d859.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-b352595ed598198f.js"],"/changelog/7-0-0":[e,u,v,s,c,t,r,l,E,"static/chunks/pages/changelog/7-0-0-36b72aa4cd6d4521.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,z,L,"static/chunks/pages/changelog/7-10-0-c9abb20d169ab799.js"],"/changelog/7-11-0":[e,o,d,p,g,_,s,c,t,r,k,l,M,"static/chunks/pages/changelog/7-11-0-31a14f64e6aa4d85.js"],"/changelog/7-12-0":[e,s,c,t,z,"static/chunks/pages/changelog/7-12-0-24aa1a8ed66cd2ac.js"],"/changelog/7-13-0":[e,o,h,p,g,s,c,t,k,"static/chunks/pages/changelog/7-13-0-b1db53fdede089c2.js"],"/changelog/7-2-0":[e,u,s,c,t,a,q,"static/chunks/pages/changelog/7-2-0-358c3e428e92b271.js"],"/changelog/7-3-0":[e,s,c,t,a,N,"static/chunks/pages/changelog/7-3-0-c2457747037c25e5.js"],"/changelog/7-4-0":[e,o,u,h,g,s,c,t,a,k,I,"static/chunks/pages/changelog/7-4-0-3a397992916eb098.js"],"/changelog/7-5-0":[e,o,h,d,b,"static/chunks/90673-85950aa8a22d7764.js",s,c,t,i,n,S,"static/chunks/pages/changelog/7-5-0-c1308b3c84a8affc.js"],"/changelog/7-6-0":[f,j,m,e,o,h,d,b,y,_,"static/chunks/65712-f40f739219aa1a66.js",s,c,t,r,k,l,x,"static/chunks/pages/changelog/7-6-0-8628b955b2ae884d.js"],"/changelog/7-7-0":[e,o,h,p,"static/chunks/95995-207431bd24d675e5.js",s,c,t,T,"static/chunks/pages/changelog/7-7-0-f21bca1aac8d0aa8.js"],"/changelog/7-8-0":[e,s,c,t,a,"static/chunks/pages/changelog/7-8-0-b64b260212c2dcce.js"],"/changelog/7-9-0":[e,o,"static/chunks/79518-0a02230cdc91ebbb.js",s,c,t,k,"static/chunks/pages/changelog/7-9-0-20bdcced38fc6299.js"],"/changelog/all-releases":[e,s,c,t,U,C,"static/chunks/pages/changelog/all-releases-ba9509eb98e67a8d.js"],"/changelog/previous-versions":[e,s,c,t,U,C,"static/chunks/pages/changelog/previous-versions-e4214f76d6356c6e.js"],"/charts/area-chart":[e,o,h,s,c,t,S,"static/chunks/pages/charts/area-chart-62d2a7b7728fa56a.js"],"/charts/bar-chart":[e,o,s,c,t,k,"static/chunks/pages/charts/bar-chart-e1b4d239e3fceb4d.js"],"/charts/bubble-chart":[e,o,p,s,c,t,"static/chunks/pages/charts/bubble-chart-d0b0de9f165deb06.js"],"/charts/composite-chart":[e,o,h,p,g,s,c,t,"static/chunks/pages/charts/composite-chart-5bc44b35ab2e98a0.js"],"/charts/donut-chart":[e,o,d,b,s,c,t,"static/chunks/pages/charts/donut-chart-2778d82c8e2fb788.js"],"/charts/getting-started":[e,s,c,t,"static/chunks/pages/charts/getting-started-daff1f25fb834dec.js"],"/charts/line-chart":[e,o,g,s,c,t,M,"static/chunks/pages/charts/line-chart-df2b9c39da018719.js"],"/charts/pie-chart":[e,o,d,b,s,c,t,"static/chunks/pages/charts/pie-chart-d690a352edec55d7.js"],"/charts/radar-chart":[e,o,d,_,s,c,t,"static/chunks/pages/charts/radar-chart-1e3d83ed9f5b2456.js"],"/charts/scatter-chart":[e,o,p,s,c,t,T,"static/chunks/pages/charts/scatter-chart-3815734b08d9f1b6.js"],"/charts/sparkline":[e,o,h,s,c,t,"static/chunks/pages/charts/sparkline-c85225ef1d0977ce.js"],"/colors-generator":["static/chunks/73227-b0f14b8ed2c49bd4.js","static/css/05cf04530a1ea457.css","static/chunks/pages/colors-generator-1ae7bbcec2ab63d3.js"],"/combobox":[r,"static/css/f928343dfc69fe64.css","static/chunks/pages/combobox-c968ba75f218794f.js"],"/contribute":[e,s,c,t,"static/chunks/pages/contribute-b01610800bd6930f.js"],"/core/accordion":[e,s,c,t,D,"static/chunks/pages/core/accordion-d2357a1c6c236003.js"],"/core/action-icon":[e,s,c,t,"static/chunks/pages/core/action-icon-8c43e4e6b56d7607.js"],"/core/affix":[e,s,c,t,"static/chunks/pages/core/affix-1ab29d18a9458f96.js"],"/core/alert":[e,s,c,t,"static/chunks/pages/core/alert-c545c35a84a20a7d.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-81eef1f994456cf4.js"],"/core/autocomplete":[e,s,c,t,r,"static/chunks/pages/core/autocomplete-f45e7b58fcfcb7ce.js"],"/core/avatar":[e,s,c,t,"static/chunks/pages/core/avatar-86f337c5a35e6642.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-da24976fd57e5c78.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-7c76b51444175f4c.js"],"/core/burger":[e,s,c,t,"static/chunks/pages/core/burger-59c7ddad419c61d6.js"],"/core/button":[e,s,c,t,"static/chunks/pages/core/button-07cc712cc54e5720.js"],"/core/card":[e,s,c,t,"static/chunks/pages/core/card-c0dfba85c04f83fd.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-17c79bea04285f31.js"],"/core/close-button":[e,s,c,t,"static/chunks/pages/core/close-button-5d36fee32cea002c.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-bf74ce469b131320.js"],"/core/color-input":[e,s,c,t,"static/chunks/pages/core/color-input-34d4bb8ea2cb0d0f.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-f54373ef6b169648.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-a5b10d37604011c0.js"],"/core/dialog":[e,s,c,t,"static/chunks/pages/core/dialog-0ee2ad0daa988ca8.js"],"/core/divider":[e,s,c,t,"static/chunks/pages/core/divider-3ae17ab9835b3fe2.js"],"/core/drawer":[e,s,c,t,a,N,"static/chunks/pages/core/drawer-61ff8bf2b6373364.js"],"/core/fieldset":[e,s,c,t,"static/chunks/pages/core/fieldset-2927990a25b75381.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-3919f0b2f53e52b3.js"],"/core/flex":[e,s,c,t,"static/chunks/pages/core/flex-52f4cc394a8d9a6e.js"],"/core/floating-indicator":[e,s,c,t,"static/chunks/pages/core/floating-indicator-3fad57dfa117bf59.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-6f5b1b0244e57ebd.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-55ebeb53b37e7bec.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-550d4dfd66713f69.js"],"/core/input":[e,"static/chunks/67915-c2c3ed65190fdfb6.js",s,c,t,"static/chunks/pages/core/input-1e66aaa49bc28335.js"],"/core/json-input":[e,s,c,t,"static/chunks/pages/core/json-input-1d0b5ef582b4b0bc.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-9f54dc768f7e2ece.js"],"/core/loader":[e,s,c,t,a,q,"static/chunks/pages/core/loader-3bb358c1c7fa74c8.js"],"/core/loading-overlay":[e,s,c,t,a,q,"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-56eadcc50fa16424.js"],"/core/modal":[e,s,c,t,a,P,"static/chunks/pages/core/modal-e41d251c082f061b.js"],"/core/multi-select":[e,s,c,t,r,A,"static/chunks/pages/core/multi-select-de417aa3d59a2c0d.js"],"/core/native-select":[e,s,c,t,"static/chunks/pages/core/native-select-39cc01eb3e99fb4e.js"],"/core/nav-link":[e,s,c,t,"static/chunks/pages/core/nav-link-a8e30dd223bda465.js"],"/core/notification":[e,s,c,t,"static/chunks/pages/core/notification-5d3a882d78f7c49e.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-7e460a56b5e6ee26.js"],"/core/overlay":[e,s,c,t,"static/chunks/pages/core/overlay-c10c8183933e27b6.js"],"/core/pagination":[e,s,c,t,w,"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-6162082f0d96ae0c.js"],"/core/pill":[e,s,c,t,"static/chunks/pages/core/pill-2097c74c603a8991.js"],"/core/pills-input":[e,s,c,t,r,"static/chunks/pages/core/pills-input-ed810da8948952e5.js"],"/core/pin-input":[e,s,c,t,"static/chunks/pages/core/pin-input-fa6b08e862999535.js"],"/core/popover":[e,s,c,t,i,r,n,"static/chunks/pages/core/popover-d1941d7a1a2b3afa.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-368b33421f67f1a4.js"],"/core/radio":[e,s,c,t,L,"static/chunks/pages/core/radio-e445ffc09012534f.js"],"/core/rating":[e,s,c,t,"static/chunks/pages/core/rating-eab9e1b99a33fdca.js"],"/core/ring-progress":[e,s,c,t,"static/chunks/pages/core/ring-progress-24d085167967dccc.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-3768acd6baa301f1.js"],"/core/select":[e,s,c,t,r,"static/chunks/pages/core/select-4343cf58d42090e5.js"],"/core/semi-circle-progress":[e,s,c,t,"static/chunks/pages/core/semi-circle-progress-c56a865eda73afa8.js"],"/core/simple-grid":[e,s,c,t,"static/chunks/pages/core/simple-grid-1198dc1ebd4b1ed1.js"],"/core/skeleton":[e,s,c,t,"static/chunks/pages/core/skeleton-76487ba047b11b16.js"],"/core/slider":[e,s,c,t,"static/chunks/pages/core/slider-3d7983caafcc8801.js"],"/core/space":[e,s,c,t,"static/chunks/pages/core/space-350955f817db0e9e.js"],"/core/spoiler":[e,s,c,t,"static/chunks/pages/core/spoiler-3d8204bbdffc37e3.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-00a045ace2734751.js"],"/core/switch":[e,s,c,t,"static/chunks/pages/core/switch-09c4d48e4d261ed9.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-79b1f0850b5591cc.js"],"/core/tags-input":[e,s,c,t,r,l,"static/chunks/pages/core/tags-input-3e8c2f565383a4d3.js"],"/core/text":[e,s,c,t,"static/chunks/pages/core/text-a89d2abfca4ac9eb.js"],"/core/text-input":[e,s,c,t,"static/chunks/pages/core/text-input-2470b0f90f1b4a4c.js"],"/core/textarea":[e,s,c,t,"static/chunks/pages/core/textarea-c9cfd50cf6dd7be0.js"],"/core/theme-icon":[e,s,c,t,"static/chunks/pages/core/theme-icon-1820dd1495efd15f.js"],"/core/timeline":[e,s,c,t,"static/chunks/pages/core/timeline-14aa39c89d096a71.js"],"/core/title":[e,s,c,t,"static/chunks/pages/core/title-ee755ea11837e030.js"],"/core/tooltip":[e,s,c,t,"static/chunks/pages/core/tooltip-1bc5e1dcf932773c.js"],"/core/transition":[e,s,c,t,"static/chunks/pages/core/transition-f4627d2aae83664c.js"],"/core/tree":[e,s,c,t,z,"static/chunks/pages/core/tree-60354682293c500a.js"],"/core/typography-styles-provider":[e,s,c,t,"static/chunks/pages/core/typography-styles-provider-85a3aaa109485004.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,i,"static/chunks/pages/dates/calendar-77eb84a2937baf7b.js"],"/dates/date-input":[e,s,c,t,i,"static/chunks/pages/dates/date-input-4fb5a71d4d2dd677.js"],"/dates/date-picker":[e,s,c,t,i,B,"static/chunks/pages/dates/date-picker-ce01bb6a04eebdf6.js"],"/dates/date-picker-input":[e,s,c,t,i,n,"static/chunks/pages/dates/date-picker-input-4f07b3067a329bd2.js"],"/dates/date-time-picker":[e,s,c,t,i,"static/chunks/pages/dates/date-time-picker-d4847175249474ec.js"],"/dates/dates-provider":[e,s,c,t,i,n,"static/chunks/pages/dates/dates-provider-ae0d770b44ad3aca.js"],"/dates/getting-started":[e,s,c,t,i,n,"static/chunks/pages/dates/getting-started-f4d36aa9e2676b07.js"],"/dates/month-picker":[e,s,c,t,i,B,"static/chunks/pages/dates/month-picker-416aed0a699fe8d7.js"],"/dates/month-picker-input":[e,s,c,t,i,"static/chunks/pages/dates/month-picker-input-8ddcea75b3345e88.js"],"/dates/time-input":[e,s,c,t,"static/chunks/pages/dates/time-input-b51d95537f01a966.js"],"/dates/year-picker":[e,s,c,t,i,B,"static/chunks/pages/dates/year-picker-ca359eb1d8ab6c4b.js"],"/dates/year-picker-input":[e,s,c,t,i,"static/chunks/pages/dates/year-picker-input-2bda76567cfcae0b.js"],"/form/actions":[e,s,c,t,"static/chunks/pages/form/actions-8b2e861bb00853eb.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,I,"static/chunks/pages/form/get-input-props-fd8fa77f29a47828.js"],"/form/nested":[e,s,c,t,a,"static/chunks/pages/form/nested-6b59f2f0a8d9f7ee.js"],"/form/recipes":["static/chunks/e1533f8b-7153877f366db892.js",e,"static/chunks/8511-0f8439ad050b9960.js",s,c,t,a,"static/chunks/pages/form/recipes-7618073e7ad82914.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-5ff3c777d28d15ee.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-83a489b9c2c7ea04.js"],"/form/validators":[e,u,s,c,t,a,"static/chunks/pages/form/validators-689791cf1e465152.js"],"/form/values":[e,u,s,c,t,a,I,"static/chunks/pages/form/values-1503f0ed105d6423.js"],"/getting-started":[e,s,c,t,"static/css/0ab03061551e1328.css","static/chunks/pages/getting-started-547eb75b6b303c17.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-d99651d38754d963.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-2f5646e1d0b60e30.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-6b90c7aad43e3c57.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-debe1655edf687d3.js"],"/hooks/use-favicon":[e,s,c,t,"static/chunks/pages/hooks/use-favicon-c3f20febea4e32a8.js"],"/hooks/use-fetch":[e,s,c,t,"static/chunks/pages/hooks/use-fetch-9692f9ecafba9998.js"],"/hooks/use-focus-return":[e,s,c,t,a,P,"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-88e6525c7a84cf9e.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-c990c8d3b18cfb32.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-440ae33549849135.js"],"/hooks/use-in-viewport":[e,s,c,t,"static/chunks/pages/hooks/use-in-viewport-25983a6eba236d52.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-c744f849bfc913db.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-70e3ae4d7633d198.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-4f2e7cf4eb2faed2.js"],"/hooks/use-media-query":[e,s,c,t,"static/chunks/pages/hooks/use-media-query-2f7473d413c1fd3f.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-5e2b1f2fd34dd909.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-46e82c190858013f.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,w,"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-973ab4f99fec647a.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-d0010c3285a143f8.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,G,"static/chunks/pages/overview-70b38e5b71eff8d6.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-c857e0178ecda28b.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-cf1e22365d8da0f6.js"],"/styles/data-attributes":[e,s,c,t,"static/chunks/pages/styles/data-attributes-df9d0d7657d185b5.js"],"/styles/emotion":[e,"static/chunks/94982-c98548e5f8ed561f.js",s,c,t,"static/chunks/pages/styles/emotion-8619b81a6070a3d3.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-871afb371e7f8201.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-654ac2141ba7fe55.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-65f82e227eb1f01b.js"],"/styles/styles-api":[e,s,c,t,"static/chunks/pages/styles/styles-api-f81e4b2b310c34e9.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-fa3014db9a4a360e.js"],"/styles/variants-sizes":[e,s,c,t,"static/chunks/pages/styles/variants-sizes-d4335752a799e630.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,G,"static/chunks/pages/theming/colors-2fb8e91668e1c317.js"],"/theming/default-props":[e,s,c,t,"static/chunks/pages/theming/default-props-73d59eae3c4e98b0.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-f7ab103599fd385f.js"],"/theming/typography":[e,s,c,t,"static/chunks/pages/theming/typography-9d5bf55922571f56.js"],"/x/carousel":[e,v,s,c,t,E,"static/chunks/pages/x/carousel-1c0485257d8b1d33.js"],"/x/code-highlight":[e,s,c,t,"static/chunks/pages/x/code-highlight-8c836f3e493499a4.js"],"/x/dropzone":[e,"static/chunks/40798-031316e118051cb4.js",s,c,t,"static/chunks/pages/x/dropzone-a2c189f1233b3fca.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-f997be645fa3e8ec.js"],"/x/nprogress":[e,s,c,t,"static/chunks/pages/x/nprogress-134b5b955ca456e8.js"],"/x/spotlight":[e,s,c,t,"static/chunks/pages/x/spotlight-da45e07aaab1c199.js"],"/x/tiptap":[f,j,m,e,y,F,"static/chunks/62618-898b9873621c4f45.js",s,c,t,x,"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-11-0","/changelog/7-12-0","/changelog/7-13-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/bubble-chart","/charts/composite-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/semi-circle-progress","/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-7524c574c6ee7d6c.js","static/chunks/61177-a44066ac8c193b12.js","static/css/2a6a1327ff7ff197.css","static/chunks/11340-48d30b9f76df1846.js","static/chunks/405-b9afb95a62b95e8e.js","static/chunks/16717-a5078a3134a58b9c.js","static/chunks/11204-349c2f2040e95d48.js","static/chunks/61324-4b6c10a59c320163.js","static/chunks/9462-2678ea25af5a102d.js","static/chunks/49625-ec8f4433a1aca362.js","static/chunks/18738-18fb21c11a93e1bd.js","static/chunks/59966-f953d8f419121bb2.js","static/chunks/1510-a372c7c06336b13f.js","static/chunks/40296-efb4c72642ec6812.js","static/chunks/91097-c2fecdf24f971912.js","static/chunks/77413-e470dbf103d60797.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-d69825d628818346.js","static/chunks/46159-1843392b4ae73b0a.js","static/chunks/59133-731690a69bebeaeb.js","static/chunks/37355-d2676dfcb2a1e2bd.js","static/chunks/36503-6d58d2ad55cb0c6a.js","static/chunks/74736-04bcea4d37d89920.js","static/chunks/36386-deed0b918bc48ed2.js","static/chunks/94323-a805137bf75328b2.js","static/chunks/59750-74d44d47aa88fe9a.js","static/chunks/91062-5f0862d5fe444848.js","static/chunks/82605-bb51aa96cceafaca.js","static/chunks/7763-40a8806abc6c8ee6.js","static/chunks/61623-ca620467026f9679.js","static/chunks/57902-46fe5bf38dc889f9.js","static/chunks/60214-dee9fbb7904103b6.js","static/chunks/89882-96660bc6700e6375.js","static/chunks/3309-81e429fcb9bdc808.js","static/css/d2e82f58d1b5e6b3.css","static/chunks/64485-e2f3ee5d89fa8588.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,p,k,g,l,b,f,j,m,y,v,x,w,z,_,q,I,B,F,A,D,E,L,M,N,S,T,U,C,P,G){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[f,j,m,y,v,F,"static/chunks/50864-e4c7b69a7e252055.js",s,a,i,r,n,x,w,A,D,"static/css/ae6de2a1a6f5a03d.css","static/chunks/pages/index-c30fad092e72d859.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-b352595ed598198f.js"],"/changelog/7-0-0":[e,u,v,s,c,t,r,l,E,"static/chunks/pages/changelog/7-0-0-36b72aa4cd6d4521.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,z,L,"static/chunks/pages/changelog/7-10-0-c9abb20d169ab799.js"],"/changelog/7-11-0":[e,o,d,p,g,_,s,c,t,r,k,l,M,"static/chunks/pages/changelog/7-11-0-31a14f64e6aa4d85.js"],"/changelog/7-12-0":[e,s,c,t,z,"static/chunks/pages/changelog/7-12-0-24aa1a8ed66cd2ac.js"],"/changelog/7-13-0":[e,o,h,p,g,s,c,t,k,"static/chunks/pages/changelog/7-13-0-b1db53fdede089c2.js"],"/changelog/7-2-0":[e,u,s,c,t,a,q,"static/chunks/pages/changelog/7-2-0-358c3e428e92b271.js"],"/changelog/7-3-0":[e,s,c,t,a,N,"static/chunks/pages/changelog/7-3-0-c2457747037c25e5.js"],"/changelog/7-4-0":[e,o,u,h,g,s,c,t,a,k,I,"static/chunks/pages/changelog/7-4-0-3a397992916eb098.js"],"/changelog/7-5-0":[e,o,h,d,b,"static/chunks/90673-85950aa8a22d7764.js",s,c,t,i,n,S,"static/chunks/pages/changelog/7-5-0-c1308b3c84a8affc.js"],"/changelog/7-6-0":[f,j,m,e,o,h,d,b,y,_,"static/chunks/65712-f40f739219aa1a66.js",s,c,t,r,k,l,x,"static/chunks/pages/changelog/7-6-0-8628b955b2ae884d.js"],"/changelog/7-7-0":[e,o,h,p,"static/chunks/95995-207431bd24d675e5.js",s,c,t,T,"static/chunks/pages/changelog/7-7-0-f21bca1aac8d0aa8.js"],"/changelog/7-8-0":[e,s,c,t,a,"static/chunks/pages/changelog/7-8-0-b64b260212c2dcce.js"],"/changelog/7-9-0":[e,o,"static/chunks/79518-0a02230cdc91ebbb.js",s,c,t,k,"static/chunks/pages/changelog/7-9-0-20bdcced38fc6299.js"],"/changelog/all-releases":[e,s,c,t,U,C,"static/chunks/pages/changelog/all-releases-ba9509eb98e67a8d.js"],"/changelog/previous-versions":[e,s,c,t,U,C,"static/chunks/pages/changelog/previous-versions-e4214f76d6356c6e.js"],"/charts/area-chart":[e,o,h,s,c,t,S,"static/chunks/pages/charts/area-chart-62d2a7b7728fa56a.js"],"/charts/bar-chart":[e,o,s,c,t,k,"static/chunks/pages/charts/bar-chart-e1b4d239e3fceb4d.js"],"/charts/bubble-chart":[e,o,p,s,c,t,"static/chunks/pages/charts/bubble-chart-d0b0de9f165deb06.js"],"/charts/composite-chart":[e,o,h,p,g,s,c,t,"static/chunks/pages/charts/composite-chart-5bc44b35ab2e98a0.js"],"/charts/donut-chart":[e,o,d,b,s,c,t,"static/chunks/pages/charts/donut-chart-2778d82c8e2fb788.js"],"/charts/getting-started":[e,s,c,t,"static/chunks/pages/charts/getting-started-daff1f25fb834dec.js"],"/charts/line-chart":[e,o,g,s,c,t,M,"static/chunks/pages/charts/line-chart-df2b9c39da018719.js"],"/charts/pie-chart":[e,o,d,b,s,c,t,"static/chunks/pages/charts/pie-chart-d690a352edec55d7.js"],"/charts/radar-chart":[e,o,d,_,s,c,t,"static/chunks/pages/charts/radar-chart-1e3d83ed9f5b2456.js"],"/charts/scatter-chart":[e,o,p,s,c,t,T,"static/chunks/pages/charts/scatter-chart-3815734b08d9f1b6.js"],"/charts/sparkline":[e,o,h,s,c,t,"static/chunks/pages/charts/sparkline-c85225ef1d0977ce.js"],"/colors-generator":["static/chunks/73227-b0f14b8ed2c49bd4.js","static/css/05cf04530a1ea457.css","static/chunks/pages/colors-generator-1ae7bbcec2ab63d3.js"],"/combobox":[r,"static/css/f928343dfc69fe64.css","static/chunks/pages/combobox-c968ba75f218794f.js"],"/contribute":[e,s,c,t,"static/chunks/pages/contribute-b01610800bd6930f.js"],"/core/accordion":[e,s,c,t,D,"static/chunks/pages/core/accordion-d2357a1c6c236003.js"],"/core/action-icon":[e,s,c,t,"static/chunks/pages/core/action-icon-8c43e4e6b56d7607.js"],"/core/affix":[e,s,c,t,"static/chunks/pages/core/affix-1ab29d18a9458f96.js"],"/core/alert":[e,s,c,t,"static/chunks/pages/core/alert-c545c35a84a20a7d.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-81eef1f994456cf4.js"],"/core/autocomplete":[e,s,c,t,r,"static/chunks/pages/core/autocomplete-f45e7b58fcfcb7ce.js"],"/core/avatar":[e,s,c,t,"static/chunks/pages/core/avatar-86f337c5a35e6642.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-da24976fd57e5c78.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-7c76b51444175f4c.js"],"/core/burger":[e,s,c,t,"static/chunks/pages/core/burger-59c7ddad419c61d6.js"],"/core/button":[e,s,c,t,"static/chunks/pages/core/button-07cc712cc54e5720.js"],"/core/card":[e,s,c,t,"static/chunks/pages/core/card-c0dfba85c04f83fd.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-17c79bea04285f31.js"],"/core/close-button":[e,s,c,t,"static/chunks/pages/core/close-button-5d36fee32cea002c.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-bf74ce469b131320.js"],"/core/color-input":[e,s,c,t,"static/chunks/pages/core/color-input-34d4bb8ea2cb0d0f.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-f54373ef6b169648.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-a5b10d37604011c0.js"],"/core/dialog":[e,s,c,t,"static/chunks/pages/core/dialog-0ee2ad0daa988ca8.js"],"/core/divider":[e,s,c,t,"static/chunks/pages/core/divider-3ae17ab9835b3fe2.js"],"/core/drawer":[e,s,c,t,a,N,"static/chunks/pages/core/drawer-61ff8bf2b6373364.js"],"/core/fieldset":[e,s,c,t,"static/chunks/pages/core/fieldset-2927990a25b75381.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-3919f0b2f53e52b3.js"],"/core/flex":[e,s,c,t,"static/chunks/pages/core/flex-52f4cc394a8d9a6e.js"],"/core/floating-indicator":[e,s,c,t,"static/chunks/pages/core/floating-indicator-3fad57dfa117bf59.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-6f5b1b0244e57ebd.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-55ebeb53b37e7bec.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-550d4dfd66713f69.js"],"/core/input":[e,"static/chunks/67915-c2c3ed65190fdfb6.js",s,c,t,"static/chunks/pages/core/input-1e66aaa49bc28335.js"],"/core/json-input":[e,s,c,t,"static/chunks/pages/core/json-input-1d0b5ef582b4b0bc.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-9f54dc768f7e2ece.js"],"/core/loader":[e,s,c,t,a,q,"static/chunks/pages/core/loader-3bb358c1c7fa74c8.js"],"/core/loading-overlay":[e,s,c,t,a,q,"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-56eadcc50fa16424.js"],"/core/modal":[e,s,c,t,a,P,"static/chunks/pages/core/modal-e41d251c082f061b.js"],"/core/multi-select":[e,s,c,t,r,A,"static/chunks/pages/core/multi-select-de417aa3d59a2c0d.js"],"/core/native-select":[e,s,c,t,"static/chunks/pages/core/native-select-39cc01eb3e99fb4e.js"],"/core/nav-link":[e,s,c,t,"static/chunks/pages/core/nav-link-a8e30dd223bda465.js"],"/core/notification":[e,s,c,t,"static/chunks/pages/core/notification-5d3a882d78f7c49e.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-7e460a56b5e6ee26.js"],"/core/overlay":[e,s,c,t,"static/chunks/pages/core/overlay-c10c8183933e27b6.js"],"/core/pagination":[e,s,c,t,w,"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-6162082f0d96ae0c.js"],"/core/pill":[e,s,c,t,"static/chunks/pages/core/pill-2097c74c603a8991.js"],"/core/pills-input":[e,s,c,t,r,"static/chunks/pages/core/pills-input-ed810da8948952e5.js"],"/core/pin-input":[e,s,c,t,"static/chunks/pages/core/pin-input-fa6b08e862999535.js"],"/core/popover":[e,s,c,t,i,r,n,"static/chunks/pages/core/popover-d1941d7a1a2b3afa.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-368b33421f67f1a4.js"],"/core/radio":[e,s,c,t,L,"static/chunks/pages/core/radio-e445ffc09012534f.js"],"/core/rating":[e,s,c,t,"static/chunks/pages/core/rating-eab9e1b99a33fdca.js"],"/core/ring-progress":[e,s,c,t,"static/chunks/pages/core/ring-progress-24d085167967dccc.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-3768acd6baa301f1.js"],"/core/select":[e,s,c,t,r,"static/chunks/pages/core/select-4343cf58d42090e5.js"],"/core/semi-circle-progress":[e,s,c,t,"static/chunks/pages/core/semi-circle-progress-c56a865eda73afa8.js"],"/core/simple-grid":[e,s,c,t,"static/chunks/pages/core/simple-grid-1198dc1ebd4b1ed1.js"],"/core/skeleton":[e,s,c,t,"static/chunks/pages/core/skeleton-76487ba047b11b16.js"],"/core/slider":[e,s,c,t,"static/chunks/pages/core/slider-3d7983caafcc8801.js"],"/core/space":[e,s,c,t,"static/chunks/pages/core/space-350955f817db0e9e.js"],"/core/spoiler":[e,s,c,t,"static/chunks/pages/core/spoiler-3d8204bbdffc37e3.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-00a045ace2734751.js"],"/core/switch":[e,s,c,t,"static/chunks/pages/core/switch-09c4d48e4d261ed9.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-79b1f0850b5591cc.js"],"/core/tags-input":[e,s,c,t,r,l,"static/chunks/pages/core/tags-input-3e8c2f565383a4d3.js"],"/core/text":[e,s,c,t,"static/chunks/pages/core/text-a89d2abfca4ac9eb.js"],"/core/text-input":[e,s,c,t,"static/chunks/pages/core/text-input-2470b0f90f1b4a4c.js"],"/core/textarea":[e,s,c,t,"static/chunks/pages/core/textarea-c9cfd50cf6dd7be0.js"],"/core/theme-icon":[e,s,c,t,"static/chunks/pages/core/theme-icon-1820dd1495efd15f.js"],"/core/timeline":[e,s,c,t,"static/chunks/pages/core/timeline-14aa39c89d096a71.js"],"/core/title":[e,s,c,t,"static/chunks/pages/core/title-ee755ea11837e030.js"],"/core/tooltip":[e,s,c,t,"static/chunks/pages/core/tooltip-1bc5e1dcf932773c.js"],"/core/transition":[e,s,c,t,"static/chunks/pages/core/transition-f4627d2aae83664c.js"],"/core/tree":[e,s,c,t,z,"static/chunks/pages/core/tree-60354682293c500a.js"],"/core/typography-styles-provider":[e,s,c,t,"static/chunks/pages/core/typography-styles-provider-85a3aaa109485004.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,i,"static/chunks/pages/dates/calendar-77eb84a2937baf7b.js"],"/dates/date-input":[e,s,c,t,i,"static/chunks/pages/dates/date-input-4fb5a71d4d2dd677.js"],"/dates/date-picker":[e,s,c,t,i,B,"static/chunks/pages/dates/date-picker-ce01bb6a04eebdf6.js"],"/dates/date-picker-input":[e,s,c,t,i,n,"static/chunks/pages/dates/date-picker-input-4f07b3067a329bd2.js"],"/dates/date-time-picker":[e,s,c,t,i,"static/chunks/pages/dates/date-time-picker-9773bb5f487b96ad.js"],"/dates/dates-provider":[e,s,c,t,i,n,"static/chunks/pages/dates/dates-provider-ae0d770b44ad3aca.js"],"/dates/getting-started":[e,s,c,t,i,n,"static/chunks/pages/dates/getting-started-f4d36aa9e2676b07.js"],"/dates/month-picker":[e,s,c,t,i,B,"static/chunks/pages/dates/month-picker-416aed0a699fe8d7.js"],"/dates/month-picker-input":[e,s,c,t,i,"static/chunks/pages/dates/month-picker-input-708d369fcbcdea9f.js"],"/dates/time-input":[e,s,c,t,"static/chunks/pages/dates/time-input-b51d95537f01a966.js"],"/dates/year-picker":[e,s,c,t,i,B,"static/chunks/pages/dates/year-picker-ca359eb1d8ab6c4b.js"],"/dates/year-picker-input":[e,s,c,t,i,"static/chunks/pages/dates/year-picker-input-8a2d23fedd16630b.js"],"/form/actions":[e,s,c,t,"static/chunks/pages/form/actions-8b2e861bb00853eb.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,I,"static/chunks/pages/form/get-input-props-fd8fa77f29a47828.js"],"/form/nested":[e,s,c,t,a,"static/chunks/pages/form/nested-6b59f2f0a8d9f7ee.js"],"/form/recipes":["static/chunks/e1533f8b-7153877f366db892.js",e,"static/chunks/8511-0f8439ad050b9960.js",s,c,t,a,"static/chunks/pages/form/recipes-7618073e7ad82914.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-5ff3c777d28d15ee.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-83a489b9c2c7ea04.js"],"/form/validators":[e,u,s,c,t,a,"static/chunks/pages/form/validators-689791cf1e465152.js"],"/form/values":[e,u,s,c,t,a,I,"static/chunks/pages/form/values-1503f0ed105d6423.js"],"/getting-started":[e,s,c,t,"static/css/0ab03061551e1328.css","static/chunks/pages/getting-started-547eb75b6b303c17.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-8f6faa0f438214b2.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-d99651d38754d963.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-2f5646e1d0b60e30.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-6b90c7aad43e3c57.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-debe1655edf687d3.js"],"/hooks/use-favicon":[e,s,c,t,"static/chunks/pages/hooks/use-favicon-c3f20febea4e32a8.js"],"/hooks/use-fetch":[e,s,c,t,"static/chunks/pages/hooks/use-fetch-9692f9ecafba9998.js"],"/hooks/use-focus-return":[e,s,c,t,a,P,"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-88e6525c7a84cf9e.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-c990c8d3b18cfb32.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-440ae33549849135.js"],"/hooks/use-in-viewport":[e,s,c,t,"static/chunks/pages/hooks/use-in-viewport-25983a6eba236d52.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-c744f849bfc913db.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-70e3ae4d7633d198.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-4f2e7cf4eb2faed2.js"],"/hooks/use-media-query":[e,s,c,t,"static/chunks/pages/hooks/use-media-query-2f7473d413c1fd3f.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-5e2b1f2fd34dd909.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-46e82c190858013f.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,w,"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-973ab4f99fec647a.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-d0010c3285a143f8.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,G,"static/chunks/pages/overview-70b38e5b71eff8d6.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-7a6c288d9484dc58.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-cf1e22365d8da0f6.js"],"/styles/data-attributes":[e,s,c,t,"static/chunks/pages/styles/data-attributes-df9d0d7657d185b5.js"],"/styles/emotion":[e,"static/chunks/94982-c98548e5f8ed561f.js",s,c,t,"static/chunks/pages/styles/emotion-8619b81a6070a3d3.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-871afb371e7f8201.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-654ac2141ba7fe55.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-65f82e227eb1f01b.js"],"/styles/styles-api":[e,s,c,t,"static/chunks/pages/styles/styles-api-f81e4b2b310c34e9.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-fa3014db9a4a360e.js"],"/styles/variants-sizes":[e,s,c,t,"static/chunks/pages/styles/variants-sizes-d4335752a799e630.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,G,"static/chunks/pages/theming/colors-2fb8e91668e1c317.js"],"/theming/default-props":[e,s,c,t,"static/chunks/pages/theming/default-props-73d59eae3c4e98b0.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-f7ab103599fd385f.js"],"/theming/typography":[e,s,c,t,"static/chunks/pages/theming/typography-9d5bf55922571f56.js"],"/x/carousel":[e,v,s,c,t,E,"static/chunks/pages/x/carousel-1c0485257d8b1d33.js"],"/x/code-highlight":[e,s,c,t,"static/chunks/pages/x/code-highlight-8c836f3e493499a4.js"],"/x/dropzone":[e,"static/chunks/40798-031316e118051cb4.js",s,c,t,"static/chunks/pages/x/dropzone-a2c189f1233b3fca.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-f997be645fa3e8ec.js"],"/x/nprogress":[e,s,c,t,"static/chunks/pages/x/nprogress-134b5b955ca456e8.js"],"/x/spotlight":[e,s,c,t,"static/chunks/pages/x/spotlight-da45e07aaab1c199.js"],"/x/tiptap":[f,j,m,e,y,F,"static/chunks/62618-898b9873621c4f45.js",s,c,t,x,"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-11-0","/changelog/7-12-0","/changelog/7-13-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/bubble-chart","/charts/composite-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/semi-circle-progress","/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-7524c574c6ee7d6c.js","static/chunks/61177-a44066ac8c193b12.js","static/css/2a6a1327ff7ff197.css","static/chunks/11340-48d30b9f76df1846.js","static/chunks/405-b9afb95a62b95e8e.js","static/chunks/16717-a5078a3134a58b9c.js","static/chunks/11204-349c2f2040e95d48.js","static/chunks/61324-e85fd15080090d13.js","static/chunks/9462-2678ea25af5a102d.js","static/chunks/49625-ec8f4433a1aca362.js","static/chunks/18738-e3fdf80fddfa2f79.js","static/chunks/59966-f953d8f419121bb2.js","static/chunks/1510-a372c7c06336b13f.js","static/chunks/40296-efb4c72642ec6812.js","static/chunks/91097-c2fecdf24f971912.js","static/chunks/77413-e470dbf103d60797.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-f2d71a58b8a4a91c.js","static/chunks/46159-1843392b4ae73b0a.js","static/chunks/59133-731690a69bebeaeb.js","static/chunks/37355-d2676dfcb2a1e2bd.js","static/chunks/36503-6d58d2ad55cb0c6a.js","static/chunks/74736-04bcea4d37d89920.js","static/chunks/36386-deed0b918bc48ed2.js","static/chunks/94323-a805137bf75328b2.js","static/chunks/59750-74d44d47aa88fe9a.js","static/chunks/91062-5f0862d5fe444848.js","static/chunks/82605-bb51aa96cceafaca.js","static/chunks/7763-40a8806abc6c8ee6.js","static/chunks/61623-ca620467026f9679.js","static/chunks/57902-46fe5bf38dc889f9.js","static/chunks/60214-dee9fbb7904103b6.js","static/chunks/89882-96660bc6700e6375.js","static/chunks/3309-81e429fcb9bdc808.js","static/css/d2e82f58d1b5e6b3.css","static/chunks/64485-e2f3ee5d89fa8588.js","static/css/74f4115ba6605d28.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB(); \ No newline at end of file diff --git a/_next/static/vJ5oG_rs2ZeLBCul9jcuK/_ssgManifest.js b/_next/static/d_34EqhCvHopvGy1yGXA8/_ssgManifest.js similarity index 100% rename from _next/static/vJ5oG_rs2ZeLBCul9jcuK/_ssgManifest.js rename to _next/static/d_34EqhCvHopvGy1yGXA8/_ssgManifest.js diff --git a/about/index.html b/about/index.html index 257273dc4a3..16d0f681f1e 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 XFollow 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 XFollow on 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 63c888c292d..273ca2a5e83 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 0ab24f0da1d..b678ac8e8c2 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 XFollow 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 XFollow on 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 23eea2f61b9..e9da2b09d02 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 XFollow 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 XFollow on 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 ee1b450f503..6dc5a303052 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';
@@ -339,4 +339,4 @@
 
 function Demo() {
   return <Box bd="1px solid red.5" />;
-}

    Previous

    Version v7.11.0

    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 XFollow 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.11.0

    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 XFollow on 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-11-0/index.html b/changelog/7-11-0/index.html index 3ef91eefb45..8cb2eb9617c 100644 --- a/changelog/7-11-0/index.html +++ b/changelog/7-11-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.11.0

    Release date

    June 26th, 2024

    Source code

    Release on GitHub

    withProps function

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

    Version v7.11.0

    Release date

    June 26th, 2024

    Source code

    Release on GitHub

    withProps function

    All Mantine components now have withProps static function that can be used to add default props to the component:

    import { IMaskInput } from 'react-imask';
@@ -234,4 +234,4 @@
 
  • Spoiler component now supports controlled expanded state with expanded and onExpandedChange props
    • 
 
  • Burger component now supports lineSize prop to change lines height
    • 
 
  • Calendar, DatePicker and other similar components now support highlightToday prop to highlight today's date
    • 
-
    Previous
    Version v7.12.0
    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 XFollow 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.12.0

    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 XFollow on 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-12-0/index.html b/changelog/7-12-0/index.html index 2cb2b7ff896..7370bc41c73 100644 --- a/changelog/7-12-0/index.html +++ b/changelog/7-12-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.12.0

    Release date

    August 6th, 2024

    Source code

    Release on GitHub

    Notifications at any position

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

    Version v7.12.0

    Release date

    August 6th, 2024

    Source code

    Release on GitHub

    Notifications at any position

    It is now possible to display notifications at any position on the screen with @mantine/notifications package:

    import { Button } from '@mantine/core';
@@ -170,4 +170,4 @@
 
  • use-form with mode="uncontrolled" now triggers additional rerender when dirty state changes to allow subscribing to form state changes.
    • 
 
  • ScrollArea component now supports onTopReached and onBottomReached props. The functions are called when the user scrolls to the top or bottom of the scroll area.
    • 
 
  • Accordion.Panel component now supports onTransitionEnd prop that is called when the panel animation completes.
    • 
-
    Previous
    Version v7.13.0
    Next
    Version v7.11.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 XFollow 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.13.0

    Next

    Version v7.11.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 XFollow on 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-13-0/index.html b/changelog/7-13-0/index.html index 8100b2fb013..bd83e6a65f1 100644 --- a/changelog/7-13-0/index.html +++ b/changelog/7-13-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.13.0

    Release date

    September 26th, 2024

    Source code

    Release on GitHub

    Container queries support in Grid

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

    Version v7.13.0

    Release date

    September 26th, 2024

    Source code

    Release on GitHub

    Container queries support in Grid

    You can now use container queries in Grid component. With container queries, all responsive values are adjusted based on the container width, not the viewport width.

    @@ -227,4 +227,4 @@
    • New demo has been added to Chip component with an example of how to deselect radio chip
    • BarChart now supports maxBarWidth prop to set the maximum width of each bar in px
      • -

    Previous

    Rich text editor

    Next

    Version v7.12.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 XFollow 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.12.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 XFollow on 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 2d66d80cd11..73e5bc32f4d 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 XFollow 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 XFollow on 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 ded93532836..57fc293659e 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 XFollow 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 XFollow on 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 460df7d9a18..e2481b612d0 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 XFollow 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 XFollow on 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 78ad7405188..b0f2628eb46 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 XFollow 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 XFollow on 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 aa05e6631bc..042b32c01fa 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 XFollow 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 XFollow on 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 f9952ca785f..fe274f4d5b0 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:

    @@ -289,4 +289,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 XFollow 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 XFollow on 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 50f3da04fb4..0a371b42e7d 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 XFollow 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 XFollow on 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 fe3464cb6e7..ec09203c0f2 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 XFollow 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 XFollow on 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 16e73118b0c..fe06de63b19 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.13.0
    ChangelogGitHub release

    September 26, 2024

    7.13.X patches:

    7.12.0
    ChangelogGitHub release

    August 6, 2024

    7.12.X patches:

    7.11.0
    ChangelogGitHub release

    June 26, 2024

    7.11.X patches:

    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 XFollow 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.13.0
    ChangelogGitHub release

    September 26, 2024

    7.13.X patches:

    7.12.0
    ChangelogGitHub release

    August 6, 2024

    7.12.X patches:

    7.11.0
    ChangelogGitHub release

    June 26, 2024

    7.11.X patches:

    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 XFollow on 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 604b9a09ff1..6ca16db3238 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.13.0
    ChangelogGitHub release

    September 26, 2024

    7.13.X patches:

    7.12.0
    ChangelogGitHub release

    August 6, 2024

    7.12.X patches:

    7.11.0
    ChangelogGitHub release

    June 26, 2024

    7.11.X patches:

    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 XFollow 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.13.0
    ChangelogGitHub release

    September 26, 2024

    7.13.X patches:

    7.12.0
    ChangelogGitHub release

    August 6, 2024

    7.12.X patches:

    7.11.0
    ChangelogGitHub release

    June 26, 2024

    7.11.X patches:

    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 XFollow on 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 740d1a77e75..ce0975d43e2 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.

    @@ -749,4 +749,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 XFollow 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 XFollow on 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 980095eb51f..c17c2da6205 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.

    @@ -638,4 +638,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 XFollow 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 XFollow on 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/bubble-chart/index.html b/charts/bubble-chart/index.html index 4e4330ca429..765b6155187 100644 --- a/charts/bubble-chart/index.html +++ b/charts/bubble-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

    BubbleChart

    Bubble 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

    BubbleChart

    Bubble chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    import { BubbleChart } from '@mantine/charts';
 import { data } from './data';
 
@@ -135,4 +135,4 @@
       dataKey={{ x: 'hour', y: 'index', z: 'value' }}
     />
   );
-}

    Previous

    ScatterChart

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

    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 XFollow on 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/composite-chart/index.html b/charts/composite-chart/index.html index 3e33d3aed50..acc55f1e9a6 100644 --- a/charts/composite-chart/index.html +++ b/charts/composite-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

    CompositeChart

    Composed chart with support for Area, Bar and Line charts

    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

    CompositeChart

    Composed chart with support for Area, Bar and Line charts

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

    CompositeChart allows using Line, Area and Bar charts together in a single chart:

    Tick line
    Grid axis
    import { CompositeChart } from '@mantine/charts';
@@ -612,4 +612,4 @@
       ]}
     />
   );
-}

    Previous

    LineChart

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

    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 XFollow on 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 973c888fed8..d9541dd48b2 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

    CompositeChart

    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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    CompositeChart

    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 XFollow on 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 bb7ce06d6c5..b3d660b9e89 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 XFollow 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 XFollow on 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 cd811170c84..f0f477ea46e 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';
 
@@ -631,4 +631,4 @@
       series={[{ name: 'Apples', color: 'indigo.6' }]}
     />
   );
-}

    Previous

    BarChart

    Next

    CompositeChart

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    CompositeChart

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on 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 dac7a000839..5f25408a74c 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 XFollow 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 XFollow on 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 6817f4579b4..5816f26e21f 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';
@@ -122,4 +122,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 XFollow 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 XFollow on 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 fa4e0a25936..8124dd80be8 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

    Scatter 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

    Scatter chart component

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/charts

    Usage

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

    Previous

    RadarChart

    Next

    BubbleChart

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    BubbleChart

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on 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 34eff6c7a48..fdb04f1ee6b 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

    BubbleChart

    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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    BubbleChart

    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 XFollow on 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 e9f81d96304..efdddfacb2e 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#ecf4ff
    1#dce4f5
    2#b9c7e2
    3#94a8d0
    4#748dc0
    5#5f7cb7
    6#5474b4
    7#44639f
    8#3a5890
    9#2c4b80
    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#ecf4ff
    1#dce4f5
    2#b9c7e2
    3#94a8d0
    4#748dc0
    5#5f7cb7
    6#5474b4
    7#44639f
    8#3a5890
    9#2c4b80
    Variants preview
    FilledLightOutlineSubtle
    Colors array
    [
   "#ecf4ff",
   "#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 XFollow 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 XFollow on 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 4724433fdce..9fd68199fa0 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 6502cf806af..763b13ff57e 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 XFollow 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 XFollow on GithubGitHub 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 0c40ebb50f8..43fcbfe27ca 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 XFollow 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 XFollow on GithubGitHub 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 ea177383674..5d031382723 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 XFollow 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 XFollow on GithubGitHub 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 0010e008f12..6b51074bfcc 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 XFollow 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 XFollow on GithubGitHub 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 a9de6fc7001..9fdaed72a69 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 XFollow 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 XFollow on GithubGitHub 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 0b0bcbadc18..1ed612c913c 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 XFollow 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 XFollow on GithubGitHub 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 5afcf73b98f..39b13236ca1 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 XFollow 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 XFollow on GithubGitHub 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 528304b9900..84f7d1a5ce5 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 XFollow 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 XFollow on GithubGitHub 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 0d965070c9b..24785b0e837 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 XFollow 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 XFollow on GithubGitHub 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 d8bcd07e56e..ca5b8b83288 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';
 
@@ -244,4 +244,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 XFollow 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 XFollow on GithubGitHub 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 134568c77b4..5e21fa45956 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 XFollow 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 XFollow on GithubGitHub 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 72984f63434..82114c549f4 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 XFollow 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 XFollow on GithubGitHub 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 5655256e73f..574797c259c 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 XFollow 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 XFollow on GithubGitHub 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 52cdcf8b659..388932acea5 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 XFollow 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 XFollow on GithubGitHub 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 a324de2d19d..bcc9fe00d95 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 XFollow 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 XFollow on GithubGitHub 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 f4b32012aa9..9480550dc5c 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 component state. If opened prop is set, cross will be rendered, otherwise – burger.

    @@ -45,4 +45,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 XFollow 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 XFollow on GithubGitHub 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 effbd55aaba..516af384949 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 XFollow 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 XFollow on GithubGitHub 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 db5af014832..4a657a6ff0a 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 XFollow 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 XFollow on GithubGitHub 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 c6833a22237..e9d6aeaa848 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 XFollow 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 XFollow on GithubGitHub 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 11f6a73c9ef..67b3cef51d0 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 XFollow 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 XFollow on GithubGitHub 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 5e56548e8de..a69e4a186f4 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() {
@@ -145,4 +145,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 XFollow 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 XFollow on GithubGitHub 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 a6d646c081b..91e40ec35ba 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 XFollow 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 XFollow on GithubGitHub 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 cba73112861..26b81cfbe25 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 XFollow 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 XFollow on GithubGitHub 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 184e18885e6..61d2e49eae8 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 XFollow 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 XFollow on GithubGitHub 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 61688fda6f3..cb1baebfb97 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 XFollow 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 XFollow on GithubGitHub 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 1ab07596232..19ba3532d0c 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 XFollow 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 XFollow on GithubGitHub 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 3035ac4b824..1d840e37474 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 XFollow 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 XFollow on GithubGitHub 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 181a756663c..6610005942f 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 XFollow 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 XFollow on GithubGitHub 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 c9e18e465c8..cfc6e8d934b 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 XFollow 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 XFollow on GithubGitHub 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 3cace7a549f..f0ea61c6b64 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 XFollow 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 XFollow on GithubGitHub 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 759ea814b47..178a4c522c2 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 XFollow 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 XFollow on GithubGitHub 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 6dee8a1fa9a..3f0d242144b 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 XFollow 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 XFollow on GithubGitHub 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 1a854764220..c04e3413319 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 XFollow 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 XFollow on GithubGitHub 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 811827e100b..7cac8eb2b34 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 XFollow 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 XFollow on GithubGitHub 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 f27dda4debf..c2c2c270f69 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 XFollow 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 XFollow on GithubGitHub 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 4a1af21c722..615548d6fd1 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 XFollow 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 XFollow on GithubGitHub 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 2abc9dcbfb0..1bf1715fa1f 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 XFollow 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 XFollow on GithubGitHub 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 6e2f4e0c396..4274b79c3f5 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 @@ -206,4 +206,4 @@ <Tabs.Panel value="3">Third tab content</Tabs.Panel> </Tabs> ); -}

    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 XFollow 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 XFollow on GithubGitHub 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 65017e7326f..0da15858a79 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 XFollow 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 XFollow on GithubGitHub 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 ce69f6f2dbe..e09126c4bc5 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() {
@@ -216,4 +216,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 XFollow 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 XFollow on GithubGitHub 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 4613dc5751b..ab9a749c2fa 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 XFollow 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 XFollow on GithubGitHub 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 e102003f7bf..be8c16482e0 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 XFollow 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 XFollow on GithubGitHub 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 df1b3b276ca..3c788e09905 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 XFollow 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 XFollow on GithubGitHub 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 b5174691d88..dcc0904ee37 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 XFollow 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 XFollow on GithubGitHub 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 aca98a429c2..98eba3c03ff 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 XFollow 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 XFollow on GithubGitHub 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 c21a2512c5a..176288dc85d 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 XFollow 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 XFollow on GithubGitHub 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 df78a4ea429..f55a76b8732 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 XFollow 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 XFollow on GithubGitHub 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 baddbaa6b3f..a9ea9f17044 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 XFollow 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 XFollow on GithubGitHub 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 8ee01e752a0..04d5d87d5e0 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 XFollow 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 XFollow on GithubGitHub 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 5e2cc7dc149..3b34e29a88b 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 XFollow 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 XFollow on GithubGitHub 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 33dee5e8acd..5b1d138c493 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 XFollow 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 XFollow on GithubGitHub 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 fb077c7373c..61808dbaa0d 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 XFollow 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 XFollow on GithubGitHub 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 e9c0a723023..f20589399de 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 XFollow 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 XFollow on GithubGitHub 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 e9d06066b99..2f20e1f6566 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 XFollow 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 XFollow on GithubGitHub 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 6000154c95a..95dbdd4f581 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.

    @@ -652,4 +652,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 XFollow 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 XFollow on GithubGitHub 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 01db4b5059a..a2e035fdce3 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 XFollow 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 XFollow on GithubGitHub 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 17c0df5cd9b..3d1e2f5e356 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 XFollow 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 XFollow on GithubGitHub 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 b390eca16ed..e685e54b9a5 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 XFollow 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 XFollow on GithubGitHub 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 55b6a5074cf..57fa639b574 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 XFollow 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 XFollow on GithubGitHub 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 d875473b7df..9a83da9bfdd 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.

    @@ -331,4 +331,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 XFollow 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 XFollow on GithubGitHub 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 3261c9d7a7e..aa69e9b2be8 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 XFollow 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 XFollow on GithubGitHub 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 367d9ea03e0..e507f1f331f 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-zd5nm5zit

    id: 1, name: mantine-swzwhe7uy

    id: 2, name: mantine-o9pb1bwfl

    id: 3, name: mantine-88t3q3ewz

    id: 4, name: mantine-4j3gce1j0

    import { useState } from 'react';
+
    id: 0, name: mantine-ha0hlgote
    id: 1, name: mantine-pg2nq0kle
    id: 2, name: mantine-ayuk9jcny
    id: 3, name: mantine-cuqoq8rtc
    id: 4, name: mantine-kh0m82tkg
    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 XFollow 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 XFollow on GithubGitHub 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 d062011998d..e3b5ed643dd 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 XFollow 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 XFollow on GithubGitHub 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 cb22fa757c0..31829094d24 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';
 
@@ -251,4 +251,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 XFollow 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 XFollow on GithubGitHub 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 35678eb8f60..e0ff63fe04f 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 XFollow 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 XFollow on GithubGitHub 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 33068aff379..cf780ebba0c 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 XFollow 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 XFollow on GithubGitHub 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 7523e95f8ac..4dbcdb26dfb 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 XFollow 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 XFollow on GithubGitHub 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 a68abd9305f..915ac130dd6 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 XFollow 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 XFollow on GithubGitHub 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 2f231bcf5e3..40e4ed4ae82 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 XFollow 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 XFollow on GithubGitHub 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 cd8618307fa..f785d8b1b3c 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() {
@@ -165,4 +165,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 XFollow 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 XFollow on GithubGitHub 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 030e2d46274..9b41b913e8c 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 XFollow 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 XFollow on GithubGitHub 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 801103a51b5..8fffe14ca28 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 XFollow 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 XFollow on GithubGitHub 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 b254f381961..b0d4c315b75 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

    SemiCircleProgress

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

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

    SemiCircleProgress

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on GithubGitHub 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 d56361ba0de..a9e4823aa19 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 XFollow 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 XFollow on GithubGitHub 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 7efef48cb7a..e0e213a58e7 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 XFollow 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 XFollow on GithubGitHub 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 de428f5427f..d33283a2a4e 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.

    @@ -668,4 +668,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 XFollow 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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file diff --git a/core/semi-circle-progress/index.html b/core/semi-circle-progress/index.html index 96c979dcbf8..7d0d0405684 100644 --- a/core/semi-circle-progress/index.html +++ b/core/semi-circle-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

    SemiCircleProgress

    Represent progress with semi 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

    SemiCircleProgress

    Represent progress with semi circle diagram

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/core

    Usage

    Label

    Fill direction
    Orientation
    Filled segment color
    Size
    Thickness
    Value
    import { SemiCircleProgress } from '@mantine/core';
 
 function Demo() {
@@ -59,4 +59,4 @@
       </Button>
     </>
   );
-}

    Previous

    RingProgress

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

    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 XFollow on GithubGitHub 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 f5500d6c262..7831a4b7f90 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 XFollow 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 XFollow on GithubGitHub 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 97ceb181385..72088c0a15e 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

    SemiCircleProgress

    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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    Previous

    SemiCircleProgress

    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 XFollow on GithubGitHub 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 a3ece8c1208..5be51068fd8 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() {
@@ -381,4 +381,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 XFollow 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 XFollow on GithubGitHub 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 8e5146e019b..f09a17ba8ea 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 XFollow 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 XFollow on GithubGitHub 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 0351de9f597..4666184fb55 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.

    @@ -79,4 +79,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 XFollow 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 XFollow on GithubGitHub 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 b42ef2f6465..a7e19db1131 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 XFollow 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 XFollow on GithubGitHub 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 73c780825fe..97ba637187f 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 XFollow 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 XFollow on GithubGitHub 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 31e9cee76e3..80314783a97 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 XFollow 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 XFollow on GithubGitHub 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 e011b092731..f04d58b08d1 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 XFollow 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 XFollow on GithubGitHub 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 5ed2b49690a..f3059564f38 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';
 
@@ -433,4 +433,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 XFollow 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 XFollow on GithubGitHub 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 d0df5376347..42e23973dd6 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.

    @@ -616,4 +616,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 XFollow 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 XFollow on GithubGitHub 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 443a4816715..3fe18e3b421 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 XFollow 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 XFollow on GithubGitHub 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 4fc3a22b0ab..e25e16ad15b 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 XFollow 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 XFollow on GithubGitHub 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 c0034ede0ec..abab022dafa 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 XFollow 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 XFollow on GithubGitHub 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 3816b14eb58..6795d594549 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 XFollow 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 XFollow on GithubGitHub 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 4ea3ea3f7e1..51bd30c528e 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 XFollow 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 XFollow on GithubGitHub 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 324f823b9f0..58872413ff7 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.

    @@ -86,4 +86,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 XFollow 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 XFollow on GithubGitHub 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 eae7e94c6b8..13baa02017b 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 XFollow 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 XFollow on GithubGitHub 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 2504903f222..ed1670c898e 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:

    @@ -108,4 +108,4 @@ </Transition> </Flex> ); -}

    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 XFollow 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 XFollow on GithubGitHub 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 de70064437b..ffe920c74ce 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';
@@ -326,4 +326,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 XFollow 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 XFollow on GithubGitHub 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 82c5763de7a..5ef0a456649 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 XFollow 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 XFollow on GithubGitHub 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 d34f74585a3..15bd1b7d8f0 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 XFollow 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 XFollow on GithubGitHub 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 6528422ffee..c94e0db138b 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 XFollow 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 XFollow on 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 87f4b567aea..5584be0a414 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
    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
    3
    import { Indicator } from '@mantine/core';
+
    MoTuWeThFrSaSu
    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
    3
    import { Indicator } from '@mantine/core';
 import { Calendar } from '@mantine/dates';
 
 function Demo() {
@@ -113,4 +113,4 @@
       }}
     />
   );
-}
    Previous
    DatesProvider
    Next
    DateInput
    Welcome to Mantine, React components library that you always wished for
    Build fully functional accessible web applications faster than ever
    About
    ContributeAbout MantineChangelogReleases
    Community
    Chat on DiscordFollow on XFollow 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 XFollow on 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 7767b6d004f..056b8692cf3 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 XFollow 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 XFollow on 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 3de264f3378..1351b1f4fcb 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 XFollow 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 XFollow on 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 836b9889718..2314de3c78a 100644 --- a/dates/date-picker/index.html +++ b/dates/date-picker/index.html @@ -4,8 +4,8 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    DatePicker

    Inline date, multiple dates and dates range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    -
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for
    DatePicker
    Inline date, multiple dates and dates range picker
    Import
    Source
    View source code
    Docs
    Edit this page
    Package
    @mantine/dates
    Usage
    
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -16,7 +16,7 @@
 
    Set allowDeselect to allow user to deselect current selected date by clicking on it.
 allowDeselect is disregarded when type prop is range or multiple. When date is
 deselected onChange is called with null.
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -25,7 +25,7 @@
 }
    
 
    Multiple dates
    
 
    Set type="multiple" to allow user to pick multiple dates:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -34,7 +34,7 @@
 }
    
 
    Dates range
    
 
    Set type="range" to allow user to pick dates range:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -45,7 +45,7 @@
 
    By default, it is not allowed to select single date as range – when user clicks the same date second time it is deselected.
 To change this behavior set allowSingleDateInRange prop. allowSingleDateInRange is ignored when
 type prop is not range.
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -71,7 +71,7 @@
 
    Set date, and onDateChange props to make currently displayed month, year and decade controlled.
 By doing so, you can customize date picking experience, for example, when user selects first date in range,
 you can add one month to the current date value:
    
-
    MoTuWeThFrSaSu
    import { useState } from 'react';
+
    MoTuWeThFrSaSu
    import { useState } from 'react';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -111,7 +111,7 @@
 }
    
 
    Hide outside dates
    
 
    Set hideOutsideDates prop to remove all dates that do not belong to the current month:
    
-
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker hideOutsideDates />;
@@ -120,7 +120,7 @@
 
    Set firstDayOfWeek prop to configure first day of week. The prop accepts number from 0 to 6,
 where 0 is Sunday and 6 is Saturday. Default value is 1 – Monday. You can also configure this option
 for all components with DatesProvider.
    
-
    SuMoTuWeThFrSa
    SaSuMoTuWeThFr
    import { Group } from '@mantine/core';
+
    SuMoTuWeThFrSa
    SaSuMoTuWeThFr
    import { Group } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -133,7 +133,7 @@
 }
    
 
    Hide weekdays
    
 
    Set hideWeekdays prop to hide weekdays names:
    
-
    import { DatePicker } from '@mantine/dates';
+
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker hideWeekdays />;
@@ -142,7 +142,7 @@
 
    Use weekendDays prop to configure weekend days. The prop accepts an array of numbers from 0 to 6,
 where 0 is Sunday and 6 is Saturday. Default value is [0, 6] – Saturday and Sunday. You can also configure this option
 for all components with DatesProvider.
    
-
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker weekendDays={[1, 2]} />;
@@ -150,7 +150,7 @@
 
    Render day function
    
 
    You can customize day rendering with renderDay prop. For example, it can be used to add
 Indicator to certain days.
    
-
    MoTuWeThFrSaSu
    import { Indicator } from '@mantine/core';
+
    MoTuWeThFrSaSu
    import { Indicator } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 
 const dayRenderer: DatePickerProps['renderDay'] = (date) => {
@@ -254,14 +254,14 @@
 
    To disable specific dates use excludeDate prop.
 It accepts function that takes date as argument and returns boolean value – if true is returned, date will be disabled.
 Example of disabling all dates that are not Fridays:
    
-
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
+
    MoTuWeThFrSaSu
    import { DatePicker } from '@mantine/dates';
 
 function Demo() {
   return <DatePicker excludeDate={(date) => date.getDay() !== 5} />;
 }
    
 
    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() {
@@ -271,7 +271,7 @@
   );
 }
    
 
    Max level
    
-
    MoTuWeThFrSaSu
    October 2024
    MoTuWeThFrSaSu
    import { Group } from '@mantine/core';
+
    MoTuWeThFrSaSu
    October 2024
    MoTuWeThFrSaSu
    import { Group } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 
 function Demo() {
@@ -283,14 +283,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" />;
@@ -316,7 +316,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() {
@@ -366,4 +366,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 XFollow 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 XFollow on 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 483d96d5a8a..351e1ec2dbf 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 XFollow 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 XFollow on 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 d41c030210a..211942b4af2 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 XFollow 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 XFollow on 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 c601993c088..df9d9371b6f 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 XFollow 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 XFollow on 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 03bf88f8cc1..437c8dca2af 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 XFollow 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 XFollow on 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 920393d23f8..2b223192ba3 100644 --- a/dates/month-picker/index.html +++ b/dates/month-picker/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    MonthPicker

    Inline month, multiple months and months range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

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

    MonthPicker

    Inline month, multiple months and months range picker

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/dates

    Usage

    import { useState } from 'react';
 import { MonthPicker } from '@mantine/dates';
 
@@ -258,4 +258,4 @@
 }

    Keyboard interactions

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

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

    Previous

    DatePickerInput

    Next

    MonthPickerInput

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow 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 XFollow on 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 2048c2cc7e7..9104cae633b 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';
 
@@ -97,4 +97,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 XFollow 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 XFollow on 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 6799e7f86dd..a6f0509275b 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 XFollow 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 XFollow on 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 595d387c613..bcc2ccedceb 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 XFollow 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 XFollow on 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 9b346b014ce..cf3b5c4a093 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.

    @@ -97,4 +97,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 XFollow 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 XFollow on 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 7937ae09638..4d4a40a4a32 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 XFollow 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 XFollow on 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 988c8647d59..0c936167b4b 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 XFollow 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 XFollow on 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 a7ff82e62dd..7fe9be0ede1 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 XFollow 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 XFollow on 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 24fda6eb941..91e45d33a16 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 XFollow 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 XFollow on 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 7634ec2457c..2f60edc5dbc 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 XFollow 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 XFollow on 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 7fcaf657925..98ca19a86ba 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
      • @@ -491,4 +491,4 @@ 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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +});

    Previous

    Form validation

    Next

    Form validators

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

    Build fully functional accessible web applications faster than ever

    About

    ContributeAbout MantineChangelogReleases

    Community

    Chat on DiscordFollow on XFollow on 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 d94aead1fd0..8af946dafd5 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 XFollow 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 XFollow on 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 0af850913b8..c852b397a71 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 XFollow 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 XFollow on 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 34e71b135f0..7f5b54d3807 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 XFollow 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 XFollow on 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 070ace3c772..91d3a620b9b 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 XFollow 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 XFollow on 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 c40db8ee0bd..ac61b433674 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';
@@ -603,4 +603,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 XFollow 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 XFollow on 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 acee7b2b163..e506db5f5fa 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 XFollow 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 XFollow on 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 e68783787a7..cec0ed7854e 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 XFollow 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 XFollow on 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 847f199c4c6..b8994a35040 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. @@ -172,4 +172,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 XFollow 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 XFollow on 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 5b5ed5b8338..e20f1b5af9f 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 XFollow 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 XFollow on 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 353680f66eb..721ba9aac9a 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 XFollow 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 XFollow on 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 de3d5789893..a5bb27dad7c 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 XFollow 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 XFollow on 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 82fc74e90eb..490fc0f82f0 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 XFollow 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 XFollow on 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 e7e831daf94..da4a92d38d1 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 XFollow 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 XFollow on 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 f9f3c94b7ed..f8367474ba3 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 XFollow 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 XFollow on 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 340fc95fdbe..fc16ed6c792 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 @@ -57,7 +57,7 @@ export default function Document() { return ( - <Html lang="en"> + <Html lang="en" suppressHydrationWarning> <Head> <ColorSchemeScript defaultColorScheme="auto" /> </Head> @@ -90,7 +90,7 @@ children: React.ReactNode; }) { return ( - <html lang="en"> + <html lang="en" suppressHydrationWarning> <head> <ColorSchemeScript /> </head> @@ -106,19 +106,6 @@

    If you use both app and pages router in one application, you need to setup both pages/_app.tsx and app/layout.tsx files as described above.

    Next.js Link with polymorphic components

    -

    Next.js Link does not work in the same way as other similar components in all Next.js versions.

    -

    With Next.js 12 and below:

    -
    import Link from 'next/link';
-import { Button } from '@mantine/core';
-
-function Demo() {
-  return (
-    <Link href="/hello" passHref>
-      <Button component="a">Next link button</Button>
-    </Link>
-  );
-}
    -

    With Next.js 13 and above:

    import Link from 'next/link';
 import { Button } from '@mantine/core';
 
@@ -189,4 +176,8 @@
   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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +};
    +

    Troubleshooting

    +

    If you have any issues with Mantine in your Next.js application, please check +Help Center article that covers +most common issues with app router and server components.

    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 XFollow on 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 f59ba4bf138..14a83b4733b 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 XFollow 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 XFollow on 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 dd036d622a7..b9f02321ac9 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 XFollow 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 XFollow on 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 97b6b1b991a..c759a9e73c1 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 XFollow 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 XFollow on 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 8dc4c72b6e7..b0f9aa7fe6f 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 XFollow 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 XFollow on 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 f06e05612d3..f4ca72ce53f 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 XFollow 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 XFollow on 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 0ea6c0b9b2f..08ebde307b0 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 XFollow 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 XFollow on 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 7c0c8efd84f..39c09ea9c37 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 XFollow 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 XFollow on 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 485c44a04c8..82a9fc95c1e 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 XFollow 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 XFollow on 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 dbd27a1b8a0..4e18842a418 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 XFollow 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 XFollow on 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 ac346b35743..42c1c1304c2 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 XFollow 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 XFollow on 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 1e379245555..c7d6b1f90f7 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 XFollow 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 XFollow on 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 b01e9a10242..e5ed4dddcf6 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 XFollow 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 XFollow on 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 d4de3504abf..4f9748a5e3e 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 XFollow 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 XFollow on 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 97f048a9520..b9a83d4949a 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 XFollow 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 XFollow on 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 0a8d7e0673e..98ee530a887 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 XFollow 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 XFollow on 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 848c964d7d2..55c5ca79e1a 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 XFollow 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 XFollow on 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 66a580f53f8..b0200cf8981 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 XFollow 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 XFollow on 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 3dde16b14fc..b5a8bb1f9dd 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 XFollow 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 XFollow on 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 9aba00f6d53..4c698972826 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 XFollow 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 XFollow on 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 a73750f6308..84ad007ac18 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 XFollow 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 XFollow on 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 025f1aadf97..8475c15a6b2 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 XFollow 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 XFollow on 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 226d444f138..db01ad682ca 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 XFollow 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 XFollow on 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 2bb994f66e8..4c92574cfc2 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 XFollow 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 XFollow on 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 c6e901ef718..bfb12c0daa1 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 XFollow 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 XFollow on 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 1902e8904a0..7c453386104 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 XFollow 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 XFollow on 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 d1ebc91824d..4b6ea8c33de 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 XFollow 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 XFollow on 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 9e00effaff9..6b391a6fff2 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-3hvs1fgni

    import { Button, Text, Group } from '@mantine/core';
+
    mantine-mf1civt7j
    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 XFollow 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 XFollow on 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 b7efe26cb7d..77f6b7e045d 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 XFollow 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 XFollow on 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 9a45e1f3136..0f0198cc79b 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 XFollow 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 XFollow on 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 684ca6e6824..af3053fad3e 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 XFollow 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 XFollow on 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 618a2b464b5..c4b33873d87 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 XFollow 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 XFollow on 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 90127585f51..b97a6ed3325 100644 --- a/hooks/use-hover/index.html +++ b/hooks/use-hover/index.html @@ -4,7 +4,7 @@ var computedColorScheme = colorScheme !== "auto" ? colorScheme : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; document.documentElement.setAttribute("data-mantine-color-scheme", computedColorScheme); } catch (e) {} -
    Welcome to Mantine, React components library that you always wished for
    Welcome to Mantine, React components library that you always wished for

    use-hover

    Detects if given element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

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

    use-hover

    Detects if given element is hovered

    Import

    Source

    View source code

    Docs

    Edit this page

    Package

    @mantine/hooks

    Usage

    Put mouse over me please

    import { useHover } from '@mantine/hooks';
 
 function Demo() {
@@ -19,4 +19,4 @@
 
    function useHover<T extends HTMLElement = HTMLDivElement>(): {
   ref: React.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 XFollow 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 XFollow on 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 d011acb0a96..13f0f9dcb89 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 XFollow 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 XFollow on 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 368c2dd0546..ff7513fcf98 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 XFollow 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 XFollow on 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 e2f8de8eb6c..8520172491e 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 XFollow 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 XFollow on 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 87ca9576ed0..3afd4610376 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 XFollow 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 XFollow on 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 77c36311f7d..6ee32802120 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 XFollow 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 XFollow on 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 9dc325e1a07..d8c2bc82411 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';
@@ -67,4 +67,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 XFollow 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 XFollow on 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 fa071895e38..bfe0d87b975 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 XFollow 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 XFollow on 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 dfbeeb7c14a..6f4f72024d6 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 XFollow 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 XFollow on 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 794172a0522..436c06264b8 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 XFollow 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 XFollow on 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 4563ab89248..b0327a47ea7 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 XFollow 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 XFollow on 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 960b83daccb..6c9b82d9822 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 XFollow 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 XFollow on 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 ca74a0c750a..e991e597dd9 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 XFollow 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 XFollow on 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 1b6d0335088..7f10e5f1c1e 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 XFollow 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 XFollow on 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 f2203837cee..e29da5a6cff 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 XFollow 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 XFollow on 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 77610334cdb..e6105c6c750 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 XFollow 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 XFollow on 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 f0c92a02a74..660870fe9ca 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 XFollow 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 XFollow on 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 7761b6fcd15..3fd05be8290 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';
@@ -299,4 +299,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 XFollow 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 XFollow on 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 caad6147d87..958b59bc467 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 XFollow 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 XFollow on 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 b05b8f061f6..506bbfccb0f 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 XFollow 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 XFollow on 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 938f709643f..ab0d544b075 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 XFollow 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 XFollow on 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 4563a48c074..0dbb5cd61b8 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 XFollow 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 XFollow on 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 5d184eb8705..c0757f0fc3b 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 XFollow 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 XFollow on 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 6beba9f36f1..1194705083b 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 XFollow 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 XFollow on 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 64f34739275..7476f33fc2b 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 XFollow 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 XFollow on 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 219482d9fe5..d79f91761b9 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 XFollow 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 XFollow on 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 8a6e7fe3627..12036feb54c 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 XFollow 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 XFollow on 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 07709926cf3..cbebba34ef1 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 XFollow 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 XFollow on 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 59983ef1032..b498e32c8b9 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 XFollow 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 XFollow on 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 f98c2d280e7..472b2204f72 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 XFollow 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 XFollow on 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 778e055a6e9..0ade6be6193 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 XFollow 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 XFollow on 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 4c403694875..b88b70135aa 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 XFollow 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 XFollow on 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 4a36319c4f5..3b25d45c9ef 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

    {
@@ -47,4 +47,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 XFollow 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 XFollow on 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 95dc7fd8f62..d512b18dc0a 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 XFollow 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 XFollow on 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 46a5ad52de8..e44d919e356 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 XFollow 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 XFollow on 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 35e6473d31b..9452568a060 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 XFollow 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 XFollow on 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 6d9a364fe64..67c7fa9efdc 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 XFollow 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 XFollow on 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 7e2babfab55..5eff600e262 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 XFollow 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 XFollow on 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 cc931e8aade..0c315b7ea94 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 XFollow 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 XFollow on 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 d4e7df57a89..d374c72e6d6 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 XFollow 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 XFollow on 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 ab434521d0c..8662c891d92 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 XFollow 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 XFollow on 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 0d2efc2ddce..7d9d234dec7 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 XFollow 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 XFollow on 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 4937b9ecbb5..039e98931a8 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 XFollow 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 XFollow on 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 4fb24c8307d..97814c6f730 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 XFollow 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 XFollow on 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 ff3e792d9b3..cadf959a4ac 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>
     </>
   );
-}

    What people say

    sideral
    @sideral

    You nailed it!

    Man, I've been doing Front-End for 20 years. This is, hands-down, the best component library I've ever used. What's more, the parts that I didn't like (Styling from JS Objects, slow with big forms) have been addressed in v7. Please keep it up, this library deserves more exposure, it just works and works well and beautifully. Many thanks to @rtivital and the contributors!

    smsuraj100
    @smsuraj100

    One of the best UI libraries I've come across.

    I am a senior Frontend Developer and wanted to use something new instead of Material UI and came across this, it has been well thought of all the different scenarios you and come across, and the hooks are just pure love :)

    Thank you so much for this.

    leighton-carr
    @leighton-carr

    Absurdly good

    Hope this kind of post is ok - just wanted to say thank you.

    I've been writing software professionally for 25 years, with the last 15 in web (mostly internal projects in my company). This is easily the best component library I've ever used.

    In every other instance I've run into the boundaries of what the library does and have to spend a lot of time and energy customizing or extending it. Not only does Mantine provide easy access to everything under the hood, but 99% the things you need are provided as default options. I've started to lose count of the "guess I'd better build my standard xyz... oh wait, they have that too" moments. Also the docs are perfect.

    Bravo, thank you.

    Gitgud6969
    @Gitgud6969

    Thank you mantine 💘

    Dear Mantine Team, thank you for putting this library together. I have started to use and love Mantine in my free time, and bringing this great library to good use in our company now. All the developers are very pleased with the development experience, the time savings for any bigger project is insane. The amount of flexibility we have with our designers and developers will result in great products. All thanks to every contributor. Continue the good work!

    SeeSharpCode
    @SeeSharpCode

    A solution for every problem

    Mantine has a solution for every problem I’ve needed to solve in my web app. Components and props are named clearly, design choices promote simplicity, and it looks beautiful out of the box. Thank you for jump starting my application in a big way!

    OmkoBass
    @OmkoBass

    Thank you Mantine!

    Out of all react component libraries that I have ever seen this one is the most straight forward, easy to use, well documented and really beautiful. I plan on switching and using this full time. Just wanted to say huge thanks to the people that made this.

    wvha
    @wvha

    Mantine >>>

    I started using Mantine for a personal project and it covers so many cases!! Enjoying every part of it so far and can't wait to get more in-depth with it.

    adamhp
    @adamhp

    Insane documentation

    I just have to say that the level of documentation, examples, and pure utility this provides is insane. Thanks to all the contributors.

    View more user feedback

    Ready to get started?

    Mantine can be used both for SPA and SSR applications. Follow one of the getting started guides to build an application with Mantine using Vite, Next.js, Remix, RedwoodJS or Gatsby:

    Recommended

    Vite

    Best choice for a single page application (SPA)

    Recommended

    Next.js

    Best choice for an application with SSR

    Remix

    Get started with Remix

    Redwood

    Get started with RedwoodJS

    Gatsby

    Get started with Gatsby

    Join the community

    Chat on Discord
    Join a community of 10,000+ developers to ask questions, share feedback and explore upcoming features
    Start a discussion
    Request new features, ask questions and provide feedback with GitHub discussions
    Help center
    Explore 30+ frequently asked questions
    Follow on X
    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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +}

    What people say

    sideral
    @sideral

    You nailed it!

    Man, I've been doing Front-End for 20 years. This is, hands-down, the best component library I've ever used. What's more, the parts that I didn't like (Styling from JS Objects, slow with big forms) have been addressed in v7. Please keep it up, this library deserves more exposure, it just works and works well and beautifully. Many thanks to @rtivital and the contributors!

    smsuraj100
    @smsuraj100

    One of the best UI libraries I've come across.

    I am a senior Frontend Developer and wanted to use something new instead of Material UI and came across this, it has been well thought of all the different scenarios you and come across, and the hooks are just pure love :)

    Thank you so much for this.

    leighton-carr
    @leighton-carr

    Absurdly good

    Hope this kind of post is ok - just wanted to say thank you.

    I've been writing software professionally for 25 years, with the last 15 in web (mostly internal projects in my company). This is easily the best component library I've ever used.

    In every other instance I've run into the boundaries of what the library does and have to spend a lot of time and energy customizing or extending it. Not only does Mantine provide easy access to everything under the hood, but 99% the things you need are provided as default options. I've started to lose count of the "guess I'd better build my standard xyz... oh wait, they have that too" moments. Also the docs are perfect.

    Bravo, thank you.

    Gitgud6969
    @Gitgud6969

    Thank you mantine 💘

    Dear Mantine Team, thank you for putting this library together. I have started to use and love Mantine in my free time, and bringing this great library to good use in our company now. All the developers are very pleased with the development experience, the time savings for any bigger project is insane. The amount of flexibility we have with our designers and developers will result in great products. All thanks to every contributor. Continue the good work!

    SeeSharpCode
    @SeeSharpCode

    A solution for every problem

    Mantine has a solution for every problem I’ve needed to solve in my web app. Components and props are named clearly, design choices promote simplicity, and it looks beautiful out of the box. Thank you for jump starting my application in a big way!

    OmkoBass
    @OmkoBass

    Thank you Mantine!

    Out of all react component libraries that I have ever seen this one is the most straight forward, easy to use, well documented and really beautiful. I plan on switching and using this full time. Just wanted to say huge thanks to the people that made this.

    wvha
    @wvha

    Mantine >>>

    I started using Mantine for a personal project and it covers so many cases!! Enjoying every part of it so far and can't wait to get more in-depth with it.

    adamhp
    @adamhp

    Insane documentation

    I just have to say that the level of documentation, examples, and pure utility this provides is insane. Thanks to all the contributors.

    View more user feedback

    Ready to get started?

    Mantine can be used both for SPA and SSR applications. Follow one of the getting started guides to build an application with Mantine using Vite, Next.js, Remix, RedwoodJS or Gatsby:

    Recommended

    Vite

    Best choice for a single page application (SPA)

    Recommended

    Next.js

    Best choice for an application with SSR

    Remix

    Get started with Remix

    Redwood

    Get started with RedwoodJS

    Gatsby

    Get started with Gatsby

    Join the community

    Chat on Discord
    Join a community of 10,000+ developers to ask questions, share feedback and explore upcoming features
    Start a discussion
    Request new features, ask questions and provide feedback with GitHub discussions
    Help center
    Explore 30+ frequently asked questions
    Follow on X
    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 XFollow on 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 d92e104f5d7..b02db0b3b12 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 cd9843dbdee..d56537f4fcb 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 ccf7931b446..70da4ca5bb3 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 be0bf2921f7..e05fe83e70e 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 1f7baaccd4b..b3a06aecf0e 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 6e3f475d158..68a6d0ccdf1 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 d1ab29dc363..bef66de6788 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 2c0f5dc52c0..8a13d868f29 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 e4c056efd32..66b6f88ff67 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 XFollow 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 XFollow on 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 1aa447f2541..dc30d16f40c 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1,293 +1,293 @@ -https://mantine.dev2024-10-17T07:43:38.866Zdaily0.7 -https://mantine.dev/4042024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/app-shell2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/about2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/colors-generator2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/combobox2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/contribute2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/getting-started2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/overview2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/submit-template2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/templates-usage2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-0-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-1-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-10-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-11-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-12-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-13-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-2-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-3-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-4-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-6-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-5-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-7-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-8-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/7-9-02024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/all-releases2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/changelog/previous-versions2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/area-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/bar-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/bubble-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/composite-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/donut-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/getting-started2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/line-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/pie-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/radar-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/scatter-chart2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/charts/sparkline2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/calendar2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/date-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/date-picker2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/date-picker-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/date-time-picker2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/dates-provider2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/getting-started2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/month-picker2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/month-picker-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/time-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/year-picker2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/dates/year-picker-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/accordion2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/action-icon2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/affix2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/alert2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/anchor2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/app-shell2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/aspect-ratio2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/autocomplete2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/avatar2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/background-image2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/badge2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/box2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/blockquote2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/breadcrumbs2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/burger2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/card2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/button2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/center2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/checkbox2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/chip2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/close-button2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/code2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/collapse2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/color-picker2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/color-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/color-swatch2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/combobox2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/container2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/copy-button2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/dialog2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/divider2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/drawer2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/fieldset2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/file-button2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/file-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/flex2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/floating-indicator2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/focus-trap2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/grid2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/group2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/highlight2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/hover-card2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/image2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/indicator2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/json-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/kbd2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/list2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/loader2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/loading-overlay2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/menu2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/mark2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/modal2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/multi-select2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/native-select2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/nav-link2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/notification2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/number-formatter2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/number-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/pagination2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/overlay2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/paper2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/password-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/pill2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/pills-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/pin-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/popover2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/portal2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/progress2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/radio2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/rating2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/ring-progress2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/scroll-area2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/segmented-control2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/select2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/semi-circle-progress2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/simple-grid2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/slider2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/skeleton2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/space2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/spoiler2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/stack2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/switch2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/stepper2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/table2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/tags-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/tabs2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/text-input2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/text2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/textarea2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/theme-icon2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/timeline2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/title2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/tooltip2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/transition2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/typography-styles-provider2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/tree2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/unstyled-button2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/core/visually-hidden2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/actions2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/create-form-context2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/errors2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/get-input-props2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/recipes2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/nested2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/schema-validation2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/status2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/uncontrolled2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/use-field2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/use-form2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/validation2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/validators2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/6x-to-7x2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/form/values2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/functions-reference2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/javascript2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/icons2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/jest2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/gatsby2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/polymorphic2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/next2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/remix2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/redwood2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/storybook2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/typescript2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/vite2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/guides/vitest2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-click-outside2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-color-scheme2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-clipboard2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-counter2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-debounced-callback2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-debounced-value2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-debounced-state2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-did-update2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-disclosure2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-document-title2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-document-visibility2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-element-size2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-event-listener2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-eye-dropper2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-favicon2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-fetch2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-focus-trap2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-focus-return2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-focus-within2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-force-update2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-fullscreen2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-hash2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-headroom2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-hover2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-hotkeys2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-id2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-idle2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-in-viewport2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-input-state2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-intersection2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-interval2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-isomorphic-effect2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-list-state2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-is-first-render2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-local-storage2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-logger2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-media-query2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-map2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-mounted2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-merged-ref2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-mouse2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-move2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-mutation-observer2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-os2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-network2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-orientation2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-page-leave2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-pagination2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-previous2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-queue2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-reduced-motion2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-resize-observer2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-set2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-scroll-into-view2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-set-state2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-shallow-effect2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-text-selection2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-state-history2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-throttled-callback2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-throttled-state2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-throttled-value2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-toggle2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-timeout2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-uncontrolled2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-validated-state2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-viewport-size2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-window-event2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/hooks/use-window-scroll2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/others/carousel2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/others/code-highlight2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/others/modals2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/others/dropzone2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/others/notifications2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/others/nprogress2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/others/spotlight2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/others/tiptap2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/color-functions2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/css-files-list2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/css-modules2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/css-variables2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/css-variables-list2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/data-attributes2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/emotion2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/global-styles2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/mantine-styles2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/postcss-preset2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/rem2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/responsive2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/rtl2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/sass2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/style2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/style-props2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/styles-api2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/styles-overview2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/unstyled2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/styles-performance2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/vanilla-extract2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/styles/variants-sizes2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/theming/color-schemes2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/theming/colors2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/theming/default-props2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/theming/default-theme2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/theming/mantine-provider2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/theming/theme-object2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/theming/typography2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/x/carousel2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/x/code-highlight2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/x/dropzone2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/x/modals2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/x/nprogress2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/x/notifications2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/x/spotlight2024-10-17T07:43:38.867Zdaily0.7 -https://mantine.dev/x/tiptap2024-10-17T07:43:38.867Zdaily0.7 +https://mantine.dev2024-10-23T16:15:32.050Zdaily0.7 +https://mantine.dev/4042024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/about2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/app-shell2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/colors-generator2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/combobox2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/contribute2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/getting-started2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/overview2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/submit-template2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/templates-usage2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-0-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-1-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-10-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-12-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-11-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-13-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-2-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-3-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-4-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-5-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-6-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-7-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-8-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/7-9-02024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/all-releases2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/changelog/previous-versions2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/area-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/bar-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/bubble-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/composite-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/donut-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/getting-started2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/line-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/pie-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/radar-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/scatter-chart2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/charts/sparkline2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/calendar2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/date-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/date-picker2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/date-picker-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/date-time-picker2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/dates-provider2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/getting-started2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/month-picker2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/month-picker-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/time-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/year-picker2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/dates/year-picker-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/accordion2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/action-icon2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/affix2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/anchor2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/alert2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/aspect-ratio2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/app-shell2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/autocomplete2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/avatar2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/background-image2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/badge2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/box2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/blockquote2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/breadcrumbs2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/burger2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/checkbox2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/button2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/center2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/card2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/collapse2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/code2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/close-button2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/chip2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/color-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/color-swatch2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/color-picker2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/combobox2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/container2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/copy-button2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/dialog2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/divider2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/fieldset2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/drawer2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/file-button2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/file-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/floating-indicator2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/flex2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/focus-trap2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/grid2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/group2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/highlight2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/hover-card2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/image2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/indicator2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/kbd2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/json-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/list2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/loader2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/loading-overlay2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/mark2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/menu2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/modal2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/multi-select2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/native-select2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/notification2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/nav-link2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/number-formatter2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/number-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/overlay2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/pagination2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/paper2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/password-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/pill2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/pills-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/pin-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/popover2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/portal2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/radio2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/progress2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/ring-progress2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/rating2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/scroll-area2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/segmented-control2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/select2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/semi-circle-progress2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/simple-grid2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/skeleton2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/slider2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/stack2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/space2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/spoiler2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/stepper2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/table2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/switch2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/tabs2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/tags-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/text2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/text-input2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/textarea2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/theme-icon2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/timeline2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/title2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/tooltip2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/transition2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/tree2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/typography-styles-provider2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/unstyled-button2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/core/visually-hidden2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/create-form-context2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/actions2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/errors2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/get-input-props2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/nested2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/recipes2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/schema-validation2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/status2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/uncontrolled2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/use-field2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/use-form2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/validation2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/validators2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/form/values2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/6x-to-7x2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/functions-reference2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/gatsby2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/javascript2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/icons2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/jest2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/redwood2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/next2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/polymorphic2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/remix2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/vite2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/typescript2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/storybook2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/guides/vitest2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/others/code-highlight2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/others/dropzone2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/others/carousel2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/others/modals2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/others/notifications2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/others/nprogress2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/others/spotlight2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/others/tiptap2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-click-outside2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-color-scheme2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-clipboard2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-counter2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-debounced-state2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-debounced-callback2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-debounced-value2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-did-update2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-disclosure2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-document-title2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-document-visibility2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-element-size2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-event-listener2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-eye-dropper2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-favicon2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-fetch2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-focus-return2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-focus-trap2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-focus-within2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-force-update2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-fullscreen2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-hash2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-headroom2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-hotkeys2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-hover2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-id2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-in-viewport2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-idle2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-input-state2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-intersection2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-interval2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-is-first-render2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-isomorphic-effect2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-list-state2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-local-storage2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-logger2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-map2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-media-query2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-merged-ref2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-mounted2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-move2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-mutation-observer2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-mouse2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-network2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-os2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-orientation2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-page-leave2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-previous2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-pagination2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-queue2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-reduced-motion2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-resize-observer2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-scroll-into-view2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-set2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-set-state2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-state-history2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-shallow-effect2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-text-selection2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-throttled-callback2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-throttled-state2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-throttled-value2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-timeout2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-toggle2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-uncontrolled2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-validated-state2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-viewport-size2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-window-event2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/hooks/use-window-scroll2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/css-files-list2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/color-functions2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/css-modules2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/css-variables-list2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/data-attributes2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/css-variables2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/emotion2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/global-styles2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/mantine-styles2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/postcss-preset2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/rem2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/responsive2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/rtl2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/sass2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/style2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/style-props2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/styles-api2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/styles-overview2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/styles-performance2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/unstyled2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/vanilla-extract2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/styles/variants-sizes2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/theming/color-schemes2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/theming/colors2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/theming/default-props2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/theming/default-theme2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/theming/mantine-provider2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/theming/theme-object2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/theming/typography2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/x/code-highlight2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/x/carousel2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/x/dropzone2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/x/modals2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/x/notifications2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/x/nprogress2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/x/tiptap2024-10-23T16:15:32.052Zdaily0.7 +https://mantine.dev/x/spotlight2024-10-23T16:15:32.052Zdaily0.7 \ No newline at end of file diff --git a/styles/color-functions/index.html b/styles/color-functions/index.html index 1a584eb80ec..522d02d1fae 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 XFollow 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 XFollow on 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 a080d930002..33288625a0b 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

    @@ -46,4 +46,4 @@ import '@mantine/core/styles/Button.css'; import '@mantine/core/styles/UnstyledButton.css';

    Files list

    -
    ComponentImport
    global
    import '@mantine/core/styles/global.css';
    Accordion
    import '@mantine/core/styles/Accordion.css';
    ActionIcon
    import '@mantine/core/styles/ActionIcon.css';
    Affix
    import '@mantine/core/styles/Affix.css';
    Alert
    import '@mantine/core/styles/Alert.css';
    Anchor
    import '@mantine/core/styles/Anchor.css';
    AspectRatio
    import '@mantine/core/styles/AspectRatio.css';
    AppShell
    import '@mantine/core/styles/AppShell.css';
    Avatar
    import '@mantine/core/styles/Avatar.css';
    BackgroundImage
    import '@mantine/core/styles/BackgroundImage.css';
    Blockquote
    import '@mantine/core/styles/Blockquote.css';
    Badge
    import '@mantine/core/styles/Badge.css';
    Breadcrumbs
    import '@mantine/core/styles/Breadcrumbs.css';
    Burger
    import '@mantine/core/styles/Burger.css';
    Button
    import '@mantine/core/styles/Button.css';
    Card
    import '@mantine/core/styles/Card.css';
    Center
    import '@mantine/core/styles/Center.css';
    Checkbox
    import '@mantine/core/styles/Checkbox.css';
    Chip
    import '@mantine/core/styles/Chip.css';
    Code
    import '@mantine/core/styles/Code.css';
    CloseButton
    import '@mantine/core/styles/CloseButton.css';
    ColorPicker
    import '@mantine/core/styles/ColorPicker.css';
    ColorInput
    import '@mantine/core/styles/ColorInput.css';
    ColorSwatch
    import '@mantine/core/styles/ColorSwatch.css';
    Container
    import '@mantine/core/styles/Container.css';
    Combobox
    import '@mantine/core/styles/Combobox.css';
    Dialog
    import '@mantine/core/styles/Dialog.css';
    Divider
    import '@mantine/core/styles/Divider.css';
    Drawer
    import '@mantine/core/styles/Drawer.css';
    Fieldset
    import '@mantine/core/styles/Fieldset.css';
    Flex
    import '@mantine/core/styles/Flex.css';
    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';
    InlineInput
    import '@mantine/core/styles/InlineInput.css';
    Input
    import '@mantine/core/styles/Input.css';
    Indicator
    import '@mantine/core/styles/Indicator.css';
    Kbd
    import '@mantine/core/styles/Kbd.css';
    List
    import '@mantine/core/styles/List.css';
    Mark
    import '@mantine/core/styles/Mark.css';
    LoadingOverlay
    import '@mantine/core/styles/LoadingOverlay.css';
    Loader
    import '@mantine/core/styles/Loader.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';
    Paper
    import '@mantine/core/styles/Paper.css';
    Pagination
    import '@mantine/core/styles/Pagination.css';
    Overlay
    import '@mantine/core/styles/Overlay.css';
    Pill
    import '@mantine/core/styles/Pill.css';
    PillsInput
    import '@mantine/core/styles/PillsInput.css';
    Popover
    import '@mantine/core/styles/Popover.css';
    PinInput
    import '@mantine/core/styles/PinInput.css';
    Progress
    import '@mantine/core/styles/Progress.css';
    PasswordInput
    import '@mantine/core/styles/PasswordInput.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.css';
    Rating
    import '@mantine/core/styles/Rating.css';
    Radio
    import '@mantine/core/styles/Radio.css';
    ScrollArea
    import '@mantine/core/styles/ScrollArea.css';
    SegmentedControl
    import '@mantine/core/styles/SegmentedControl.css';
    SemiCircleProgress
    import '@mantine/core/styles/SemiCircleProgress.css';
    SimpleGrid
    import '@mantine/core/styles/SimpleGrid.css';
    Skeleton
    import '@mantine/core/styles/Skeleton.css';
    Slider
    import '@mantine/core/styles/Slider.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.css';
    Stack
    import '@mantine/core/styles/Stack.css';
    Stepper
    import '@mantine/core/styles/Stepper.css';
    Switch
    import '@mantine/core/styles/Switch.css';
    Table
    import '@mantine/core/styles/Table.css';
    Tabs
    import '@mantine/core/styles/Tabs.css';
    Text
    import '@mantine/core/styles/Text.css';
    ThemeIcon
    import '@mantine/core/styles/ThemeIcon.css';
    Title
    import '@mantine/core/styles/Title.css';
    Timeline
    import '@mantine/core/styles/Timeline.css';
    Tooltip
    import '@mantine/core/styles/Tooltip.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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file +
    ComponentImport
    global
    import '@mantine/core/styles/global.css';
    Accordion
    import '@mantine/core/styles/Accordion.css';
    ActionIcon
    import '@mantine/core/styles/ActionIcon.css';
    Affix
    import '@mantine/core/styles/Affix.css';
    Anchor
    import '@mantine/core/styles/Anchor.css';
    Alert
    import '@mantine/core/styles/Alert.css';
    AspectRatio
    import '@mantine/core/styles/AspectRatio.css';
    AppShell
    import '@mantine/core/styles/AppShell.css';
    BackgroundImage
    import '@mantine/core/styles/BackgroundImage.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';
    Burger
    import '@mantine/core/styles/Burger.css';
    Button
    import '@mantine/core/styles/Button.css';
    Center
    import '@mantine/core/styles/Center.css';
    Card
    import '@mantine/core/styles/Card.css';
    Checkbox
    import '@mantine/core/styles/Checkbox.css';
    CloseButton
    import '@mantine/core/styles/CloseButton.css';
    Chip
    import '@mantine/core/styles/Chip.css';
    Code
    import '@mantine/core/styles/Code.css';
    ColorInput
    import '@mantine/core/styles/ColorInput.css';
    ColorPicker
    import '@mantine/core/styles/ColorPicker.css';
    ColorSwatch
    import '@mantine/core/styles/ColorSwatch.css';
    Container
    import '@mantine/core/styles/Container.css';
    Combobox
    import '@mantine/core/styles/Combobox.css';
    Dialog
    import '@mantine/core/styles/Dialog.css';
    Divider
    import '@mantine/core/styles/Divider.css';
    Drawer
    import '@mantine/core/styles/Drawer.css';
    Fieldset
    import '@mantine/core/styles/Fieldset.css';
    Flex
    import '@mantine/core/styles/Flex.css';
    FloatingIndicator
    import '@mantine/core/styles/FloatingIndicator.css';
    Group
    import '@mantine/core/styles/Group.css';
    Grid
    import '@mantine/core/styles/Grid.css';
    Indicator
    import '@mantine/core/styles/Indicator.css';
    Input
    import '@mantine/core/styles/Input.css';
    InlineInput
    import '@mantine/core/styles/InlineInput.css';
    Image
    import '@mantine/core/styles/Image.css';
    Kbd
    import '@mantine/core/styles/Kbd.css';
    Loader
    import '@mantine/core/styles/Loader.css';
    List
    import '@mantine/core/styles/List.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';
    NumberInput
    import '@mantine/core/styles/NumberInput.css';
    Notification
    import '@mantine/core/styles/Notification.css';
    Overlay
    import '@mantine/core/styles/Overlay.css';
    Pagination
    import '@mantine/core/styles/Pagination.css';
    Pill
    import '@mantine/core/styles/Pill.css';
    Paper
    import '@mantine/core/styles/Paper.css';
    PasswordInput
    import '@mantine/core/styles/PasswordInput.css';
    PillsInput
    import '@mantine/core/styles/PillsInput.css';
    PinInput
    import '@mantine/core/styles/PinInput.css';
    Radio
    import '@mantine/core/styles/Radio.css';
    Popover
    import '@mantine/core/styles/Popover.css';
    Progress
    import '@mantine/core/styles/Progress.css';
    Rating
    import '@mantine/core/styles/Rating.css';
    RingProgress
    import '@mantine/core/styles/RingProgress.css';
    ScrollArea
    import '@mantine/core/styles/ScrollArea.css';
    SegmentedControl
    import '@mantine/core/styles/SegmentedControl.css';
    SemiCircleProgress
    import '@mantine/core/styles/SemiCircleProgress.css';
    Skeleton
    import '@mantine/core/styles/Skeleton.css';
    SimpleGrid
    import '@mantine/core/styles/SimpleGrid.css';
    Slider
    import '@mantine/core/styles/Slider.css';
    Spoiler
    import '@mantine/core/styles/Spoiler.css';
    Stack
    import '@mantine/core/styles/Stack.css';
    Stepper
    import '@mantine/core/styles/Stepper.css';
    Switch
    import '@mantine/core/styles/Switch.css';
    Table
    import '@mantine/core/styles/Table.css';
    Tabs
    import '@mantine/core/styles/Tabs.css';
    Text
    import '@mantine/core/styles/Text.css';
    ThemeIcon
    import '@mantine/core/styles/ThemeIcon.css';
    Timeline
    import '@mantine/core/styles/Timeline.css';
    Title
    import '@mantine/core/styles/Title.css';
    Tooltip
    import '@mantine/core/styles/Tooltip.css';
    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 XFollow on 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 61e8a1c2b1e..6ad71baaddf 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 XFollow 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 XFollow on 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 9d3d1757f1c..61703eeed58 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 XFollow 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 XFollow on 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 904abdb5f68..8d5d2fa7fc2 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 XFollow 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 XFollow on 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 1eda5f23dfc..2716bc8ff94 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 XFollow 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 XFollow on 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 c98a6f761b1..70d7270a71e 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 XFollow 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 XFollow on 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 87bd2231577..0d5c06f9c6d 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 XFollow 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 XFollow on 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 9542267ec7d..91af4348f84 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 XFollow 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 XFollow on 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 dfcd68c20b3..e8e5560a075 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.

    @@ -333,4 +333,4 @@ mixins: false, }, }, -};

    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 XFollow 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 XFollow on 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 d77d4ba5a21..49251634df9 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 XFollow 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 XFollow on 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 ae3b24d844e..4263c62019d 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);
@@ -255,4 +255,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 XFollow 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 XFollow on 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 fde37a88eeb..1ca4cd1f434 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 XFollow 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 XFollow on 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 613d5fd0f87..cf14e48b1f0 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 XFollow 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 XFollow on 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 fef376f7a72..facf1215b83 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 XFollow 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 XFollow on 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 c331cf9892e..0d9a0c5abfd 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 XFollow 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 XFollow on 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 fb45fbfc6c1..96263080d32 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 XFollow 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 XFollow on 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 8265bb81429..b06f7499d7e 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 XFollow 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 XFollow on 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 bfc57513886..daec266df15 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 XFollow 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 XFollow on 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 e7991a28e52..d8f47167c94 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 XFollow 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 XFollow on 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 70dc94ff4c0..df1aef41f40 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

    @@ -164,4 +164,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 XFollow 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 XFollow on 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 202a8dc4103..73cca42b3d9 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 XFollow 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 XFollow on 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 e109b3f5f8d..6c0fc2387f8 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 XFollow 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 XFollow on 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 0920cf3e180..1a5dda7f5bb 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 XFollow 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 XFollow on 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 07c0ab3063e..0f17533b866 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 XFollow 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 XFollow on 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 c28ab3d919c..73128bc04b4 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 XFollow 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 XFollow on 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 0b05dc09bbe..910a637a153 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';
@@ -172,4 +172,4 @@
       <PhoneInput placeholder="Personal phone" />
     </>
   );
-}

    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 XFollow 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 XFollow on 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 92b99a4795a..d48a336f979 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 XFollow 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 XFollow on 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 3f54b243843..8973bf6461a 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 XFollow 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 XFollow on 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 2f694efc7d3..de36012b385 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 you 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 XFollow 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 XFollow on 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 e5fc3d4c1b8..85aca33fae0 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> </MantineThemeProvider> ); -}

    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 XFollow 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 XFollow on 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 ec635143014..00fc9d5ac0c 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 XFollow 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 XFollow on 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 dd098428c1c..02a319f18af 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 XFollow 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 XFollow on 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 e1eab22b0be..1ac1fe7954a 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 XFollow 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 XFollow on 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 5c77075a1b4..adad26cad54 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 XFollow 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 XFollow on 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 a154bd521e8..ffb51afc96f 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';
    @@ -393,4 +393,4 @@ <Code block>{JSON.stringify(notificationsStore.queue, null, 2)}</Code> </> ); -}

    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 XFollow 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 XFollow on 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 3a26c58e8f2..d2a945743e1 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 XFollow 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 XFollow on 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 c97f08867a6..e9bdc541812 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 XFollow 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 XFollow on 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 f13fe652cc3..6bc430c2790 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.13.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 XFollow 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.13.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 XFollow on GithubGitHub discussions

    Project

    Mantine UIDocumentationGithub organizationnpm organization

    Built by Vitaly Rtishchev and these awesome people

    \ No newline at end of file